码迷,mamicode.com
首页 > Web开发 > 详细

2.web(盒子模型2)

时间:2020-04-21 00:11:08      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:初始化   repeat   href   otto   nbsp   span   image   lis   inf   

一、简单使用fireworks

技术图片

 

                         技术图片

 

二、练习案例

1.   

技术图片

 

 

技术图片技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            margin:0;
            padding:0;
        }/*初始化*/
        ul,li{
            list-style: none;/*去小圆点*/
        }
        ul{
            background-color: #fff;
            height:279px;
            width: 210px;
            margin-left: 10px;
            padding:0 15px; /*这一步把盒子撑大了。把宽度减了30px*/
        }
        li{
            height: 30px;
            border-bottom:1px dashed #666;
            line-height: 30px;
            padding:0 15px;
            background: url("tb.gif") no-repeat left center;
            padding-left: 16px;
        }
        li a{
            text-decoration: none;
        }
       .box{
           width: 260px;
           height:327px;
           border:1px solid #009900;
           margin:10px auto;
           background: url(bg.gif);
       }
       .box .title{
           height:23px;
           margin:10px 0 5px 10px;/*上右下左*/
           border-left:4px solid #C9E143;
           font:16px 微软雅黑;
           color:#fff;
           padding-left: 11px;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">爱宠知识</div>
        <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>
            <li><a href="#">养狗比养猫更健康</a></li>
        </ul>
    </div>
</body>
</html>
View Code

 

2.web(盒子模型2)

标签:初始化   repeat   href   otto   nbsp   span   image   lis   inf   

原文地址:https://www.cnblogs.com/zhaojiayu/p/12741158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!