盒子模型

<pre>

div

div 可定义文档中的分区（division）。

div 标签可以把网页分割为独立的、不同的部分。

image

可以看成以下结构：

image

<div> 不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class

，然后通过css选中某个div，对其进行样式美化。

<div class="demo">我是一个div</div>

<style>
        .demo{
            color:red;
            font-size: 20px;
        }   
</style>

image

每个div可以看成一个盒子

一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：

width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border

height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border

padding：内边距。

border：边框。

margin：外边距。

image

元素宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        div {
        width: 200px;
        height: 200px;
        background-color: gray;
    }    </style>
</head>
<body>
<div>我是一只小小鸟</div>
</body>
</html>

image

边框

属性说明示例

border-top-color 上边框颜色 border-top-color:#369;

border-right-color 右边框颜色 border-right-color:#369;

border-bottom-color 下边框颜色 border-bottom-color:#fae45b;

border-left-color 左边框颜色 border-left-color:#efcd56;

border-color 四个边框为同一颜色 border-color:#eeff34;

上、下边框颜色：#369

左、右边框颜色：#000

border-color:#369 #000;

上边框颜色：#369

左、右边框颜色：#000

下边框颜色：#f00

border-color:#369 #000 #f00;

上、右、下、左边框颜色：

#369、#000、#f00、#00f

border-color:#369 #000 #f00 #00f;

边框粗细

border-width:像素值

        order-top-width:5px;
        border-right-width:10px;
        border-bottom-width:8px;
        border-left-width:22px;
        border-width:5px ;
        border-width:20px 2px;
        border-width:5px 1px 6px;
        border-width:1px 3px 5px 2px;

边框样式

none

hidden

dotted

dashed

solid

double

        border-top-style:solid;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-style:solid ;
        border-style:solid dotted;
        border-style:solid dotted dashed;
        border-style:solid dotted dashed double;

border简写

同时设置边框的颜色、粗细和样式

       border-bottom: 9px #F00 dashed ;
        border: 9px #F00 dashed ;

外边距

  margin-top
    margin-right
    margin-bottom
    margin-left
    margin

          margin-top: 1px 
            margin-right : 2 px 
            margin-bottom : 2 px 
            margin-left : 1 px 
            margin : 3 px 5 px 7 px 4 px;
            margin: 3px 5px;
            margin: 3px 5px 7px;
            margin: 8px;

外边距的妙用

网页居中对齐

margin:0px  auto;

内边距

padding

padding-left

padding-right

padding-top

padding-bottom

padding

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

盒子型模的尺寸

image

盒子模型总尺寸=border-width+padding+margin+内容宽度

元素默认样式

很多标签都有自己的默认样式

我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式

body标签的margin为8px

image

p标签的上下外边距为16px

image

h1标签的上下外边距为21.440px

image

ul标签的上下外边距也为16px，左内边距也为40px

image

重置默认样式

为了兼容性，凡是浏览默认的样式，都不要使用。

