Candy1029

什么是盒子模型

  一个页面元素由:元素、边框、内边距、外边距构成。

  

  width和height通常指元素的高度和宽度。元素的实际高度和宽度的计算如下图所示:(元素的宽度和高度是不加外边距margin的,展位的宽度和高度需要加上margin)

  

  技巧:margin-left=margin-right=auto时,元素可以水平居中。

  一般在网页设计过程中,body元素根据浏览器的不同会有不同的margin的默认值,一般要手动设置为0px。

示例代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>盒子模型的概念</title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body style="border:1px solid blue;margin:0px;">
 9     <div style="border:1px solid;width:200px;height:150px;padding:25px;margin:auto;">
10         盒子模型的结构图
11     </div>
12 </body>
13 </html>

 

盒子模型的尺寸样式

  width  元素的宽度。使用频率极高(网页实际设计过程中绝大多数情况都使用px作为宽度设置的单位)。

    块级标签的特点:

      1.默认填充整个父容器,等效于width:100%。

      2.可以使用width:length的方式指定宽度。

    行级标签的特点:

      1.行级元素的宽度不是认为指定的,是由元素内容本身的宽度来决定的。如果要设置width则必须使用display:block将行级标签变成块级标签。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>盒子模型的尺寸样式</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3>width元素宽度(块级标签:div,li,ol,ul等)</h3>
17             <div style="width:300px;">
18                 这是一个块级标签
19             </div>
20             <dl>
21                 <dt>块级标签的特点:</dt>
22                 <dd>
23                     1.默认填充整个父容器,等效于width:100%
24                 </dd>
25                 <dd>
26                     2.可以使用width:length的方式指定宽度
27                 </dd>
28             </dl>
29         </li>
30         <li>
31             <h3>width元素宽度(行级标签:a,span,input,i,em标签等)</h3>
32             <span>
33                 这是一个行级标签
34             </span>
35             <p><strong>1.行级元素的宽度不是认为指定的,是由元素内容本身的宽度来决定的。如果要设置width则必须使用display:block将行级标签变成块级标签。</strong> </p>
36         </li>
37         <li>
38             <h3>width元素宽度(行级标签:a,span,input,i,em标签等)</h3>
39             <span>
40                 这是一个行级标签
41             </span>
42             <p><strong>将行级标签变成块级标签后如下所示:</strong> </p>
43             <span style="display:block;">
44                 这是一个行级标签转变成块级标签后的样式
45             </span>
46         </li>
47     </ul>
48 </body>
49 </html>

 

  min-width(只适用于块级标签)

  元素的最小宽度,一般用于网页整体布局的美观性,使用频率一般。

  与width同时使用,应用两者中比较大的那个。

  语法:min-width:length | percentage(父容器的百分比)| none

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>盒子模型的尺寸样式</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3>min-width最小宽度的设置</h3>
17             <div style="min-width:500px;height:100px;width:350px;">
18                 <b>min-width:500px;width:350px;</b>
19             </div>
20             <div style="min-width:300px;height:100px;">
21 
22             </div>
23             <div style="min-width:300px;height:100px;">
24 
25             </div>
26         </li>
27     </ul>
28 </body>
29 </html>

  当网页在进行缩放时通常会出现网页内容混乱和错位的情况,可以设置min-width来解决这类问题。

 

  max-width 元素的最大宽度,使用频率较低。

  语法:max-width:none | <percentage>(父容器的百分比) | length

  与width一起使用时取最小值来应用。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>盒子模型的尺寸样式</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3>max-width最大宽度的设置</h3>
