19-21日作业

2017-01-21 本文已影响0人 xiewhat

问答作业

1.内联元素如何转化为块元素

例：

span{
width:50px;
height:50px;
display:block;  /* 加入这个可以使内联元素转化为块元素 */
}
<span>aaa<span>

2.元素类型有哪些？它们的特征分别是什么？

块元素：
1.没有设置宽度的时候，默认撑满一行
2.默认块元素独占一行
3.支持所有CSS命令

内联元素：
1.宽和高由内容撑开
2.不支持宽和高
3.一行上可以显示继续跟同类的标签
4.不支持上下的margin
5.代码换行被解析

3.清除浮动有哪些方法？你最喜欢那个？为什么？

清除浮动：
1.加高度
2.父级浮动
3.inline-block
4.空标签
5.br清除浮动

.clearfix{*zoom:1;}
.clearfix:after{
content："";
}

7.overflow:scroll|auto|hidden;

我比较喜欢第6种。因为第6种相对于其他方法缺点更少，也是现在主流的清除浮动的方法。

4.什么是BFC?如何才能得到一个BFC

BFC：

标准的浏览器

得到一个BFC：

float值不为none
overflow值不为visible
display的值为table-cell,table-caption,inline-block中的任意一个
position的值不为relative和static
width[height][min-width][min-height]:(!aotu)

5.Position的值有哪些？

position:relative (相对定位)
position:absolute (绝对定位)
position:fixed (固定定位)
position:static (默认值)
position:inherit

6.说一下绝对定位，相对定位和固定定位的区别

position:relative (相对定位)

不影响元素本身的特征
不使元素脱离文档流
如果没有定位偏移，对元素本身没有任何的影响
提升层级

position:absolute (绝对定位)

使元素完全脱离文档流
使内嵌支持宽高
块属性标签撑开宽度
如果有定位父级相对于定位父级发生偏移，没有定位父级相当于document发生偏移
相对定位一般都是配合绝对定位元素使用
提升层级

position:fixed (固定定位)

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位

7.怎么改变一个div的等级，写出代码让DIV1在上DIV2在下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    width:200px;
    height:200px;
    }
    .DIV1{
        background-color:red;
        position:absolute; /* 使用绝对定位 */
        z-index:1;  /* 使DIV1提高一各层次 */
        }
    .DIV2{
        background-color:blue;
        position:absolute;
        }
</style>
</head>

<body>
<div class="box">
    <div class="DIV1"></div>
    <div class="DIV2"></div>
    </div>

</body>
</html>

8.如何实现叠层的DIV1与DIV2，上面DIV1不透明下面DIV2透明？


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    width:200px;
    height:200px;
    }
    .DIV1{
        background-color:red;
        position:absolute;
        z-index:1;
        
        }
    .DIV2{
        background-color:blue;
        position:absolute;
        opacity:0;
        
        }
</style>
</head>

<body>
<div class="box">
    <div class="DIV1"></div>
    <div class="DIV2"></div>
    </div>

</body>
</html>

结果：

`U~BK(L3VB]Q%F27`7V{J96.png

9.合并行属性，合并列属性

合并行属性：

规定单元格可竖跨的行数
<td colspan="/*number*/"> </td>

合并行属性：

规定单元格可横跨的行数
<td rowspan="/*number*/"> </td>

10.让DIV水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    
    color:red;
    font:bold 50px/50px "宋体"; 
    margin:50% auto;  /* 上下是浏览器的50% 左右居中 */
    text-align:center; /* 设置字体居中 */ 
    }

</style>
</head>

<body>
<div>DIV</div>

</body>
</html>

编程作业

test1

第一种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    display:inline-block; /* 块具有块和内联元素的属性 */
    }
</style>
</head>

<body>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>

</body>
</html>

结果图：

Paste_Image.png

第二种方法：position:relative
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div2{
        position:relative; /*相对定位 */
        left:150px;
        top:-100px; 
        }
        .div3{
        position:relative;/*相对定位 */
        left:300px;
        top:-200px; 
        }
</style>
</head>

<body>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>

</body>
</html>

结果图：