重置默认样式 (css reset)

        /*默认样式重置(css reset)*/
        body, p, h1, h2, h3, h4, h5, h6, dl, dd {
            margin: 0;
            font-size: 12px; /* 中文字体大小的最小值 */
        }

        ol, ul {
            list-style: none; /* 去除列表样式 */
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

练习有路网右侧黑板报

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">

    <style>
        .black-board{
            width: 220px;
        }

        .black-board h2{
            font-size: 18px;
            padding-top: 6px;
            /*border: 1px solid red;*/
            padding-bottom: 6px;
        }

        .black-board a{
            color: black;
            line-height: 22px;
        }

        .black-board a:hover{
            color: orange;
            text-decoration: underline;
        }
        .black-board ul{
            padding-left: 22px;
            padding-bottom: 6px;
        }
        .black-board .report
        {
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
            padding-left: 10px;
        }
        .black-board .shopping{
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
            padding-left: 10px;
            margin-bottom: 10px;
        }


    </style>
</head>
<body>
<div class="black-board">
    <div class="report">
        <h2>黑板报</h2>
        <ul>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
        </ul>
    </div>
    <div class="shopping">
        <h2>购物指南</h2>
        <ul>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
        </ul>
    </div>
    <div class="ads">
        <img src="zhinan.jpg">
    </div>
</div>
</body>
</html>

练习有路网左侧图书分类

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左侧分类</title>
    <link href="reset.css" rel="stylesheet">
    <style type="text/css">

        .index-sort {
            border: 1px solid #dcdcdc;
            border-top: 0;
            background-color: #fff;
            width: 208px;
        }

        .cat-menu li {
            border-bottom: 1px dotted #dcdcdc;
            padding: 0 10px 0 26px;
        }

        .cat-menu li h2 {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
            /*background: url(../image/right_arrow.png) no-repeat right center;*/
        }

        .cat-menu li .min-sort {

            padding-bottom: 10px;
        }

        .cat-menu li .min-sort a {
            line-height: 22px;
            color: #696969;
            margin: 0 3px;
            height: 22px;
            /*display: inline-block;*/
            font-size: 12px;
        }

        .yl-all-index {
            padding: 10px;
            height: 20px;
            line-height: 20px;
            /*background: url(../image/right_arrow.png) no-repeat right center;*/
        }

        .yl-all-index a {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="index-sort">
    <ul class="cat-menu sort-menu-bd">
        <li class="mainCate">
            <h2>
                经济管理

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">市场营销</a>
                <a href="" target="_blank">经济学理论</a>
                <a href="" target="_blank">国际贸易</a>
                <a href="" target="_blank">物流管理</a>
                <a href="" target="_blank">管理学原理</a>
                <a href="" target="_blank">财务管理</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                文学艺术

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">设计</a>
                <a href="" target="_blank">音乐</a>
                <a href="" target="_blank">青春文学</a>
                <a href="" target="_blank">绘画</a>
                <a href="" target="_blank">人物传记</a>
                <a href="" target="_blank">外国文学</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                人文社科

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">数学</a>
                <a href="" target="_blank">英语教材</a>
                <a href="" target="_blank">化学</a>
                <a href="" target="_blank">日语</a>
                <a href="" target="_blank">生物科学</a>
                <a href="" target="_blank">专业英语</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                科学技术

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">语言与编程</a>
                <a href="" target="_blank">电子通信</a>
                <a href="" target="_blank">电工电子</a>
                <a href="" target="_blank">数据库</a>
                <a href="" target="_blank">建筑工程</a>
                <a href="" target="_blank">土木工程</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                生活休闲

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">家庭保健</a>
                <a href="" target="_blank">美食烹饪</a>
                <a href="" target="_blank">导游必备</a>
                <a href="" target="_blank">地理学理论</a>
                <a href="" target="_blank">动漫卡通</a>
                <a href="" target="_blank">球类</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                教育考试

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">教学理论</a>
                <a href="" target="_blank">自考</a>
                <a href="" target="_blank">研究生考试</a>
                <a href="" target="_blank">考研英语</a>
                <a href="" target="_blank">公务员考试</a>
                <a href="" target="_blank">初高中用书</a>
            </div>
        </li>
    </ul>

    <h2 class="yl-all-index">
        <a href="" target="_blank">浏览所有图书分类</a>
    </h2>
    <div class="book-ad-first">
        <a href="" target="_blank"><img src="img/haoshu.jpg" alt="新书推荐"></a>
    </div>
</div>
</body>
</html>

元素分类

行级（内联）元素

块级元素

内联块元素

行级元素

strong

内嵌元素的特性：

1.默认同行可以继续跟同类型标签

2.内容撑开宽度

3.不支持宽高

4.不支持上下的margin

span

span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。

通常用来着重显示某行文字中的某个单词

image

练习制作参考文献页面

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作参考文献</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
<h3>参考文献</h3>
<p>
    [1]<span>顾天晓.</span> Java程序动态更新技术研究[D].南京大学,2017.
</p>
<p>
    [2]<span>陆鹿,严立龙,李秋环,曾璐,金鑫,张玉修,侯泉林,张开均.</span>洋底高原及其对地球系统意义研究综述[J].岩

石学报,2016,32(06):1851-1876.
</p>
<p>
    [3]<span>黄玉坤,陈榕,裴喜龙,曹璟.</span>基于跨语言对象迁移策略的复合本地对象模型[J].计算机研究与发

展,2015,52(01):141-155.
</p>
<p>
    [4]<span>李数函.</span> 基于GP规范的JAVA智能卡操作系统研究[D].电子科技大学,2014.
</p>
<p>
    [5]<span>胡光.</span> 硬Java实时嵌入式平台及其关键技术研究[D].复旦大学,2012.
</p>
<p>
    [6]<span>邱江.</span> 十七世纪至十九世纪初爪哇农业地理初探（1602-1816）[D].暨南大学,2011.
</p>
<p>
    [7]<span>杨克峤.</span> Java程序优化与数据竞争检测的研究[D].复旦大学,2010.
</p>
<p>
    [8]<span>邓洋春.</span> Java虚拟机关键机制研究与实践[D].中南大学,2009.
</p>
<p>
    [9]<span>董威.</span> 多应用智能卡新技术研究[D].北京邮电大学,2008.
</p>
<p>
    [10]<span>王会进,龙舜.</span>Java性能优化技术综述[J].小型微型计算机系统,2008(04):720-725.
</p>
</body>
</html>

块级元素

div

h1~h6

ol-li

ul-li

dl-dt-dd

块元素的特性

1.默认独占一行显示

2.没有宽度时，默认撑满一排

3.支持所有css命令

内联块元素—代表元素img

inline-block的特点：

元素在一行显示

支持宽高

没有宽度的时候内容撑开宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        
        img {
        width: 300px;
        height: 200px;
        }    
    </style>
</head>
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
</body>
</html>

image

display属性

控制元素的显示和隐藏

块级元素与行级元素的转变

值说明

block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block 内联块元素

none 设置元素不会被显示

练习有路网顶部导航

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>顶部</title>
    <link href="reset.css" rel="stylesheet">
    <style type="text/css">
        .wrap {
            width: 1200px;
            margin: 0 auto;
        }
        .topBar {
            background-color: #f4f4f4;
            height: 29px;
            line-height: 29px;
            width: 100%
        }

        .topBar .topBarR {
            display: inline-block;
        }
        .topBar .topBarL {
            display: inline-block;
            margin-right:400px;
        }
        .topBar .topBarR li {
            display: inline-block;
        }
        .topBar .topBarR li a{
            line-height: 20px;
            padding: 0 8px;
            border-right: 1px solid #ddd;
        }

        .topBar .topBarR .login {
            color: #f51400
        }

        .topBarL span {
            font-size: 12px;
            color: #636363;
        }
        .topBar .topBarR .last a{
            border: none;
        }

    </style>
</head>
<body>
<div class="topBar">
    <div class="wrap">
        <div class="topBarL">
            <img src="img/welcome.jpg" alt="">
            <span>您好，欢迎光临有路网！</span>
        </div>
        <ul class="topBarR">
            <li>
                <a href="" class="login">请登陆</a>&nbsp;&nbsp;
                <a href="" class="regist-link">免费注册</a>
            </li>

            <li>
                   <a href="" target="_blank">我的有路</a><b></b>
            </li>

            <li>
                <a href="" target="_blank">我要开店</a>
            </li>

            <li>
                <a href="" target="_blank">团购批发</a>
            </li>

            <li>
                <a href="">客服服务</a><b></b>
            </li>

            <li><a href="" target="_blank" class="menu-btn">
                <img src="img/ico_phone.gif">手机有路</a>
            </li>

            <li  class="last">
                    <a href="" class="menu-btn">微信公众号</a>
            </li>
        </ul>

    </div>
</div>
</body>
</html>

背景图像

background-image属性

background-image:url(图片路径);

背景重复方式

background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

背景定位

background-position属性

Xpos Ypos

单位：px

Xpos表示水平位置，Ypos表示垂直位置

X% Y%

使用百分比表示背景的位置

X、Y方向关键词

水平方向的关键词：left、center、right

垂直方向的关键词：top、center、bottom

项目实战制作分页

image

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(css reset)*/
        body,p,h1,h2,h3,h4,h5,h6,dl,dd{
            margin: 0;
            font-size: 12px;
        }
        ol,ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        img {
            border: none;
        }
        .pages {
            width: 600px;
            height: 60px;

            line-height:60px;
            background: #e8e8e8;
            margin: 90px auto;
            text-align: center;
        }
        .pages a {
            background: #fff;
            border: 1px solid #cdcdcd;
            color: #333333;
            padding: 0 8px 0 9px;
            /*height: 28px;*/
            line-height: 28px;/* line-height的值跟height的值一样，字体就会垂直居中 */
            display: inline-block;
        }
        .pages a:hover {
            border-color: red;
            color: red;
        }
        .pages .activied {
            font-weight: bold;
            background: #fcf9ea;
            cursor: text;
        }
        .pages .activied:hover {
            border-color: #cdcdcd;
            color: #333333;
        }
    </style></head><body>
<div class="pages">
    <a href="#">上一页</a>
    <a href="#" class="activied">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">...87</a>
    <a href="#">下一页</a>
</div></body></html>

课后作业

必做任务

1.制作图片商品列表（div标签，边距，填充）

2.注册窗口（ div标签，边距，填充）

扩展任务

1.制作家用电器分类（div的嵌套）

2.制作音乐列表（背景图像）

3.制作抽屉样式（div的隐藏）

最后编辑于：2018.01.30 16:50:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,222评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,455评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,720评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,568评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,696评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,879评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,028评论 3赞 409
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,773评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,220评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,550评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,697评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,360评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,002评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,782评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,010评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,433评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,587评论 2赞 350

盒子模型

div

元素宽高

边框

边框粗细

边框样式

border简写

外边距

外边距的妙用

内边距

盒子型模的尺寸

元素默认样式

重置默认样式

练习 有路网右侧黑板报

练习 有路网左侧图书分类

元素分类

行级元素

span

练习 制作参考文献页面

块级元素

块元素的特性

内联块元素—代表元素img

display属性

练习 有路网顶部导航

背景图像

项目实战 制作分页

课后作业

推荐阅读更多精彩内容

练习有路网右侧黑板报

练习有路网左侧图书分类

练习制作参考文献页面

练习有路网顶部导航

项目实战制作分页