DocPortal
目录

盒子模型

CSS三大特性：继承/层叠/优先级

优先级：继承< 通配符选择器 < 标签 < 类 < id < 行内样式 < !import

权重叠加计算：复合选择器需要通过权重叠加计算方法判断最终哪个选择器优先级最高生效：一级(行内样式的个数) ，二级(id选择器的个数)，三级(类选择器的个数)，四级(标签选择器的个数)

# 盒子模型

内容区域(content: width/height)，内边距区域（padding），边框区域(border)，外边距区域（margin)

border边框： border: 10px solid/dashed red，快捷键：bd +tab，border-left/right/top/bottom四方向，border-with/style/color

padding内边距:

  • 四值：上右下左 padding:10px 20px 40px 80px;
  • 三值：上 左右 下 padding: 10px 40px 80px;
  • 两值：上下 左右 padding:10px 80px;
  • 一值：上下 padding: 20px;

自动内减： 设置**box-sizing: border-box;**浏览器自动计算多余大学，自动在内容这减去。

margin外边距: 跟padding内边距一样，有四种：

默认内外边距：

  • body标签默认有margin：8px
  • p标签默认有上下的margin
  • ul标签默认由上下的margin和padding-left

清除默认内外边距：

  • 设置 { padding : 0, margin: 0}
  • 左右自适应居中： margin: 0 auto;

外边距折叠现象

  • ①合并现象

场景：垂直布局的块级元素上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免就好： 只给其中一个盒子设置margin即可

  • ②塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

  1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top)
  2. 给父元素设置overflow：hidden
  3. 转换成行内块元素
  4. 设置浮动

行内标签(例如：span)

  • 如果想要通过margin或padding改变行内标签的垂直位置，无法生效
  • 行内标签的margin-top和bottom不生效
  • 行内标签的padding-top或botttom不生效
  • 改变行内标签垂直位置使用: line-height: 20px

# 浮动

# 结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

  • E:first-child{} 匹配父元素中第一个子元素，并且是E元素 => li: nth-child(2){}
  • E:last-child {} 匹配父元素中最后一个子元素，并且是E元素
  • E:nth-child(n){} 匹配父元素中第n个子元素，并且是E元素
  • E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素
  • n除了1，2，3....数字外，n可以组成常见公式：
    • 奇数： 2n+1、2n-1、odd
    • 偶数：2n、even
    • 找到前5个：-n+5
    • 找到从第5个往后：n+5

# 伪元素

目标：能够使用月伪元素在网页中创建内容

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

  • 元素：HTML设置的标签
  • 伪元素：由CSS模拟出的标签效果

种类：

  • ::before 在父元素内容的最前添加一个伪元素
  • ::after 在父元素内容的最后添加一个伪元素

注意点：

  • 必须设置content属性才能生效

  • 伪元素默认是行内元素

<style>
 .fater::before {content: '老鼠'}
 .fater::after {
     content: '大米';
     color:green;
     width:10px;
     height:10px;
     background-color:blue;
     display:block //默认是行元素，宽高不生效
    }
</style>
<body>
 <div class="fater"> 爱</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

  • 块级元素：从上往下，垂直布局，独占一行行内元素或
  • 行内块元素：从左往右，水平布局，空间不够自动折行

# 浮动

浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的间距
display:inline-block
1
2

作用：早期：图文环绕；现在：网页布局

<style> img{float:left} <style>
<!-- one和two在左想挨着-->
<style> one{float:left} two{float:left}<style>
1
2
3

代码：

特点：

  • 浮动的特点浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
  • 相当于从地面飘到了空
  • 浮动元素比标准流高半个级别可以覆盖标准流中的元素
  • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  • 浮动元素有特殊的显示效果
  • 一行可以显示多个
  • 可以设置宽高
<style> one{float:left} <style>
//one飘起来了，two会占用one的标准流空间，但是two的子是挨着one的
1
2

注意点：浮动的元素不能通过text-align:center或者margin:0 auto

<style>
    .one {
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
    }
     .two {
      width: 200px;
      height: 200px;
      background-color: skyblue;   
    }
     .three {
      width: 300px;
      height: 300px;
      background-color: orange;   
    }
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

