hooyantsing's Blog

第21次课程

字数统计: 1.2k阅读时长: 6 min
2019/06/01

源辰74班

第21次课程

06.01.2019

**内容    **

CSS

1.认识div标签

除了div标签,其他的块级元素不能嵌套块级元素。

普通的块级元素可以嵌套行内元素。

 div:

      1.块级元素

      2.可以嵌套任何元素

      3.适合做网页布局

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                  span{
                        color: red;
                        font-size: 14px;
                        font-weight: bold;
                  }
            </style>
      </head>
      <body>
            <!--
             除了div标签,其他的块级元素不能嵌套块级元素。
             普通的块级元素可以嵌套行内元素。
             div:
             1.块级元素
             2.可以嵌套任何元素
             3.适合做网页布局
        -->
        <p>汗滴禾<span>下</span>土</p>
      </body>
</html>

2.行内标签转为块级标签

1
display: block;   /*可将行内标签转化为块级标签*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                  span{
                        display: block;   /*可将行内标签转化为块级标签*/
                  }
            </style>
      </head>
      <body>
            <!--
             块级元素:独占一行,能够设置高度和宽度
             行内元素:不独占一行,设置高度和宽度没有效果
        -->
        <p>块级标签</p>
            <span>行内标签</span>
      </body>
</html>

3.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
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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            
            <style>
                  /*开头,用于消除默认外边框和内边框*/
                  *{
                        padding: 0;
                        margin: 0;
                  }
                  div{
                        /*div基本属性*/
                        height: 100px;                /*设置高度*/
                        width: 100px;                 /*设置宽度*/
                        background:red;               /*设置背景颜色*/
                        
                        /*margin外边框用法*/
                        margin: 10px;                 /*统一设置上下左右10px*/
                        margin-top: 10px;       /*设置距上10px*/
                        margin-bottom: 10px;    /*设置距下10px*/
                        margin-left: 10px;            /*设置距左10px*/
                        margin-right: 10px;           /*设置距右10px*/
                        margin: 0 auto;               /*距上0px,居中显示*/
                        
                        /*border边框用法*/
                        border: 1px solid blue; /*三参数:width,style,color*/
                        border-width: 1px;            /*设置边宽度*/
                        border-style: solid;    /*设置边样式*/
                        border-color: blue;           /*设置边颜色*/
                        border-radius: 100%;    /*设置四角曲度,100%时div为圆形*/
                        
                        border-top: 1px solid blue;               /*单独设置上边框*/
                        border-bottom: 2px dashed green;    /*单独设置下边框*/
                        border-left: 3px double yellow;           /*单独设置左边框*/
                        border-right: 4px dotted pink;            /*单独设置右边框*/
                        
                        /*padding内边框用法*/
                        padding: 10px;                /*统一设置上下左右10px*/
                        padding-top: 50px;            /*设置距上50px*/
                        padding-bottom: 50px;   /*设置距下50px*/
                        padding-left: 50px;           /*设置距左50px*/
                        padding-right: 50px;    /*设置距右50px*/
                  }
            </style>
      </head>
      <body>
            <div>
                  
            </div>
      </body>
</html>

4.float应用

96100487f6b7f774ecc96fb687ef6d40.png

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            *{
                  margin: 0;
                  padding: 0;
            }
            #bigBox{
                  margin: 0 auto;
                  width: 600px;
            }
                  #box1{
                        height: 100px;
                        width: 600px;
                        background: gray;
                  }
                  #box2{
                        height: 300px;
                        width: 300px;
                        background: deepskyblue;
                        float: left;
                  }
                  #box3{
                        height: 300px;
                        width: 300px;
                        background: greenyellow;
                        float: left;                  /*脱离文本流,在页面上浮动*/
                  }
                  #box4{
                        height: 100px;
                        width: 600px;
                        background: gray;
                        clear: both;                  /*清除其他标签的float*/
                  }
                  p{
                        font-weight: bold;
                  }
            </style>
      </head>
      <body>
            <div id="bigBox">
                  <div id="box1"><p>顶部(header)</p></div>
                  <div id="box2"><p>登陆(login)</p></div>
                  <div id="box3"><p>登陆说明(loginright)</p></div>
                  <div id="box4"><p>底部(footer)</p></div>
            </div>
                  
      </body>
</html>

5.[项目]菜单栏

效果图:

**d5ec9e652c6ae5a7117717d8448efecf.png

**

伪类(hover)图:

**517a38067883c529e0d38d53292a76a6.png

**

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
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                  *{
                        padding: 0;
                        margin: 0;
                  }
                  #nav{
                        width: 960px;
                        height: 50px;
                        border: 1px solid red;
                        margin: 100px auto;
                  }
                  #nav ul{
                        list-style: none;       /*去除小圆点*/
                  }
                  #nav ul li{
                        float: left;
                        widows: 120px;
                        height: 100%;
                        text-align: center;           /*文字左右居中*/
                        line-height: 50px;            /*文字上下居中*/
                        background: purple;
                  }
                  #nav ul li a{
                        color: white;
                        text-decoration: none;  /*去除下划线*/
                        display: block;
                        width: 120px;
                        height: 100%;
                  }
                  #nav ul li a:hover{
                        background: #F90;
                  }
            </style>
      </head>
      <body>
            <div id="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>
</html>
CATALOG