17             <div style="max-width:500px;height:100px;width:200px;">
18                 <b>max-width:500px;width:200px;</b>
19             </div>
20             <div style="max-width:500px;height:100px;width:900px;">
21                 <b>max-width:500px;width:900px;</b>
22             </div>
23         </li>
24     </ul>
25 </body>
26 </html>

  

  height  元素的高度,使用的频率非常高,绝大部分情况下使用px作为单位。

  语法:height:length(按照指定高度来呈现内容) | percentage(父元素的百分比) | auto(默认为auto,根据内容进行调整)

  对于图片对象来说,设定了此属性后,它的宽度将按照原图的比例进行缩放。

  当内容高度大于设置的高度时,内容将会跑出容器外面去,通常情况下需要使用overflow:hidden把超出容器范围的内容进行隐藏。

  注意:<body>是块级标签,与<div>类似,高度根据内容的变化而变化。

  网页的设计思想:在布局思想中使用*父元素控制整体的高度。

  如果body没有设置高度且其中没有内容而想要设置内部div的高度时,可以给div设置position:absolute(绝对定位),在设置它的width属性,而后可以设定它的height属性值(百分比)改变高度。(根据可视区域的百分比来进行显示)

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>加深对height的理解</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <div style="height:50%;position:absolute;width:300px;">
15         设置子元素为相对位置,指定它的宽度,而后可以根据body的可视区域的大小设置高度(百分比)
16     </div>
17 </body>
18 </html>

 

  min-height与max-height  最小和最大的高度,一般用于整体布局的美观性,常用px作为单位,使用频率较小。

  与min-width和max-width属性类似。

  min-height和height同时使用时,取较大值进行应用。

  max-height和height同时使用时,取较小值进行应用。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>最小和最大高度的示例</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     
15     <div style="min-height:200px;height:100px;">
16         min-height和height同时使用时,取较大值进行应用。
17     </div>
18     <div style="max-height:200px;height:100px;">
19         max-height和height同时使用时,去较小值进行应用。
20     </div>
21 </body>
22 </html>

  min-height和max-height同时设置时,高度选min-height的值进行显示。

代码示例如下:

  

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>最小和最大高度的示例</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     
15     <div style="min-height:20px;max-height:40px;">
16         min-height和max-height同时存在,且前者小于后者,height设置为min-height的值进行显示
17     </div>
18     <div style="height:40px;background-color:pink;">
19         40px;
20     </div>
21     <div style="min-height:60px;max-height:40px;">
22         min-height和max-height同时存在,且前者大于后者,height设置为min-height的值进行显示
23     </div>
24 </body>
25 </html>

运行结果为:

边框样式

  boder  元素的边框的复合属性的设置(包括border-width,border-style,border-color),使用频率较高。

    语法:border:[ border-width ](边框的厚度,多以px为单位,可以分上、右、下、左的顺序给四个边框不同的值) || [ border-style ](边框的样式,none表示没有边框,hidden表示隐藏边框,dotted点状轮廓,dashed虚线轮廓,solid实线边框,最常用,double双线轮廓,groove3D凹槽轮廓,ridge3D凸槽轮廓,inset3D凹边轮廓,outset3D凸边轮廓。如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。) || [ border-color ]

    注意:border只能设置四条边的统一样式,想要给四条边设置不同样式时,需要分别设置border-width、border-style、border-color的属性值。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>边框样式的设置</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8 
 9     </style>
10 </head>
11 <body>
12     <div style="width:300px;height:100px;border-width:2px 3px 3px 5px; border-style:solid solid dashed double;border-color:red pink gray blue;">
13         针对边框的四条边分别进行设置
14     </div>
15     <br/>
16     <div style="width:400px;height:200px;border:2px double red;">
17         对边框的四条边整体进行设置
18     </div>
19 </body>
20 </html>

运行结果如下:

 

  border-radius  圆角的设置(重要!!!!!)

  设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。    

  水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

  如果只提供一个,将用于全部的于四个角。

  如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

  如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

  垂直半径也遵循以上4点。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>边框样式的设置</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8 
 9     </style>