再在two中添加浮动

  .two {
      width: 200px;
      height: 200px;
      background-color: skyblue;   
      float: left;
      
     /*因为有浮动，不能生效－盒子无法水平居中 */
    //  margin:0 auto;  
    }
1
2
3
4
5
6
7
8
9

再修改one：

  .one {
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
      margin-top: 50px; //浮动的标签 顶对其 浮动：在一行排列，宽高生效--浮动后的标签具备行内块特点
    }
1
2
3
4
5
6
7

# 案例

# 网页布局

样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .top {
            height: 40px;
            background-color: #333;
        }
        
        .header {
            height: 100px;
            width: 1226px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        
        .content {
            /* w1226+h460+bc*/
            width: 1226px;
            height: 460px;
            background-color: green;
            
            margin: 0 auto;
            /*左右居中*/
        }
        
        .left {
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            
            float: left;
        }
        
        .right {
           float: left;
            /*左右浮动都可以*/
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>


<body>
    <div class="top">top</div>
    <div class="header">header</div>
    <div class="content">
        <!--.left+.right 生成左右的两个class的div -->
        <div class="left"><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .top {
            height: 40px;
            background-color: #333;
        }

        .header {
            margin: 0 auto;

            height: 100px;
            width: 1226px;
            background-color: #ffc0cb;
        }

        .content {
            margin: 0 auto;
            /*左右居中*/

            /* w1226+h460+bc*/
            width: 1226px;
            height: 460px;
            background-color: green;
        }

        .left {
            float: left;

            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            /*左右浮动都可以*/
            float: left;

            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>


<body>
    <div class="top">top</div>
    <div class="header">header</div>
    <div class="content">
        <!--.left+.right 生成左右的两个class的div -->
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

CSS书写顺序：浏览器执行效率更高

  1. 浮动/display
  2. 盒子模型：margin border padding宽度高度背景色
  3. 文字样式
# 小米模块案例

样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color: pink;*/
        }
        
        .left {
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        
        .right {
            /*左右之间存在14px的间距，所以，使用float: right来实现*/
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: green;*/
        }
        
        ul {
            /*去掉列表的符号*/
            list-style: none;
        }
        
        .right li {
            float: left;
            margin-bottom: 14px;
            margin-right: 14px;
            width: 234px;
            height: 300px;
            background-color: #78ceeb;
        }
        
        .right li:nth-child(4n) {
            /*如果父级的宽度不够，子级会自动换行*/
            /*第四个li和8个li右侧间距清除*/
            margin-right: 0;
        }
    </style>
</head>
<div class="box">
    <div class="left"></div>
    <div class="right">
        <!--ul>li*8 快捷实现-->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# 网页导航案例

样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        
        ul {
            list-style: none;
        }
        
        .nav li {
            float: left;
        }
        
        .nav li a {
            /*行转块*/
            /* display: inline-block;*/
            display: block;
            width: 80px;
            height: 50px;
            /*内容水平居中*/
            text-align: center;
            line-height: 50px;
            color: #fff;
            text-decoration: none;
        } 
        .nav li a:hover {
            background-color: green;
        }
    </style>
</head>
<div class="nav">
    <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>
        <li><a href="#">新闻</a></li>
    </ul>
</div>
<body>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 浮动清除

含义：清除浮动带来的影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标→不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

受影响的案例：

样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top {
            margin: 0 auto;
            width: 1000px;
            /*受浮动的影响，掉下去了*/
            /* height: 300px;*/
            background-color: pink;
        }
        
        .bttom {
            height: 100px;
            background-color: green;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: #792b2b;
        }
    </style>
</head>
<body>
<!-- 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置
   父级加高度可以规避，但是有时候高度不确定，就不能加高度-->
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="bttom"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 清除浮动的方法
# ①直接设置父元素高度

特点：优点：简单粗暴，方便

​ 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

# 额外标签法

操作：

  1. 在父元素内容的最后添加一个块级元素
  2. 添加的块级元素设置clear：both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

 <style>
        /*清除浮动*/ 
        .clearfix {
            clear: both;
        }
    </style>
</head>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <!--在父元素内容的最后添加一个块级元素-->
    <div class="clearfix"></div>
</div>
<div class="bttom"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# ③单伪元素清除法

操作：用伪元素替代了额外标签

①基本写法

.clearfix::after{
 content:'';
 display:block;
 clear:both;
}
1
2
3
4
5

②补充写法

.clearfix::after{
 content:'';
 display:block;
 clear:both;
 height:0;
 /*补充代码：在网页中看不到伪元素*/
 visibility:hidden;
}
1
2
3
4
5
6
7
8

优点：项目中使用，直接给标签加类即可清除浮动

代码：

<head>
    <style>  
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            height: 0;
            /*补充代码：在网页中看不到伪元素*/
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父级标签添加伪元素-->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bttom"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# ④双伪元素清除法

操作:

.clearfix::before,
.clearfix::after{
   content:'';
   display:table;
 }
.clearfix::after{
   clear:both;
 }
1
2
3
4
5
6
7
8

优点：项目中使用，直接给标签加类即可清除浮动

<head>
    <style>
        /* .clearfix::before作用：解决外边距塌陷问题:
          外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置*/
        /*清除浮动*/     
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        /*真正清除浮动的标签*/   
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bttom"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 给父元素设置overflow: hidden;

操作 :直接给父元素设置overflow: hidden;

优点：方便

# 项目-学成在线

流程：根目录：网站的第一级文件夹

  1. 图片文件夹: images

  2. 样式文件夹: CSS

  3. 首页 : index.html ，引入样式

<link rel="stylesheet" herf="./css/index.css">
1

vscode编码方式：分屏，左边html，右边css

布局：从外到内，从上到下，从左到右

CSS：浮动/display；盒子模型；文字样式

# 版心/清除默认样式

样式设置

/*模式样式设置*/
* {
    margin: 0;
    padding: 0;
    /*内减模式*/
    box-sizing: border-box;
}

/*去掉列表的符号*/
li {
    list-style: none;
}
a {
    text-decoration: none;
}

/*清除浮动*/
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}
body {
    background-color: #f5f3f7;
}
/*版心*/
.wrapper {
    width: 1200px;
    margin: 0 auto;
    background-color: aliceblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

页面

<body>
    <div class="header wrapper">
    </div>
</body>
1
2
3
4
# header布局
.header {
    height: 42px;
    background-color: #985151;
    /*margin-top: 30px;
    margin-bottom: 30px;*/
    /*不能写margin: 30px 0；会覆盖到上面版心的margin，使其auto不生效*/
    margin: 30px auto;
}
1
2
3
4
5
6
7
8
# logo和nav导航布局
<div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png"></a>
        </h1>
        <div class="nav">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">课程</a>
                </li>
                <li>
                    <a href="">职业规划</a>
                </li>
            </ul>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

css样式：

h1 {
    float: left;
}

.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a {
    /*在浮动中设置高不生效，要转换为块才生效*/
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px solid #00a4ff;*/
    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 搜索布局&搜索按钮
<body>
    <div class="header wrapper">
        <!--logo-->
        <h1>
            <a href="#"><img src="./images/logo.png"></a>
        </h1>
        <!--导航-->
        <div class="nav">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">课程</a>
                </li>
                <li>
                    <a href="">职业规划</a>
                </li>
            </ul>
        </div>

        <!--搜索-->
        <div class="search">
            <input type="text" placeholder="输入关键词">
            <button></button>
        </div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

样式：

.search {
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}
.search input {
    float: left;
    padding-left: 20px;
    /*左右加一起的尺寸要小于等于410*/
    width: 360px;
    height: 38px;
    border: 0;
}
/*控制placeholder的样式*/
.search input::placeholder {
    font-size: 14px;
    color: #bfbfbf;
}
.search button {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 用户布局
  <!--用户-->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>yuajs</span>
        </div>
1
2
3
4
5

样式：

.user {
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}
.user img {
    /*调整图片垂直对齐方式，middle：居中对齐*/
    vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10

重点：vertical-align调整图片垂直对齐方式，middle：居中对齐

# banner布局

  <div class="banner">
      <div class="wrapper">
        <div class="left"></div>
        <div class="right"></div>
      </div>
   </div>
1
2
3
4
5
6

样式：

/*轮播图背景区*/
.banner{
    height: 420px;
    background: #1c036c;
}

.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}

.banner .left{
    float: left;
    width: 190px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.3);
}

.banner .right{
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 <div class="left">
      <ul>
                <li><a href="#">前度开发<span>></span></a></li>
                <li><a href="#">前度开发<span>></span></a></li>
                <li><a href="#">前度开发<span>></span></a></li>
                <li><a href="#">前度开发<span>></span></a></li>
                <li><a href="#">前度开发<span>></span></a></li>
                <li><a href="#">前度开发<span>></span></a></li>
       </ul>
</div>
1
2
3
4
5
6
7
8
9
10

css样式

/*设置文字里左边的间距，以及每行文字之间的行高*/
.banner .left{
    padding: 0 20px;
    /*行高属于控制文字的数下，能继承*/
    line-height: 44px;
}

/*文字中的> 右浮动*/
.banner .left span{
    float: right;
}

/*设置文字的颜色大小*/
.banner .left a{
    font-size: 14px;
    color: #fff;
}
/*设置文字在鼠标悬停的颜色状态*/
.banner .left a:hover{
    color: #00a4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="right">
            <!--标题-->
            <h2>我的课程表</h2>
            <!--内容-->
            <div class="content">
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
                <dl>
                    <dt>继续学习 程序语言设计</dt>
                    <dd>正在学习-使用对象</dd>
                </dl>
            </div>
            <!--底部-->
            <a href="#" class="more">全部课程</a>
        </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

css样式

/*标题：设置高度，背景色，文本居中，行高，字体大小，颜色*/
.banner .right h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}


/*设置内容中的边框*/
.banner .right .content {
    padding: 0 18px;
}

/*设置内容中每一对的边框样式*/
.banner .right .content dl {
    padding: 12px 0;
    border-bottom: 2px solid #e5e5e5;
}
/*设置内容中第一行的样式: 字体，颜色*/
.banner .right .content dt {
    font-size: 16px;
    color: #4e4e4e;
}
/*设置内容中第二行的样式: 字体，颜色*/
.banner .right .content dd {
    font-size: 14px;
    color: #4e4e4e;
}

/*设置底部样式：行高，字体，颜色，大小，转块*/
.banner .right .more {
    display: block;
    margin: 4px auto;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;

    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

# 精品推荐

    <!--精品推荐-->
     <div class="goods wrapper">
        <h2>精品推荐</h2>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MYSQL</a></li>
            <li><a href="#">JAVAWeb</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="xxq">修改兴趣</a>
     </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

样式

/*设置大的布局*/
.goods {
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 3px 0px rgba(118, 118, 118, 0.2);
    line-height: 60px;
}

.goods h2 {
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 400;
}

.goods ul {
    float: left;
    margin-left: 30px;
}

.goods ul li{
    float: left;
}

.goods ul a{
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}

.goods .xxq {
    float: right;
    font-size: 14px;
    color: #00a4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 精品课程

# 标题

  <!--精品课程-->
    <div class="box wrapper">
      <div class="title">
        <h2>精品推荐</h2>
        <a href="#">查看全部</a>
      </div>
    </div>
1
2
3
4
5
6
7

css样式

.box {
    margin-top: 35px;
}
.box .title {
    height: 40px;
    /*background-color: pink;*/
}
.box .title h2 {
    float: left;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}
.box .title a {
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #a5a5a5;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 内容

  <!--内容: 清除浮动clearfix，是为了后面的版权区域-->
      <div class="content clearfix">
        <ul>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
                   ....
        </ul>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

css样式

.box .content li {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
  /*  background: pink;*/
}

.box .content li:nth-child(5n){
    margin-right: 0;
}

.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}

.box .content li span{
   color: #ff7c2d;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 版权区域

  <!--版权：注意要清除浮动的影响，课程的li的父级
        li都浮动了，脱标，撑不开父级的高度,需要在：精品课程的内容中清除浮动 -->
    <div class="footer wrapper">
           <div class="left">
            <img src="./images/logo.png" alt="">
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
              @ 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
              <a href="#">下载APP</a>
           </div>
           <div class="right">
            <dl>
              <dt>合作伙伴</dt>
              <dd><a href="#">合作机构</a></dd>
              <dd><a href="#">合作导师</a></dd>
            </dl>
            <dl>
              <dt>新手指南</dt>
              <dd><a href="#">如何注册</a></dd>
              <dd><a href="#">如何拿到毕业证</a></dd>
              <dd><a href="#">考试未通过怎么办</a></dd>
            </dl>
            <dl>
              <dt>关于网站</dt>
              <dd><a href="#">管理团队</a></dd>
            </dl>
           </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

css样式

.footer {
    margin-top: 40px;
    padding-top: 30px;
    height: 417px;
    background-color: #fff;
}

.footer .left {
    float: left;
}

.footer .left p {
    margin: 20px 0 10px;
    font-size: 12px;
    color: #666;
}

.footer .left a {
    display: block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;
}

.footer .right {
    float: right;
}

.footer .right dl {
    float: left;
    margin-left: 120px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 整体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <title>Document</title>
  </head>
  <body>
    <!--header-->
    <div class="header wrapper">
      <!--logo-->
      <h1>
        <a href="#"><img src="./images/logo.png" /></a>
      </h1>
      <!--导航-->
      <div class="nav">
        <ul>
          <li>
            <a href="">首页</a>
          </li>
          <li>
            <a href="">课程</a>
          </li>
          <li>
            <a href="">职业规划</a>
          </li>
        </ul>
      </div>

      <!--搜索-->
      <div class="search">
        <input type="text" placeholder="输入关键词" />
        <button></button>
      </div>
      <!--用户-->
      <div class="user">
        <img src="./images/user.png" alt="" />
        <span>yuajs</span>
      </div>
    </div>
    <!--banner-->
    <div class="banner">
      <div class="wrapper">
        <div class="left">
          <ul>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
            <li>
              <a href="#">前度开发<span>></span></a>
            </li>
          </ul>
        </div>
        <div class="right">
          <!--标题-->
          <h2>我的课程表</h2>
          <!--内容-->
          <div class="content">
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
            <dl>
              <dt>继续学习 程序语言设计</dt>
              <dd>正在学习-使用对象</dd>
            </dl>
          </div>
          <!--底部-->
          <a href="#" class="more">全部课程</a>
        </div>
      </div>
    </div>
    <!--精品推荐-->
    <div class="goods wrapper">
      <h2>精品推荐</h2>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Spark</a></li>
        <li><a href="#">MYSQL</a></li>
        <li><a href="#">JAVAWeb</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">jQuery</a></li>
      </ul>
      <a href="#" class="xxq">修改兴趣</a>
    </div>

    <!--精品课程-->
    <div class="box wrapper">
      <!--标题-->
      <div class="title">
        <h2>精品推荐</h2>
        <a href="#">查看全部</a>
      </div>
      <!--内容-->
      <div class="content clearfix">
        <ul>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
              <img src="./images/hot.png" alt="" class="hot" >
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
               <img src="./images/hot.png" alt="" class="hot" >
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/course04.png" alt="" />
              <h3>Tink PHP 5.0 博客系统实战项目演练</h3>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!--版权：注意要清除浮动的影响，课程的li的父级
        li都浮动了，脱标，撑不开父级的高度,需要在：精品课程的内容中清除浮动 -->
    <div class="footer wrapper">
           <div class="left">
            <img src="./images/logo.png" alt="">
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
              @ 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
              <a href="#">下载APP</a>
           </div>
           <div class="right">
            <dl>
              <dt>合作伙伴</dt>
              <dd><a href="#">合作机构</a></dd>
              <dd><a href="#">合作导师</a></dd>
            </dl>
            <dl>
              <dt>新手指南</dt>
              <dd><a href="#">如何注册</a></dd>
              <dd><a href="#">如何拿到毕业证</a></dd>
              <dd><a href="#">考试未通过怎么办</a></dd>
            </dl>
            <dl>
              <dt>关于网站</dt>
              <dd><a href="#">管理团队</a></dd>
            </dl>
           </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212

样式

/*模式样式设置*/

* {
    margin: 0;
    padding: 0;
    /*内减模式*/
    box-sizing: border-box;
}


/*去掉列表的符号*/

li {
    list-style: none;
}

a {
    text-decoration: none;
}


/*清除浮动*/

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

body {
    background-color: #f5f3f7;
}


/*版心*/

.wrapper {
    width: 1200px;
    margin: 0 auto;
    /*  background-color: aliceblue;*/
}

.header {
    height: 42px;
    /* background-color: #985151;*/
    /*margin-top: 30px;
    margin-bottom: 30px;*/
    /*不能写margin: 30px 0；会覆盖到上面版心的margin，使其auto不生效*/
    margin: 30px auto;
}

h1 {
    float: left;
}

.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a {
    /*在浮动中设置高不生效，要转换为块才生效*/
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px solid #00a4ff;*/
    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}

.search {
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}

.search input {
    float: left;
    padding-left: 20px;
    /*左右加一起的尺寸要小于等于410*/
    width: 360px;
    height: 38px;
    border: 0;
}


/*控制placeholder的样式*/

.search input::placeholder {
    font-size: 14px;
    color: #bfbfbf;
}

.search button {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}

.user {
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}

.user img {
    /*调整图片垂直对齐方式，middle：居中对齐*/
    vertical-align: middle;
}

/*轮播图背景区*/
.banner {
    height: 420px;
    background: #1c036c;
}

.banner .wrapper {
    height: 420px;
    background-image: url(../images/banner2.png);
}

/*设置文字里左边的间距，以及每行文字之间的行高*/
.banner .left {
    float: left;
    padding: 0 20px;
    /*行高属于控制文字的数下，能继承*/
    line-height: 44px;
    width: 190px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.3);
}

/*文字中的> 右浮动*/
.banner .left span {
    float: right;
}

/*设置文字的颜色大小*/
.banner .left a {
    font-size: 14px;
    color: #fff;
}

/*设置文字在鼠标悬停的颜色状态*/
.banner .left a:hover {
    color: #00a4ff;
}

.banner .right {
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;
}

/*标题：设置高度，背景色，文本居中，行高，字体大小，颜色*/
.banner .right h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}


/*设置内容中的边框*/
.banner .right .content {
    padding: 0 18px;
}

/*设置内容中每一对的边框样式*/
.banner .right .content dl {
    padding: 12px 0;
    border-bottom: 2px solid #e5e5e5;
}

/*设置内容中第一行的样式: 字体，颜色*/
.banner .right .content dt {
    font-size: 16px;
    color: #4e4e4e;
}

/*设置内容中第二行的样式: 字体，颜色*/
.banner .right .content dd {
    font-size: 14px;
    color: #4e4e4e;
}

/*设置底部样式：行高，字体，颜色，大小，转块*/
.banner .right .more {
    display: block;
    margin: 4px auto;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;

    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
}

/*设置大的布局*/
.goods {
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 3px 0px rgba(118, 118, 118, 0.2);
    line-height: 60px;
}

.goods h2 {
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 400;
}

.goods ul {
    float: left;
    margin-left: 30px;
}

.goods ul li {
    float: left;
}

.goods ul a {
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}

.goods .xxq {
    float: right;
    font-size: 14px;
    color: #00a4ff;
}


.box {
    margin-top: 35px;
}

.box .title {
    height: 40px;
    /*background-color: pink;*/
}

.box .title h2 {
    float: left;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}

.box .title a {
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #a5a5a5;
}

.box .content li {
    float: left;
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    /*  background: pink;*/
}

.box .content li .hot{
    position: absolute;
    right:-4px; 
    top:4px; 
}

.box .content li:nth-child(5n) {
    margin-right: 0;
}

.box .content li h3 {
    padding: 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box .content li p {
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}

.box .content li span {
    color: #ff7c2d;
}

.footer {
    margin-top: 40px;
    padding-top: 30px;
    height: 417px;
    background-color: #fff;
}

.footer .left {
    float: left;
}

.footer .left p {
    margin: 20px 0 10px;
    font-size: 12px;
    color: #666;
}

.footer .left a {
    display: block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;
}

.footer .right {
    float: right;
}

.footer .right dl {
    float: left;
    margin-left: 120px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
上次更新: 2024/07/10, 18:38:04
选择器&字体&文本
定位

← 定位→

Theme by Vdoing | Copyright © 2024-2024 VirtualAgent | Apache 2.0 License