07_CSS实例

简单滑动门

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .cen{
            height: 100px;
            background: url('img/m.png');
        }
        .left,.cen,.right{
            float: left;
            line-height: 100px;
        }
    </style>
<body>
    <div class="nav">
        <div class="left">![](img/l.png)</div>
        <div class="cen">web大前端欢迎你</div>
        <div class="right">![](img/r.png)</div>
    </div>
</body>
</html>

复杂滑动门

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            padding: 0;
            margin:0;
        }
        ul li{
            float: left;
            list-style: none;
            height: 35px;
        }
        ul li a{
            display: inline-block;
            height: 35px;
            background: url('img/bg_r1_c1.png') no-repeat;
            text-decoration: none;
            padding-left: 7px;
        }
        a span{
            display: inline-block;
            height: 35px;
            background: url('img/bg_r1_c2.png') right;
            padding-right: 21px;
            color: #232323;
            font: 12px/35px 微软雅黑;
        }
        a:hover{
            background: url('img/blue_r1_c1.png') no-repeat;
        }
        a span:hover{
            background: url('img/blue_r1_c2.png') no-repeat right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><span>百度一下</span></a></li>
        <li><a href="#"><span>Google一下</span></a></li>
        <li><a href="#"><span>Web大前端</span></a></li>
    </ul>
</body>
</html>

尚合网首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*css初始化*/
        body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,input{
            margin: 0;
            padding: 0;
            font: 12px simsun;
        }
        img{
            border: 0 none;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0 none;
            outline-style: none;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .clearfix:after{
            content: "";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
        .header{
            width: 980px;
            height: 39px;
            margin: 20px auto 0px;
        }
        .logo{
            /*注释掉这个height试试*/
            height: 39px;
        }
        .search{
            height: 30px;
            border: 1px solid #ECECEC;
        }
        .search input[type="text"]{
            width: 165px;
            height: 30px;
            vertical-align: top;
        }
        .search input[type="button"]{
            width: 30px;
            height: 30px;
            vertical-align: top;
            background: url('img/search2.jpg');

        }
        .nav{
            height: 55px;
            background: url('img/nav_bg.png');
            border: 1px solid #bbb;
        }
        .nav-con{
            width: 980px;
            margin:0 auto;
        }
        .nav-con li{
            float: left;
        }

        .nav-con li a{
            display: inline-block;
            height: 55px;
            font: 700 12px/55px 宋体;
            color: #000;
            padding: 0 30px;
            background: url('img/nav_bg-line.png') no-repeat right;
        }
        .nav-con li a:hover{
            color: #7cb609;
        }
        /*banner部分*/
        .banner{
            width: 980px;
            height: 597px;
            margin: 0 auto;
        }
        .mes{
            height: 32px;
            background: #FBFBFB;
            border: 1px solid #EFEFEF;
            margin-bottom: 15px;
        }
        .mes-con{
            width: 980px;
            margin: 0px auto;
            
        }
        .mes-col-l{
            /*float: left;*/
            line-height: 32px;
        }
        .mes-col-r{
            /*float: right;*/
            height: 16px;
            margin-top: 8px;
        }
        .news{
            width: 980px;
            margin: 15px auto;
        }
        .news-left,.news-cen,.news-right{
            border:1px solid #E4E4E4;
        }
        .news-left{
            width: 310px;
            height: 224px;
            position: relative;
        }
        .news-cen{
            width: 373px;
            height: 224px;
            /*float: left;*/
            margin-left: 11px;
        }
        .news-right{
            width: 268px;
            height: 224px;
            /*float: right;*/
        }
        /*新闻左部*/
        .pro{
            margin-top: 15px;
            margin-left: 6px;
            color: #7AB800;
        }
        .pro img{
            vertical-align: middle;
        }
        .pro-pic{
            position: absolute;
            left: 55px;
            top: 45px;          
        }
        .sj-left{
            position: absolute;
            left: 23px;
            bottom: 90px;
        }
        .sj-right{
            position: absolute;
            right: 23px;
            bottom: 90px;
        }
        /*新闻中部*/
        .news-cen ul{
            margin: 10px 17px 0;
        }
        .news-cen ul li{
            height: 27px;
            line-height: 27px;
            border-bottom: 1px dashed #DCDCDC;
        }
        .news-cen ul li a{
            color: #000;
        }
        .news-cen ul li a.sorry{
            color: #ff0000;
            font-weight: 700;
        }
        /*新闻右边*/
        .tec{
            margin: 10px 0 30px 28px;
        }
        .tec li{
            margin-bottom: 10px;
            border-left: 3px solid #7AB800;
            padding-left: 5px;
            height: 12px;
        }
        .news-right p{
            margin-left: 28px;
            line-height: 18px;
        }
        .footer{
            height: 280px;
            background-color: #2D2D2D;
            border-bottom: 1px dashed #414141;
        }
        .footer-con{
            width: 980px;
            margin: 0 auto;
        }
        .footer-con dl{
            float: left;
            margin-top:20px;
            margin-right: 20px;
        }
        .footer-con dl dt{
            color: #ccc;
            font:14px/14px "microsoft yahei";
        }
        .footer-con dl dd{
            color: #707070;
            margin-top: 10px;
            font:14px/14px "microsoft yahei";
        }
        .copyright{
            height: 54px;
            background-color: #2D2D2D;
            text-align: center;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <!-- .header>.logo>img[src="img/logo.jpg"]+^.search>input[type="text"]+input[type="button"] -->
    <!-- 头部开始 -->
    <div class="header">
        <div class="logo fl">![](img/logo.jpg)</div>
        <div class="search fr"><input type="text" placeholder="请输入..."><input type="button"></div>
    </div>
    <div class="nav">
        <div class="nav-con">
            <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>
            </ul>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- banner部分的广告开始 -->
    <div class="banner">
        ![](img/banner.jpg)
    </div>
    <div class="mes">
        <div class="mes-con">
            <div class="mes-col-l fl">
                最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网
            </div>
            <div class="mes-col-r fr">
                ![](img/zone.png)
                ![](img/weibo.png)
                ![](img/xinlang.png)
                ![](img/renren.png)
            </div>
        </div>
    </div>
    <!-- 信息部分开始 -->
    <div class="news clearfix">
        <div class="new-con">
            <!-- 新闻左边盒子 -->
            <div class="news-left fl">
                <div class="pro">
                    ![](img/o.jpg)
                    新品发布
                </div>
                <div class="pro-pic">![](img/home_hot_01.png)</div>
                <div class="sj-left">![](img/left.png)</div>
                <div class="sj-right">![](img/right.png)</div>
            </div>
            <!-- 新闻中间盒子 -->
            <div class="news-cen fl">
                <div class="pro">
                    ![](img/o.jpg)
                    新闻中心
                </div>
                <ul>
                    <li><a href="#" class="sorry">致歉公告</a></li>
                    <li><a href="#">首批尚合Aonet已全部售馨!</a></li>
                    <li><a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a></li>
                    <li><a href="#">尚合Aone智能手机入网证已经获工信部门审批下发</a></li>
                    <li><a href="#">我司通过ISO9001:2008国际质量管理体系认证</a></li>
                    <li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>
                </ul>
            </div>
            <!-- 新闻右边盒子 -->
            <div class="news-right fr">
                <div class="pro">
                    ![](img/o.jpg)
                    技术与支持
                </div>
                <ul class="tec">
                    <li>售后服务</li>
                    <li>投诉与建议</li>
                    <li>联保网点</li>
                    <li>常见问题FAQ</li>
                </ul>
                <p>深圳市汇聚众合科技发展有限公司<br/>服务热线：400-633-7922</p>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-con">
            <dl>
                <dt>尚合首页</dt>
                <dd>返回首页</dd>
            </dl>
            <dl>
                <dt>尚合首页</dt>
                <dd>返回首页</dd>
            </dl>
            <dl>
                <dt>尚合首页</dt>
                <dd>返回首页</dd>
            </dl>
            <dl>
                <dt>尚合首页</dt>
                <dd>返回首页</dd>
            </dl>
        </div>
    </div>
    <div class="copyright">
        深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市<br/>会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司
    </div>
</body>
</html>

尚合网首页

微信滑动门

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,ul,li{
            padding: 0;
            margin: 0;

        }
        .nav{
            height: 74px;
            background: url("img/weixin_bg1d20af.jpg");
        }
        .nav-con{
            width: 600px;
            margin: 0 auto;
        }
        .nav-con li{
            list-style: none;
            float: left;
            line-height: 74px;
            margin-right: 45px;
        }
        .nav-con li a{
            display: inline-block;
            text-decoration: none;
            color: #fff;
            height: 33px;
            line-height: 33px;
            background:url("img/bg.png") no-repeat 0 -144px;
            padding-left: 17px;
        }
        .nav-con li a span{
            display: inline-block;
            height: 33px;
            /*width: 17px;*/
            background: url("img/bg.png") no-repeat right -144px;
            padding-right: 17px;
        }
        .nav-con li a:hover{
            background:url("img/bg.png") no-repeat 0 -192px;
        }
        .nav-con li a span:hover{
            background: url("img/bg.png") no-repeat right -192px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-con">
            <ul>
                <li><a href="#"><span>首页</span></a></li>
                <li><a href="#"><span>下载应用</span></a></li>
                <li><a href="#"><span>今夜我知你心你讲我听</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

梅兰商城
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="w top-nav-con">
            <div class="l-t-con">您好，欢迎来到素材网</div>
            <div class="r-t-con">
                <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>
                </ul>
            </div>
        </div>
    </div>
    <!-- logo和搜索框 -->
    <div class="w logo-search clearfix">
        <div class="logo fl">
            ![](img/1.png)
        </div>
        <div class="search fr">
            <input type="text" value="请输入关键字">
            <input type="button" value="">
        </div>
    </div>
    <!-- 主导航开始 -->
    <div class="w nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">建筑材料</a></li>
            <li><a href="#">儿童安全座椅</a></li>
            <li><a href="#">工艺美术品</a></li>
        </ul>
    </div>
    <!-- 商机市场 -->
    <div class="w market">
        <div class="mar-left fl">
            <div class="mar-title">商机市场</div>
            <div class="mar-list">
                <ul>
                    <li class="icon1"><a href="#">建筑材料</a></li>
                    <li class="icon2"><a href="#">儿童安全座椅</a></li>
                    <li class="icon3"><a href="#">工艺美术品</a></li>
                    <li class="icon4"><a href="#">建筑材料</a></li>
                    <li class="icon5"><a href="#">儿童安全座椅</a></li>
                    <li class="icon6"><a href="#">工艺美术品</a></li>
                </ul>
            </div>
        </div>
        <div class="mer-cen fl">
            ![](img/center.png)
        </div>
        <div class="mar-right fr">
            <div class="mar-r-pic">![](img/center-r.png)</div>
            <div class="mar-r-pic">![](img/center-r2.png)</div>
        </div>
    </div>
    <!-- 建筑材料 -->
    <div class="building-title">
        建筑材料
    </div>
    <div class="w building">
        <!-- 左边 -->
        <div class="build-left fl">
            <!-- 左边上面 -->
            <div class="buid-left-t">
                <!-- 顶部左边的商品 -->
                <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                <!-- 顶部右边的商品 -->
                <div class="merchandise fr">
                    <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                </div>
            </div>
            <!-- 左边的中间分隔线 -->
            <div class="build-left-line"></div>
            <!-- 左边下面 -->
            <div class="buid-left-b">
                <!-- 底部左边的商品 -->
                <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                <!-- 底部右边的商品 -->
                <div class="merchandise fr">
                    <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="build-right fr">
            <div class="build-title">建材资讯</div>
            <ul>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
            </ul>
        </div>
    </div>
    <!-- 儿童安全座椅 -->
    <div class="building-title">
        儿童安全座椅
    </div>
    <div class="w child">
        <div class="child-left fl">
            <div class="child-title">
                <h3><a href="#">详情请点击>></a></h3>
            </div>
            <div class="child-items clearfix">
                <div class="child-item fl">
                    ![](img/et01.png)
                    <p class="one">英国百代适-至尊者（带ISOFIX）奔驰宝马专用</p>
                    <p class="two">适合年龄9个月-4岁</p>
                    <p class="three">市场价：<del>¥5580</del></p>
                    <p class="four">直销价: <span>¥3380</span></p>
                </div>
                <div class="child-item fl">
                    ![](img/et01.png)
                    <p class="one">英国百代适-至尊者（带ISOFIX）奔驰宝马专用</p>
                    <p class="two">适合年龄9个月-4岁</p>
                    <p class="three">市场价：<del>¥5580</del></p>
                    <p class="four">直销价: <span>¥3380</span></p>
                </div>
                <div class="child-item fl">
                    ![](img/et01.png)
                    <p class="one">英国百代适-至尊者（带ISOFIX）奔驰宝马专用</p>
                    <p class="two">适合年龄9个月-4岁</p>
                    <p class="three">市场价：<del>¥5580</del></p>
                    <p class="four">直销价: <span>¥3380</span></p>
                </div>
                <div class="child-item fl">
                    ![](img/et01.png)
                    <p class="one">英国百代适-至尊者（带ISOFIX）奔驰宝马专用</p>
                    <p class="two">适合年龄9个月-4岁</p>
                    <p class="three">市场价：<del>¥5580</del></p>
                    <p class="four">直销价: <span>¥3380</span></p>
                </div>
            </div>
        </div>
        <div class="child-right fr">
            ![](img/et_right.png)
            ![](img/et_right_bottom.png)
        </div>
    </div>
    <!-- 工艺艺术品 -->
    <div class="building-title">
        工艺艺术品
    </div>
    <div class="w building">
        <!-- 左边 -->
        <div class="build-left fl">
            <!-- 左边上面 -->
            <div class="buid-left-t">
                <!-- 顶部左边的商品 -->
                <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                <!-- 顶部右边的商品 -->
                <div class="merchandise fr">
                    <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                </div>
            </div>
            <!-- 左边的中间分隔线 -->
            <div class="build-left-line"></div>
            <!-- 左边下面 -->
            <div class="buid-left-b">
                <!-- 底部左边的商品 -->
                <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                <!-- 底部右边的商品 -->
                <div class="merchandise fr">
                    <div class="merchandise fl">
                    <!-- 商品的左边 -->
                    <div class="merchandise-ll fl">
                        <!-- 左边包括商品图片和立即购买按钮 -->
                        <div class="merchandise-pic">
                            ![](img/c1.png)
                        </div>
                        <div class="merchandise-buy">
                            <input type="button">
                        </div>
                    </div>
                    <!-- 商品的右边 -->
                    <div class="merchandise-rr fl">
                        <!-- 商品的右边有商品详情、价格 -->
                        <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
                        <p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
                        <p class="three"><span>239.00</span> <del>¥386.00</del></p>
                        <p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="build-right fr">
            <div class="build-title">建材商社</div>
            <div class="light-subtitle">
                ![](img/subtitle.png)在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关
            </div>
            <ul>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
                <li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
            </ul>
        </div>
    </div>
    <div class="w friendlinks">
        <div class="friendlink">友情链接：</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>
            <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>
            <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>
            <li><a href="#">爱加盟网</a></li>
        </ul>
    </div>
    <div class="copyright">
        <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>
            <li><a href="#">关于我们</a></li>
        </ul>
        <p>中国建网 版权所有 2000-20012 服务热线：0571-98899898 请与我们联系：server@163.com</p>
        <p>建材网会员互动群：12312313213本网实名:中建网</p>
    </div>
</body>
</html>

css/index.css

/*css初始化*/
body,input,div,p,span,ul,li,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
    font: 12px 宋体;
}
img , input{
    border: 0 none;
}
input{
    outline-style: none;
}
a{
    color: #000;
    text-decoration: none;
}
ul,li{
    list-style: none;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
/*清除浮动*/
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix{
    zoom:1;
}
/*版心*/
.w{
    width: 970px;
    margin: 0 auto;
}
/*顶部导航*/
.top-nav{
    height: 26px;
    background-color: #F7F7F7;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
}

.top-nav-con{
    height: 26px;
    /*background-color: pink;*/
}
.l-t-con{
    float: left;
    line-height: 26px;
}
.r-t-con{
    float: right;
}

.r-t-con li{
    float: left;
    background: url("../img/sj.png") no-repeat right center;
    line-height: 26px;
}
.r-t-con li a{
    display: inline-block;
    height: 26px;
    padding: 0 10px;
}

/*logo和搜索框*/
.logo-search{
    margin-top: 12px;
}
.logo{
    width: 200px;
    height: 84px;
}
.search{
    width: 528px;
    height: 40px;
    border: 1px solid #C9C9C9;
    background-color: #F5F5F5;
    margin-top: 30px;
}
.search input[type="text"]{
    width: 420px;
    height: 30px;
    border: 1px solid #A6A6A6;
    margin: 4px 0 0 4px;
    float: left;
}
.search input[type="button"]{
    width: 99px;
    height: 32px;
    background: url("../img/search.png");
    float: left;
    margin-top:4px;
}

/*主导航*/
.nav{
    height: 25px;
    margin-top: 12px;
    border-bottom: 2px solid #0266A2;
}
.nav li{
    float: left;
}
.nav li a{
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 12px;
    color: #2F6CAD;
}
.nav li a:hover{
    background-color: #2F6CAD;
    color: #FFF;
}


/*商机市场*/
.market{
    height: 220px;
}
.mar-left{
    width: 200px;
    height: 210px;
    background-color: #EBF0F6;
    margin-top: 10px;
}
.mar-title{
    height: 30px;
    background-color: #0266A2;
    color: #fff;
    line-height: 30px;
    padding-left: 20px;
}
.mar-list ul{
    margin: 6px 0;
}
.mar-list li{
    height: 28px;
    line-height: 28px;
    padding-left: 40px;
}
.icon1{
    background:url("../img/icon_1.png") no-repeat 9px;
}
.icon2{
    background:url("../img/icon_2.png") no-repeat 9px;
}
.icon3{
    background:url("../img/icon_3.png") no-repeat 9px;
}
.icon4{
    background:url("../img/icon_4.png") no-repeat 9px;
}
.icon5{
    background:url("../img/icon_5.png") no-repeat 9px;
}
.icon6{
    background:url("../img/icon_6.png") no-repeat 9px;
}
.mar-r-pic{
    width: 229px;
    height: 95px;
    border-right: 1px solid #DFE6F0;
    margin-top: 12px;

}
/*建筑材料*/
.building-title{
    width: 948px;
    height: 34px;
    background-color: #EBF0F6;
    border-top: 2px solid #C3D6E4;
    margin: 14px auto 10px;
    padding-left: 22px;
    font: 600 12px/32px "宋体";
}
.building{
    height: 344px;
}
.build-left{
    width: 727px;
    height: 344px;
    border:1px solid #aaa;
}
.build-right{
    width: 228px;
    height: 344px;
    border:1px solid #aaa;
}
.buid-left-t{
    width: 656px;
    height: 142px;
    margin:15px 0px 14px 26px;
    /*background-color: pink;*/
}
.buid-left-b{
    width: 656px;
    height: 142px;
    margin:0 0px 14px 26px;
    /*background-color: pink;*/
}
.build-left-line{
    border-top: 1px solid #eee;
    margin:15px 5px;
}

.merchandise{
    width: 318px;
    height: 142px;
    /*background-color: red;*/

}

.merchandise-ll{
    width: 97px;
    height: 142px;
    /*background-color: yellow;*/
}
.merchandise-pic{
    width: 97px;
    height: 63px;
    text-align: center;
    border: 1px solid #CACACA;
    padding:19px 0 18px 0;
    margin-bottom: 15px;
}
.merchandise-buy input{
    width: 99px;
    height: 26px;
    background:url("../img/buy.png");
}
.merchandise-rr{
    width: 210px;
    height: 142px;
    margin-left: 11px;
    /*background-color: pink;*/
}
.merchandise-rr p{
    font-size: 14px;
}
.merchandise-rr p.one{
    height: 38px;
    line-height: 38px;
}
.merchandise-rr p.two{
    height: 45px;
}
.merchandise-rr p.three{
    height: 41px;
}
.merchandise-rr del{
    font-size: 12px;
}
.merchandise-rr span{
    color: red;
    font-weight: 700;
}
.build-right{
    border: 1px solid #DFE6F0;
}
.build-title{
    background-color: #FBFBFB;
    height: 28px;
    line-height: 28px;
    border-bottom: 1px solid #DFE6F0;
    padding-left:15px;
}
.build-right ul{
    margin-top:11px;
}
.build-right li{
    background: url("../img/li_bg.png") no-repeat 10px center;
    padding-left: 25px;
    height: 24px;
    line-height: 24px;
}
.build-right li a:hover{
    text-decoration: underline;
    color: red;
}
.child{
    width: 970px;
    height: 330px;
    /*border: 1px solid #ccc;*/
}
.child-left{
    width: 722px;
    height: 330px;
}
.child-title{
    height: 25px;
    background: url("../img/et.png") no-repeat;
    /*background-color: pink;*/
    border-bottom: 2px solid #01B0E7;
}
.child-title h3{
    width: 100px;
    margin-left: auto;
    text-align: right;
    line-height: 25px;
    font: 700 14px/25px "宋体";
}
.child-title a{
    color: #00B0EA;
}
.child-items{
    border-left: 1px solid #CACACA;
    border-bottom: 1px solid #CACACA;
    border-right: 1px solid #CACACA;
}
.child-item{
    width: 164px;
    margin:5px 0 0 13px;
}
.child-item p{
    text-align: center;
}
.child-item p.one{
    height: 43px;
    margin-top: 9px;
}
.child-item p.two,.child-item p.three{
    color: #999;
    height: 24px;
}
.child-item p del,.child-item p span{
    color: #990000;
}
.child-item p.four{
    height: 24px;
}
.child-right{
    width: 218px;
}
.child-right-pic{
    border: 1px solid #CBCBCB;
    margin: 10px -2px; 0 0;
}

.light-subtitle{
    margin: 14px 10px 10px;
    height: 75px;
    color: #999;
}
.light-subtitle img{
    float: left;
    margin-right: 7px;
}

.friendlinks{
    height: 100px;
    border-top: 1px solid #CACACA;
    border-bottom: 3px solid #0A7EC3;
    margin-top:10px;
}
.friendlinks .friendlink,.friendlinks ul{
    height: 38px;
}
.friendlinks .friendlink,.friendlinks ul{
    margin-top: 31px;
}
.friendlinks .friendlink,.friendlinks li{
    float: left;
}
.friendlinks li{
    margin-bottom: 14px;
    padding: 0 4px;
}
.friendlinks li a:hover{
    color: red;
    text-decoration: underline;
}
.copyright ul{
    width: 700px;
    height: 14px;
    margin: 15px auto 13px;
}
.copyright ul li{
    float: left;
    height: 14px;
    padding: 0 10px;
    background: url("../img/footer_bg.png") no-repeat right;
}
.copyright {
    text-align: center;
}
.copyright p{
    height: 30px;
    line-height: 30px;
}

梅兰商城首页

最后编辑于：2017.12.07 14:22:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,530评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,403评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,120评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,770评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,758评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,649评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,021评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,675评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,931评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,751评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,410评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,004评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,969评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,042评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,493评论 2赞 343

07_CSS实例

推荐阅读更多精彩内容