10 </head>
11 <body>
12     <h3>boder-radius 4个圆角的设置:如京东购物车右上角显示的0件物品的图标可以用此属性来实现</h3>
13     <p>
14         <b>line-height:14px;text-align:center;用来设置文本(0)的竖直和水平方向的居中显示</b>
15     </p>
16     <div style="width:16px;height:14px;border-radius:7px 7px 7px 0;border:1px solid red;background-color:red;color:white;line-height:14px;text-align:center;">
17         0 
18     </div>
19     
20     <hr/>
21     <p>
22         <b>给一个值,用到四个角上,下图还可以通过圆角修饰变成一个圆</b>
23     </p>
24     <div style="width:45px;height:45px;background-color:orange;border-radius:5px;">
25         
26     </div>
27     <hr/>
28     <p><b>给四个角不同的值</b></p>
29     <div style="width:60px;height:50px;background-color:pink;border-radius:5px 10px 25px 45px;">
30     
31     </div>
32     <hr />
33     <p><b>给两个值:第一个用于上左、下右;第二个用于上右,下左</b></p>
34     <div style="width:60px;height:50px;background-color:gray;border-radius:10px 45px;">
35 
36     </div>
37     <hr />
38     <p><b>给三个值:第一个用于上左;第二个用于上右,下左;第三个用于下右</b></p>
39     <div style="width:60px;height:50px;background-color:rebeccapurple;border-radius:10px 20px 45px;">
40 
41     </div>
42     <hr />
43     <p><b>给一个值:给定水平和垂直半径</b></p>
44     <div style="width:60px;height:50px;background-color:green;border-radius:10px/20px;">
45 
46     </div>
47     <hr />
48     <p><b>给两个值:分别给定水平和垂直半径</b></p>
49     <div style="width:60px;height:50px;background-color:green;border-radius:10px 35px/20px 30px;">
50 
51     </div>
52 </body>
53 </html>

运行结果如下:

 