![N)7]S8RG_%5A%XM_YLRB5J3.png](https://img.haomeiwen.com/i4363689/41caaa64b4f59378.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

第三种 position:absolute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
    margin:0;  /*由于第一个元素左边离浏览器的边有8像素的空白，所以把body的margin设成0 */
    }
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div2{
        position:absolute;  /*用绝对定位 */
        left:150px;
        top:0px;    
        }
        .div3{
        position:absolute;
        left:300px;
        top:0px;    
        }
        
</style>
</head>

<body>
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>


</body>
</html>

第四种浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
    width:100px;
    height:100px;
    background-color:red;
    color:green;
    }
    .div1{
        float:left;
        }
        .div2{
            float:left;
            margin:0 10px;
            }
    
        .div3{
            float:left;
            }
        
</style>
</head>

<body>

<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="div3">DIV3</div>


</body>
</html>

test2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box{
    width:226px;
    padding:0 20px; /* 框架左右各填充20px; */
    }
.head1{     /* 头部 */
    height:40px;
    background:url(head-1.png) no-repeat 0 20px;
    font: bold 20px/40px "宋体";
    padding:10px 0;
    text-indent:1.5em; /*排行榜这几个字据head130px,所以是1.5em */
    }
    .title1{
        height:35px;
        background:url(title.png);
        position:relative;
        }
        .title-1{
            width:113px;
            text-align:center;
            }
            .title-2{
                position:absolute;
                left:113px;
                top:0px;
            width:113px;
            text-align:center;
            }
        .t1{
            color:black;
            text-decoration:none;
            font:12px/24px "宋体";
            }
        .t2{
            color:black;
            text-decoration:none;
            font:12px/24px "宋体";
            }
    .p1{
        height:160px;
        padding-top:15px;
        

         }
    .a1{
        height:160px;
        background:url(1.png) no-repeat;}
        .b1{
    position: relative; 
    
            }
            .b11{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b12{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }

            
        .p2{
        height:160px;
        padding-top:20px;
        

         }
    .a2{
        height:160px;
        background:url(2.png) no-repeat;
        }
        .b2{
    position: relative; 
    
            }
            .b21{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b22{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
    
    .p3{
        height:160px;
        padding-top:20px;
        

         }
    .a3{
        height:160px;
        background:url(3.png) no-repeat;
        }
        .b3{
    position: relative; 
    
            }
            .b31{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b32{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    .p4{
        height:160px;
        padding-top:20px;
        

         }
    .a4{
        height:160px;
        background:url(4.png) no-repeat;}
        .b4{
    position: relative; 
    
            }
            .b41{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b42{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    
        .p5{
        height:160px;
        padding-top:20px;
        padding-bottom:15px;
        

         }
    .a5{
        height:160px;
        background:url(5.png) no-repeat;}
        .b5{
    position: relative; 
    
            }
            .b51{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b52{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 11px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                   .a6{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b61{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b62{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a7{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b71{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b72{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a8{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b81{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b82{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a9{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b91{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b92{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a10{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b101{
                      width:20px;
                      height:22px;
                      background-color:green;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b102{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
</style>
</head>

<body>

<div class="box">
    <div class="head1">排行榜</div>
    <div class="title1"><div class="title-1"><a href="" class="t1">最热排行</a></div><div class="title-2"><a href="" class="t2">新课上线</a></div></div>
    <div class="p1">
        <div class="a1"></div>
        <div class="b1">
            <div class="b11">1</div>
            <a href="#" class="b12">张小龙：微信四大价值观</a>
                                    
        </div>
    </div>
    
    <div class="p2">
        <div class="a2"></div>
        <div class="b2">
            <div class="b21">2</div>
            <a href="#" class="b22">刘超：互联网新时代需要什么样的UX设计人才 ？</a>
                                    
        </div>
    </div>
    
   <div class="p3">
        <div class="a3"></div>
        <div class="b3">
            <div class="b31">3</div>
            <a href="#" class="b32">马化腾：腾讯将专注于做互联网的连接器</a>
                                    
        </div>
    </div>
<div class="p4">
        <div class="a4"></div>
        <div class="b4">
            <div class="b41">4</div>
            <a href="#" class="b42">IT领袖峰会圆桌会谈：互联网下一个风口在哪儿</a>
                                    
        </div>
    </div>
    
    <div class="p5">
        <div class="a5"></div>
        <div class="b5">
            <div class="b51">5</div>
            <a href="#" class="b52">微信支付对实体商业的价值几何？</a>
                                    
        </div>
    </div>
  <div class="a6">
        <div class="b61">6</div>
      <a href="#" class="b62">张小龙：小程序正式发布，开启移动应用新时代</a>
    </div>
    <div class="a7">
        <div class="b71">7</div>
      <a href="#" class="b72">马化腾：通向互联网未来的七个路标</a>
    </div>
    <div class="a8">
        <div class="b81">8</div>
      <a href="#" class="b82">马化腾：腾讯现在只做两件事</a>
    </div>
    <div class="a9">
        <div class="b91">9</div>
      <a href="#" class="b92">使用UE4制作VR内容的优化</a>
    </div>
    <div class="a10">
        <div class="b101">10</div>
      <a href="#" class="b102">何凌南：谣言在想什么</a>
    </div>
    </div>
</body>
</html>

结果还有许多地方没对，比如链接的字数超过了一行无法显示，

`5@_7ZP74H}%6R)]`132OUW.jpg

像正确图片中多出一行的字变成了点点点。。而我的是去了下一行。

还有图片大小问题比第五张图片没有填满。。并且所有图片没有显示全部的内容。。

那个下面的6，7，8，9，10标号绿色的感觉好麻烦就没弄了。。。

结果图：

![Uploading Paste_Image_500453.png . . .]

Paste_Image.png

看了视频后解决了一些问题。还有一个问题就是字数超出一行的问题没有解决。。
下面是改后的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.box{
    width:226px;
    padding:0 20px; /* 框架左右各填充20px; */
    }
.head1{     /* 头部 */
    height:40px;
    background:url(head-1.png) no-repeat 0 20px;
    font: bold 20px/40px "宋体";
    padding:10px 0;
    text-indent:1.5em; /*排行榜这几个字据head130px,所以是1.5em */
    }
    .title1{
        height:35px;
        background:url(title.png);
        position:relative;
        }
        .title-1{
            width:113px;
            text-align:center;
            }
            .title-2{
                position:absolute;
                left:113px;
                top:0px;
            width:113px;
            text-align:center;
            }
        .t1{
            color:black;
            text-decoration:none;
            font:12px/24px "宋体";
            }
        .t2{
            color:#999;
            text-decoration:none;
            font:12px/24px "宋体";
            }
    .p1{
        height:160px;
        padding-top:15px;
        

         }
    .a1{
        height:160px;
        }
        .b1{
    position: relative; 
    
            }
            .b11{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b12{
                height:26px;
                width:206px;
                position:absolute;
                bottom:0;
                left:20px;
                color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;            
    
}

            
        .p2{
        height:160px;
        padding-top:20px;
        

         }
    .a2{
        height:160px;
        background:url(2.png) no-repeat;
        }
        .b2{
    position: relative; 
    
            }
            .b21{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b22{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
    
    .p3{
        height:160px;
        padding-top:20px;
        

         }
    .a3{
        height:160px;
        background:url(3.png) no-repeat;
        }
        .b3{
    position: relative; 
    
            }
            .b31{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b32{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    .p4{
        height:160px;
        padding-top:20px;
        

         }
    .a4{
        height:160px;
        background:url(4.png) no-repeat;}
        .b4{
    position: relative; 
    
            }
            .b41{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b42{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 12px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                    
        .p5{
        height:160px;
        padding-top:20px;
        padding-bottom:15px;
        

         }
    .a5{
        height:160px;
        background:url(5.png) no-repeat;}
        .b5{
    position: relative; 
    
            }
            .b51{
                height: 26px;
                width:20px;
                position:absolute;
                bottom:0;
                color:white;
                font:bold 12px/24px "宋体";
                background:red;
                text-align:center;
                
                }
                
            .b52{   
                    height:26px;
                    width:206px;
                    position:absolute;
                    left:20px;
                    bottom:0px;
                    color:white;
                    font:bold 11px/24px "宋体";
                    text-indent:1em;
                    background-color:black;
                    text-decoration:none;
                    opacity:0.8;                    }
                   .a6{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b61{
                      width:20px;
                      height:22px;
                      background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b62{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a7{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b71{
                      width:20px;
                      height:22px;                                                background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b72{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a8{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b81{
                      width:20px;
                      height:22px;
                      background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b82{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a9{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b91{
                      width:20px;
                      height:22px;
                       background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b92{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
                     .a10{
                        height:22px;
                        padding-bottom:8px;
                        position:relative;}
                  .b101{
                      width:20px;
                      height:22px;
                       background:url(bg.png) no-repeat ;
                     
                      color:white;
                      font:bold 15px/24px "宋体";
                      text-align:center;
                     
                      }
                .b102{
    height: 22px;
    color: black;
    position: absolute;
    left: 22px;
    bottom: 8px;
    font: bold 12px/24px "宋体";
    text-decoration: none;
    text-indent:1em;
                    }
</style>
</head>

<body>

<div class="box">
    <div class="head1">排行榜</div>
    <div class="title1"><div class="title-1"><a href="" class="t1">最热排行</a></div><div class="title-2"><a href="" class="t2">新课上线</a></div></div>
    <div class="p1">
    
        <div class="a1">![](1.png)</div>
      <div class="b1">
        <div class="b11">1</div>
            
          <a href="#" class="b12">张小龙：微信四大价值观
</a>
                                    
        </div>
    </div>
    
    <div class="p2">
        <div class="a2">![](2.png)</div>
        <div class="b2">
            <div class="b21">2</div>
            <a href="#" class="b22">刘超：互联网新时代需要什么样的UX设计人才 ？</a>
                                    
        </div>
    </div>
    
   <div class="p3">
        <div class="a3">![](3.png)</div>
        <div class="b3">
            <div class="b31">3</div>
            <a href="#" class="b32">马化腾：腾讯将专注于做互联网的连接器</a>
                                    
        </div>
    </div>
<div class="p4">
        <div class="a4">![](4.png)</div>
        <div class="b4">
            <div class="b41">4</div>
            <a href="#" class="b42">IT领袖峰会圆桌会谈：互联网下一个风口在哪儿</a>
                                    
        </div>
    </div>
    
    <div class="p5">
        <div class="a5">![](5.png)</div>
        <div class="b5">
            <div class="b51">5</div>
            <a href="#" class="b52">微信支付对实体商业的价值几何？</a>
                                    
        </div>
    </div>
  <div class="a6">
        <div class="b61">6</div>
      <a href="#" class="b62">张小龙：小程序正式发布，开启移动应用新时代</a>
    </div>
    <div class="a7">
        <div class="b71">7</div>
      <a href="#" class="b72">马化腾：通向互联网未来的七个路标</a>
    </div>
    <div class="a8">
        <div class="b81">8</div>
      <a href="#" class="b82">马化腾：腾讯现在只做两件事</a>
    </div>
    <div class="a9">
        <div class="b91">9</div>
      <a href="#" class="b92">使用UE4制作VR内容的优化</a>
    </div>
    <div class="a10">
        <div class="b101">10</div>
      <a href="#" class="b102">何凌南：谣言在想什么</a>
    </div>
    </div>
</body>
</html>

修改后的结果：

Paste_Image.png

百度云：
链接：http://pan.baidu.com/s/1kUMX7VL 密码：rb0p

19-21日作业

问答作业

1.内联元素如何转化为块元素

2.元素类型有哪些？它们的特征分别是什么？

3.清除浮动有哪些方法？你最喜欢那个？为什么？

4.什么是BFC?如何才能得到一个BFC

BFC：

得到一个BFC：

5.Position的值有哪些？

6.说一下绝对定位，相对定位和固定定位的区别

position:relative (相对定位)

position:absolute (绝对定位)

position:fixed (固定定位)

7.怎么改变一个div的等级，写出代码让DIV1在上DIV2在下

8.如何实现叠层的DIV1与DIV2，上面DIV1不透明下面DIV2透明？

9.合并行属性，合并列属性

合并行属性：

合并行属性：

10.让DIV水平垂直居中

编程作业

test1

test2

猜你喜欢

热点阅读