Day.01.22 实用盒子案例

作者: 挂树上的骷髅怪 | 来源:发表于2017-01-22 21:00 被阅读21次

Day.01.22 实用盒子案例
Day.01.22 青铜级盒子案例
go 面向对象编程1
案例盒子：互联网人优质案例库
案例：仿京东放大镜
超实用等比盒子
案例盒子的第一份年终总结
Day9:html和css
HRBP工具箱：六个盒子，你会用吗？
三菱PLC编程经典案例，PPT详解非常实用！

<!DOCTYPE html>
<html>
 <head>
 <meta  charset="utf-8">
  <title> 实用盒子经典案例 </title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #div-box1{
            width:400px;
            height:500px;
            border:1px solid red;
            margin:10px 0 0 150px;
        }
        .faceul{
            list-style-type:none;/*去掉li前面的黑点*/
            background-color:pink;
        }
        .faceul img{
            width:80px;
            margin:5px 0 0 10px;
        }
        .faceul li{
            float:left;/*左浮动,为了让li放到一排*/
            border:1px solid blue;
            margin-left:5px;
            margin-top:10px;
            width:100px;
            height:80px;
        }
        .faceul span{
            font-size:small;
            display:block;/*把行内元素转变成块级元素*/
            margin-left:35px;
            margin-top:-5px;
        }
                /*伪类选择器*/
        .faceul a:link{
            color:black;
            text-decoration:none;/*去掉下划线*/
        }
        .faceul a:hover{
            color:blue;
            text-decoration:underline;/*加上下划线*/
        }
    </style>
 </head>
 <body>
    <div id="div-box1">
        <ul class="faceul">
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
            <li>![](图片路径)<span><a href="#">二十五</a></span></li>
        </ul>
    </div>
 </body>
</html>

总结:
1.优酷现在还在用;

QQ截图20170122210127.png