padding内边距

  内填充的复合属性设置(复合属性有:padding-top、padding-right、padding-bottom、padding-left),使用频率较高。

  语法:padding:[ <length> | <percentage> ]{1,4}  

    如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

    如果只提供一个,将用于全部的四边。

    如果提供两个,第一个用于上、下,第二个用于左、右。

    如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

  padding-left比较常用。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>内边距的设置</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div,span {
 9             border:2px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3>padding提供一个值</h3>
17             <div style="width:200px;text-align:center;padding:5px;">
18                 (块级标签)提供一个值
19             </div>
20             <hr />
21             <span style="width:200px;text-align:center;padding:5px;">
22                 (行级标签)提供一个值
23             </span>
24         </li>
25         <li>
26             <h3>padding提供两个值:第一个给上下,第二个给左右</h3>
27             <div style="width:200px;text-align:center;padding:5px 15px;">
28                 块级标签 提供两个值
29             </div>
30             <hr />
31             <span style="width:200px;text-align:center;padding:5px 15px;">
32                 行级标签 提供两个值
33             </span>
34         </li>
35         <li>
36             <h3>padding提供三个值:第一个给上,第二个给左右,第三个给下</h3>
37             <div style="width:200px;text-align:center;padding:5px 15px 30px;">
38                 块级标签 提供三个值
39             </div>
40             <hr />
41             <span style="width:200px;text-align:center;padding:5px 15px 30px;">
42                 行级标签 提供三个值
43             </span>
44         </li>
45         <li style="list-style:none;">
46             <br/><br />
47         </li> 
48         <li>
49             <h3>padding提供四个值:第一个给上,第二个给右,第三个给下,第四个给左</h3>
50             <div style="width:200px;text-align:center;padding:5px 15px 30px 10px;">
51                 块级标签 提供四个值
52             </div>
53             <hr />
54             <span style="width:200px;text-align:center;padding:5px 15px 30px 10px;">
55                 行级标签 提供四个值
56             </span>
57         </li>
58     </ul>
59 </body>
60 </html>

 

margin外边距(与padding的学习类似)

  外边距综合属性设置,使用频率较高。

  语法:margin:[ <length> | <percentage> | auto(值被设定为相对边的值,可以设置元素的居中) ]{1,4}

    如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

    如果只提供一个,将用于全部的四边。

    如果提供两个,第一个用于上、下,第二个用于左、右。

    如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

    内联对象(即行级标签)可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级(应用很少)。

    外延边距始终透明。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>外边距的设置</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div,span {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <ul>
15         <li>
16             <h3> 
17                 行级元素的外边距
18             </h3>
19             <span>第一个元素</span>
20             <span style="margin-left:15px;">第二个元素</span>
21             <span>第三个元素</span>
22         </li>
23         <li>
24             <h3>
25                 行级元素的外边距的一个特点:观察第二个元素和第三个元素之间的距离
26             </h3>
27             <span>第一个元素</span>
28             <span style="margin-left:15px;">第二个元素</span><span>第三个元素</span>
29         </li>
30         <li>
31             <h3>
32                 行级元素的外边距的一个特点:观察第二个元素和第三个元素之间的距离
33             </h3>
34             <span>第一个元素</span>
35             <span style="margin-left:15px;margin-right:10px;">第二个元素</span><span>第三个元素</span>
36         </li>
37         <li>
38             <h3>
39                 若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
40             </h3>
41             <span>第一个元素</span>
42             <span style="margin-left:15px;margin-top:30px;display:inline-block;margin-bottom:50px;">第二个元素</span><span>第三个元素</span>
43             <div>底层元素</div>
44         </li>
45     </ul>
46 </body>
47 </html>

运行效果如下:

 

  顶部外边距和底部外边距的取舍问题:取较大的值为最后的外边距显示两元素之间的距离。

示例代码如下:

1 <li>
2             <h3>顶部外边距和底部外边距的取舍问题</h3>
3             <div style="margin-bottom:10px;">
4                 第一层
5             </div>
6             <div style="margin-top:20px;">
7                 第二层
8             </div>
9 </li>

运行结果:

 

属性的综合使用

示例代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>外边距的设置</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         div,span {
 9             border:1px solid red;
10         }
11     </style>
12 </head>
13 <body>
14     <h3>属性的综合使用</h3>
15     <ul style="list-style:none;">
16         <li style="border:1px solid red;display:inline-block;">首页</li>
17         <li style="border:1px solid red;display:inline-block;margin-left:15px;">登录</li>
18         <li style="border:1px solid red;display:inline-block;margin-left:15px;">注册</li>
19         <li style="border:1px solid red;display:inline-block;margin-left:15px;">我的订单</li>
20     </ul>
21 </body>
22 </html>

运行效果:

 

啊太晚了,小例子明天补上

 

补上我的小例子

  京东顶部导航条的实现

代码如下:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title>京东顶部导航条</title>
  6     <meta charset="utf-8" />
  7     <style type="text/css">
  8         body,ul,div{
  9             margin:0px;
 10             padding:0px;
 11         }
 12         ul,li {
 13             padding:0px;
 14             display:inline-block;
 15             list-style:none;
 16         }
 17         a {
 18             text-decoration:none;
 19             color:#C81623;
 20         }
 21         .diCeng {
 22             width:100%;
 23             height:30px;
 24             line-height:30px;
 25             background-color:#F1F1F1;
 26         }
 27         .content {
 28             margin:auto 100px;
 29         }
 30         .right {
 31             float:right;
 32         }
 33         .right-content {
 34             float:left;
 35         }
 36         .i1 {
 37             top: 12px;
 38             right: 8px;
 39             height: 7px;
 40             overflow: hidden;
 41             font: 400 15px/15px consolas;
 42             color: #6A6A6A;
 43         }
 44         .i2 {
 45             font:900 30px/30px 宋体;
 46         }
 47         .jiange {
 48             width: 1px;
 49             height: 12px;
 50             margin-top: 9px;
 51             padding: 0;
 52             background: #ddd;
 53             overflow: hidden;
 54         }
 55     </style>
 56 </head>
 57 <body>
 58     <div class="diCeng">
 59         <div class="content">
 60             <ul class="left">
 61                 <li>
 62                     <i class="i1">送至:</i>
 63                     <select>
 64                         <option>北京</option>
 65                         <option selected="selected">上海</option>
 66                     </select>
 67                 </li>
 68             </ul>
 69             <ul class="right">
 70                 <li>
 71                     <ul class="right-content">
 72                         <li>
 73                             <i class="i1">你好,请登录 <a href="#">免费注册</a></i>
 74                         </li>
 75                         <li class="jiange"></li>
 76                         <li>
 77                             <i class="i1">我的订单</i>
 78                         </li>
 79                         <li class="jiange"></li>
 80                         <li>
 81                             <i class="i1">我的京东</i>
 82                         </li>
 83                         <li class="jiange"></li>
 84                         <li>
 85                             <i class="i1">京东会员</i>
 86                         </li>
 87                         <li class="jiange"></li>
 88                         <li>
 89                             <i class="i1">企业采购</i>
 90                         </li>
 91                         <li class="jiange"></li>
 92                         <li>
 93                             <i class="i1">手机京东</i>
 94                         </li>
 95                         <li class="jiange"></li>
 96                         <li>
 97                             <i class="i1">关注京东</i>
 98                         </li>
 99                         <li class="jiange"></li>
100                         <li>
101                             <i class="i1">客户服务</i>
102                         </li>
103                         <li class="jiange"></li>
104                         <li>
105                             <i class="i1">网站导航</i>
106                         </li>
107                     </ul>
108                 </li>
109             </ul>
110         </div>
111     </div>
112     <div style="background-color:pink;text-align:center;height:600px;line-height:600px;">
113         <h1>Try my best doing this!O(∩_∩)O~</h1>
114     </div>
115 </body>
116 </html>

运行结果:

  我遇到一个问题,就是粉红色区域上边的那一条白边怎么都去不掉,用谷歌浏览器的工具发现是因为<h1>标签的margin-top,于是我把它设置为0后,白色条消失,但是!!!!!but!!!!!我耍流氓的那段文字就!!!不!居!!!中!!!了!!!(同样的情况在下面的例子中不会出现这样的问题)

  求大神指点/(ㄒoㄒ)/~~

 

 

  新浪顶部导航条的实现

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>新浪顶部导航条</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         body, div,h1 {
 9             margin:0px;
10             padding:0px;
11         }
12         i {
13             font-style:normal;
14             font-weight:normal;
15             font-size:12px;
16             display: inline-block;
17             height: 17px;
18             padding: 12px 9px 12px 16px;
19             line-height:16px;
20             color:#4c4c4c;
21             font-family:Microsoft YaHei,微软雅黑,SimSun,宋体;
22         }
23         .diceng {
24             width:100%;
25             height:46px;
26         }
27         .diceng-content {
28             width:100%;
29             height:41px;
30             border-top:3px solid #FF8500;
31             border-bottom:1px solid #edeef0;
32             background-color:#fcfcfc;
33         }
34         .content {
35             height:41px;
36             margin:0 174.5px;
37         }
38         .content-left {
39             width:271.56px;
40             height:43px;
41             /*background-color:gray;*/
42             display:inline-block;
43             line-height:43px;
44             /*float:left;*/
45         }
46         .content-content {
47             height:41px;
48             line-height:41px;
49             display:inline-block;
50         }
51         .content-right {
52             display:inline-block;
53             float:right;
54         }
55     </style>
56 </head>
57 <body>
58     <div class="diceng">
59         <div class="diceng-content">
60             <div class="content">
61                 <div class="content-left">
62                     <div class="content-content">
63                         <i>设为首页</i>
64                     </div>
65                     <div class="content-content">
66                         <i>手机新浪网</i>
67                     </div>
68                     <div class="content-content">
69                         <i>移动客户端</i>
70                     </div>
71                 </div>
72                 <div class="content-right">
73                     <div class="content-content">
74                         <i>登录</i>
75                     </div>
76                     <div class="content-content">
77                         <i>微博</i>
78                     </div>
79                     <div class="content-content">
80                         <i>博客</i>
81                     </div>
82                     <div class="content-content">
83                         <i>邮箱</i>
84                     </div>
85                     <div class="content-content">
86                         <i>网站导航</i>
87                     </div>
88                 </div>
89             </div>
90         </div>
91     </div>
92     <div style="background-color:pink;text-align:center;height:600px;line-height:600px;list-style:none;">
93         <h1>Try my best doing this!O(∩_∩)O~</h1>
94     </div>
95 </body>
96 </html>

运行结果:

分类:

技术点:

相关文章: