网页布局标签《1》

最新推荐文章于 2024-04-08 19:31:30 发布

Always_Love

最新推荐文章于 2024-04-08 19:31:30 发布

阅读量854

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Always_Love/article/details/102836533

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、标签及指令《1》
颜色：
red
#f00
rgb(255,0,0)
rgba(255,0,0,0.5) 带透明度的色彩值

opacity: 50%;透明度
border-radius:圆角

border-radius：值
值：a 表示四角都为相同的圆角状态
值：a b 表示左上，右下都为a，右上，左下都为b
值：a b c 表示左上为a 右上和左下为b 右下为c
值：a b c d 依次表示左上右上右下左下

值：50% 表示圆或椭圆

cursor: pointer; /鼠标图标成手状/
定位所有的定位和top right bottom left 联和一起起作用
position: relative;
relative 相对定位以默认位置为参考点进行移动，
absolute 绝对定位以最近定位元素为参考点进行移动
fixed 固定定位对话框内固定位置不动
position: inherit;恢复默认，取消父级元素定位，向上找；

定位中水平居中：
position: absolute;
right:0;
left:0;
margin:auto;

盒子模型：

宽：内容宽+border+margin+padding

box-sizing: border-box;固定盒子大小

宽：width+margin (宽＝内容宽+border+padding)

图片格式： gif jpg png webp

overflow:hidden;溢出隐藏

<input type=“text” placeholder=""; 表示input文本框中添加文字

input type=“button” 按钮

input{
outline:none; /去掉表单元素外边框线/
}

body{
font:12px Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif;
}字体切换，微软雅黑

z-index:n;图层变换

clear:both;清除浮动

:first-of-type 第一个同类型对象

:nth-of-type(n) 第n个同类型对象 n=数字 odd（奇数行） even（偶数行）
二、成果
代码：
html部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/commen.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/font/iconfont.css"/>
</head>
<body>
    <!--头部广告-->
<div id="top-adv">
   <div class="top-adv">
        <a href=""><img src="images/top-0.jpg" alt=""/></a>
        <a href="" class="one"><img src="images/top-1.webp" alt=""/></a>
        <a href="" class="one"><img src="images/top-2.webp" alt=""/></a>
        <span class="iconfont icon-guanbi"></span>
    </div>
</div>
<!--头部导航-->
<div id="top">
    <div class="top">
        <div class="top-left fl">
            <span class="iconfont icon-dingwei red"></span>
            <a href="">陕西</a>
            <div>
                <dl>
                    <dd>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="" class="active">陕西</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                        <a href="">钓鱼岛</a>
                        <a href="">上海</a>
                        <a href="">上海</a>
                    </dd>

                        <dt>地区专享版本</dt>
                    <dd> <a href="">中国港澳</a>
                    </dd>
                    <dt>Available Sites</dt>
                    <dd>
                        <a href=""><i class="i1"></i>Global Site</a>
                        <a href=""><i class="i2"></i>Сайт России</a>
                        <a href=""><i class="i3"></i>Situs Indonesia</a>
                        <a href=""><i class="i4"></i>Sitio de España</a>
                        <a href=""><i class="i5"></i>เว็บไซต์ประเทศไทย</a>
                    </dd>
                </dl>

            </div>
        </div>
        <div class="top-right fr">
            <ul>
                <li><a href="">您好，请登录</a>&nbsp;&nbsp;<a href="" class="red">免费注册</a></li>
                <li>|</li>
                <li><a href="">我的订单</a></li>
                <li>|</li>
                <li class="active"><a href="">我的京东</a><span class="iconfont icon-xiangxia"></span>
                    <div class="myjd">
                        <dl>
                            <dd><table>
                                <tr>
                                    <td><a href="">待处理订单</a></td>
                                    <td><a href="">消息</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">返修退换货</a></td>
                                    <td><a href="">我的回答</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">降价商品</a></td>
                                    <td><a href="">我的关注</a></td>
                                </tr>
                                </table>
                            </dd>
                        </dl>
                        <dl>
                            <dd>
                                <table>
                                    <tr>
                                        <td><a href="">我的京豆</a></td>
                                        <td><a href="">我的优惠券</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">我的白条</a></td>
                                        <td><a href="">我的理财</a></td>
                                    </tr>
                                </table>
                            </dd>
                        </dl>
                    </div>
                </li>
                <li>|</li>
                <li><a href="">京东会员</a></li>
                <li>|</li>
                <li class="active"><a href="" class="red">企业采购</a><span class="iconfont icon-xiangxia"></span>
                    <div class="qycg">
                        <dl>
                            <dd>
                                <a href="">企业购</a>
                                <a href="">商用场景管</a>
                                <a href="">工业品</a>
                                <a href="">礼品卡</a>
                            </dd>
                        </dl>
                    </div>
                </li>
                <li>|</li>
                <li class="active"><a href="">客户服务</a><span class="iconfont icon-xiangxia"></span>
                    <div class="khfw">
                        <dl>
                            <dt>客户</dt>
                            <dd><table>
                                <tr>
                                    <td><a href="">帮助中心</a></td>
                                    <td><a href="">售后服务</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">在线客服</a></td>
                                    <td><a href="">意见建议</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">电话客服</a></td>
                                    <td><a href="">客服邮箱</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">金融咨询</a></td>
                                    <td><a href="">全球售客服</a></td>
                                </tr>
                            </table></dd>
                            <dt class="khfw2">商户</dt>
                            <dd><table>
                                <tr>
                                    <td><a href="">合作招商</a></td>
                                    <td><a href="">成长中心</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">商家后台</a></td>
                                    <td><a href="">京麦工作台</a></td>
                                </tr>
                                <tr>
                                    <td><a href="">商家帮助</a></td>
                                    <td><a href="">工作平台</a></td>
                                </tr>
                            </table></dd>
                        </dl>
                    </div>
                </li>
                <li>|</li>
                <li class="active two"><a href="">网站导航</a><span class="iconfont icon-xiangxia"></span>
                    <div class="wzdh">
                        <div>
                            <dl>
                                <dt class="wzdh11">特色主题</dt>
                                <dd class="wzdh1"><table>
                                    <tr>
                                        <td><a href="">新品首发</a></td>
                                        <td><a href="">京东金融</a></td>
                                        <td><a href="">全球售</a></td>
                                        <td><a href="">国际站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">京东会员</a></td>
                                        <td><a href="">京东预售</a></td>
                                        <td><a href="">买什么</a></td>
                                        <td><a href="">俄语站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">装机大师</a></td>
                                        <td><a href="">0元测评</a></td>
                                        <td><a href="">港澳售</a></td>
                                        <td><a href="">优惠券</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">秒杀</a></td>
                                        <td><a href="">闪购</a></td>
                                        <td><a href="">印尼站</a></td>
                                        <td><a href="">京东金融科技</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">陪伴计划</a></td>
                                        <td><a href="">出海招商</a></td>
                                        <td><a href="">拍拍二手</a></td>
                                    </tr>
                                </table></dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt>特色主题</dt>
                                <dd class="wzdh2"><table>
                                    <tr>
                                        <td><a href="">新品首发</a></td>
                                        <td><a href="">京东金融</a></td>
                                        <td><a href="">全球售</a></td>
                                        <td><a href="">国际站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">京东会员</a></td>
                                        <td><a href="">京东预售</a></td>
                                        <td><a href="">买什么</a></td>
                                        <td><a href="">俄语站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">装机大师</a></td>
                                        <td><a href="">0元测评</a></td>
                                        <td><a href="">港澳售</a></td>
                                        <td><a href="">优惠券</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">秒杀</a></td>
                                        <td><a href="">闪购</a></td>
                                        <td><a href="">印尼站</a></td>
                                        <td><a href="">京东金融科技</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">陪伴计划</a></td>
                                        <td><a href="">出海招商</a></td>
                                        <td><a href="">拍拍二手</a></td>
                                    </tr>
                                </table></dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt>特色主题</dt>
                                <dd class="wzdh3"><table>
                                    <tr>
                                        <td><a href="">新品首发</a></td>
                                        <td><a href="">京东金融</a></td>
                                        <td><a href="">全球售</a></td>
                                        <td><a href="">国际站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">京东会员</a></td>
                                        <td><a href="">京东预售</a></td>
                                        <td><a href="">买什么</a></td>
                                        <td><a href="">俄语站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">装机大师</a></td>
                                        <td><a href="">0元测评</a></td>
                                        <td><a href="">港澳售</a></td>
                                        <td><a href="">优惠券</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">秒杀</a></td>
                                        <td><a href="">闪购</a></td>
                                        <td><a href="">印尼站</a></td>
                                        <td><a href="">京东金融科技</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">陪伴计划</a></td>
                                        <td><a href="">出海招商</a></td>
                                        <td><a href="">拍拍二手</a></td>
                                    </tr>
                                </table></dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt>特色主题</dt>
                                <dd class="wzdh4"><table>
                                    <tr>
                                        <td><a href="">新品首发</a></td>
                                        <td><a href="">京东金融</a></td>
                                        <td><a href="">全球售</a></td>
                                        <td><a href="">国际站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">京东会员</a></td>
                                        <td><a href="">京东预售</a></td>
                                        <td><a href="">买什么</a></td>
                                        <td><a href="">俄语站</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">装机大师</a></td>
                                        <td><a href="">0元测评</a></td>
                                        <td><a href="">港澳售</a></td>
                                        <td><a href="">优惠券</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">秒杀</a></td>
                                        <td><a href="">闪购</a></td>
                                        <td><a href="">印尼站</a></td>
                                        <td><a href="">京东金融科技</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="">陪伴计划</a></td>
                                        <td><a href="">出海招商</a></td>
                                        <td><a href="">拍拍二手</a></td>
                                    </tr>
                                </table></dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>|</li>
                <li><a href="">手机京东</a></li>
            </ul>
        </div>
    </div>
</div>
<!--header模块-->
<div id="header">
<div class="header">
    <div class="logo fl">
        <a href=""><img src="images/logo.gif" alt=""/></a>
    </div>
    <div class="search fl">
        <div class="searchbox">
            <form action="">
                <span class="fl">
                    <input type="text" placeholder="行车记录仪"/>
                    <i class="iconfont icon-xiangji"></i>
                    <input type="button"/>
                    <em class="iconfont icon-sousuokuang"></em>
                </span>
            </form>
            <div class="fl">
                <span class="iconfont icon-gouwuche"></span>
                <i>0</i>
                <a href="">我的购物车</a>
            </div>
            <p>
                <a href="" class="red">王者周年庆</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
                <a href="">5折秒杀</a>
            </p>
        </div>
        <div class="nav">
            <a href="" class="red">秒杀</a>
            <a href="" class="red">优惠券</a>
            <a href="">PLUS会员</a>
            <a href="">PLUS会员</a>
            <a href="">PLUS会员</a>
            <a href="">会员</a>
            <a href="">PLUS会员</a>
            <a href="">PLUS会员</a>
            <a href="">PLUS会员</a>
            <a href="">PLUS会员</a>
        </div>

    </div>

    <div class="header-adv fr">
        <a href=""><img src="images/head-right.webp" alt=""/></a>
    </div>
    
</div>
</div>
<!--banner模块-->
<div class="banner">
    <div class="ban-left fl">
        <ul>
            <li><a href="">家用电器</a>
                <div>
                    <dl>
                        <dt class="bann1">
                            <a>家电管></a>
                            <a>专卖店></a>
                            <a>家电服务></a>
                            <a>企业采购></a>
                            <a>商用电器></a>
                            <a>以旧换新></a>
                            <a>商用></a>
                        </dt>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                        <dd>
                            <a href="" class="bann2">冰箱></a>
                            <a href="">多门</a>
                            <a href="">对开门</a>
                            <a href="">双门</a>
                            <a href="">冷柜/冰吧</a>
                            <a href="">酒柜</a>
                            <a href="">吸顶灯</a>
                            <a href="">吊灯</a>
                            <a href="">台灯</a>
                            <a href="">大众</a>
                            <a href="">日产</a>
                            <a href="">丰田</a>
                            <a href="">别克</a>
                        </dd>
                    </dl>
                </div>
            </li>
            <li><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a><div>

            </div></li>
            <li><a href="">电脑</a>/<a href="">办公</a><div></div></li>
            <li><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a><div></div></li>
            <li><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a><div></div></li>
            <li><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a><div></div></li>
            <li><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a><div></div></li>
            <2li><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a><div></div></li>
            <li><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a><div></div></li>
            <li><a href="">母婴</a>/<a href="">玩具乐器</a><div></div></li>
            <li><a href="">食品</a>/<a href="">酒类</a>/<a href="">生鲜</a>/<a href="">特产</a><div></div></li>
            <li><a href="">艺术</a>/<a href="">礼品鲜花</a>/<a href="">农资绿植</a><div></div></li>
            <li><a href="">医药保健</a>/<a href="">计生情趣</a><div></div></li>
            <li><a href="">图书</a>/<a href="">文娱</a>/<a href="">教育</a>/<a href="">电子书</a><div></div></li>
            <li><a href="">机票</a>/<a href="">酒店</a>/<a href="">旅游</a>/<a href="">生活</a><div></div></li>
            <li><a href="">理财</a>/<a href="">众筹</a>/<a href="">白条</a>/<a href="">保险</a><div></div></li>
            <li><a href="">安装</a>/<a href="">维修</a>/<a href="">清洗</a>/<a href="">二手</a><div></div></li>
            <li><a href="">工业品</a><div></div></li>
        </ul>
    </div>
    <div class="ban-main fl">

    </div>
    <div class="ban-right fr">

    </div>
</div>
</body>
</html>

2:css部分

#top-adv{
    height:80px;
    background: rgb(180, 0, 27);
}
.top-adv,.top,.header,.banner{
    width:1190px;
    margin:auto;
}
.top-adv{
    height:80px;
    background: url(../images/top-bg.webp);
    position: relative;
    padding-right: 15px;
    cursor: pointer;
}
.top-adv>a.one{
    float:right;
    margin-top: 15px;
    margin-right: 10px;
}
.top-adv span{
    position: absolute;
    right:0;
    top:5px;
    width:20px;
    height:20px;
    background:rgba(45,45,45,.3);
    color:rgba(255,255,255,.3);
    display: inline-block;
    text-align: center;
    line-height: 20px;
}
/*头部导航*/
#top{
    height:30px;
    background: #e3e4e5;
    border-bottom:solid 1px #ddd;
}
.top{
    height:30px;
    line-height: 30px;
    position: relative;
}
.top-left{
    width:52px;
    height:30px;
    border:solid 1px #e3e4e5;
    position: relative;
}
.top-left:hover,.top-right ul li.active:hover{
    background: #fff;
    border-left-color:#ccc;
    border-right-color:#ccc;
    border-bottom-color:#fff;
}
.top-left>span{
    display: inline-block;
    width:20px;
    height:30px;
    float:left;
}
.top-left>a{
    display:inline-block;
    width:30px;
    height:30px;
    float:left;
    line-height: 30px;
}

.top-left>div{
   display: none;
    width:300px;
    height:420px;
    border:solid 1px #e3e4e5;
    border-top-color:white;
    position: absolute;
    left:0;
    top:29px;
    z-index: 1;
    background: #fff;
}
.top-left:hover>div{
    display: block;
}
.red{
    color:#f10215 !important;
}
.top a{
    color:#999;
}
.top a:hover{
    color:#c81623;
}
.top-right .red:hover{
    opacity: 0.5;
}
.top-right ul li{
    float:left;
    padding:0 5px;
    position: relative;
}
.top-right ul li span{
    font-size: 8px;
    font-weight: bold;
    color:#999;
    margin-left: 3px;

}
.top-right ul li>div{
    display: none;
    position: absolute;
    top:29px;
    border:solid 1px #e3e4e5;
    border-top-color:white;
    background: #fff;
    z-index: 1;
}
.top-right ul li:hover>div{
    display:block;
}
.top-right ul li.active:hover{
    background: #fff;
}
.myjd{
    width:280px;
    height:150px;
    left:0;
}
.qycg{
    width:150px;
    height:70px;
    left:0;
}
.khfw{
    width:170px;
    height:240px;
    right:0;
}
.wzdh{
    width:1190px;
    height:165px;
    left:0;
}
.top-right li.two{
    position: inherit; /*默认的定位值*/
}
/*top二级内容*/
.top-left>div dl{
    padding:20px;
}
.top-left>div dl dt{
    border-top:solid 1px #e3e4e5;
}
.top-left>div dl dd:first-of-type>a{
    width:40px;
    height:20px;
    margin:0 4px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
}
.top-left>div dl dd:first-of-type>a:hover{
    background: #e3e4e5;
}
.top-left dl dd .active{
    color:#fff;
    background: #f10215;
}
.top-left>div dl dt{
    color:#999;
}
.top-left>div dl dd i{
    width:15px;
    height:12px;
    display: inline-block;
    background: #f00;
    margin-right: 5px;
}
.top-left dl dd:nth-of-type(3) a{
    width:128px;
    height:30px;
    display: inline-block;
    float:left;
}
.top-left .i1{
    background:url(../images/areamini.png) no-repeat left top;
}
.top-left .i2{
    background:url(../images/areamini.png) no-repeat -20px top;
}
.top-left .i3{
    background:url(../images/areamini.png) no-repeat -40px top;
}
.top-left .i4{
    background:url(../images/areamini.png) no-repeat left -16px;
}
.top-left .i5{
    background:url(../images/areamini.png) no-repeat -20px -15px;
}
.myjd dl:nth-of-type(1){
    width:280px;
    height:90px;
    display:inline-block;
    float:left;
    padding:0 20px;
    padding-top:10px;
    line-height: 20px;
    border-bottom: solid 1px #dddddd;
}
.myjd dl:nth-of-type(1) dd a{
    margin-right:60px;
}
.myjd dl:nth-of-type(2){
    width:280px;
    height:49px;
    display:inline-block;
    float:left;
    padding:0 20px;
    padding-top:5px;
    line-height: 20px;
}
.myjd dl:nth-of-type(2) dd a{
    margin-right:60px;
}
.qycg dl{
    width:150px;
    height:70px;
    padding-top:10px;
}
.qycg dl dd a{
    line-height: 20px;
    margin:0 10px;
    float:left;
}
.khfw dl:nth-of-type(1){
    width:280px;
    height:120px;
    display:inline-block;
    float:left;
    padding:0 20px;
    padding-top:10px;
    line-height: 20px;
    border-bottom: solid 1px #dddddd;
}
.khfw dl:nth-of-type(1) dd a{
    margin-right:15px;
}
.khfw2{
    padding-top:15px;
}
.wzdh{
    padding:20px;
}
.wzdh dl dt{
    margin-bottom: 5px;
    padding-left:20px;
}
.wzdh dl{
    width:287px;
    height:150px;
    display:inline-block;
    float:left;
    line-height: 20px;
}
.wzdh tr td a{
    margin-right:10px;
}
.wzdh2,.wzdh3,.wzdh4{
    border-left:solid 1px #ddd;
    padding-left:20px;
}
/*header模块*/
#header{
    height:140px;
    background: #fff;
    border-bottom: solid 1px #ddd;
}
.header{
    height:140px;
    padding-top: 10px;
}
.header .logo,.header .header-adv{
    width:190px;
    height:140px;
}
.header .search{
    width:810px;
}
.logo img{
    height:120px;
}
.searchbox{
    height:60px;
    margin-top: 30px;
    margin-left: 50px;
}
.searchbox form>span{
   width:550px;
    height:36px;
    border:solid 2px #e2231a;
    display: inline-block;
    position: relative;
    line-height: 32px;
}
.searchbox>div{
    width:132px;
    height:36px;
    border:solid 1px #eee;
    margin-left: 20px;

}
.searchbox input{
    border:none;
    float:left;
}
.searchbox input[type="text"]{
    width:488px;
    height:32px;
    padding-left:10px ;
}
.searchbox input[type="button"]{
    width:58px;
    height:32px;
    background: #e1251b;
}
.searchbox span i{
    position: absolute;
    right:70px;
    width:20px;
    height:20px;
    color:#9f9f9f;
}
.searchbox span i:hover{
    color:#e1251b;
}
.searchbox span em{
    position: absolute;
    right:19px;
    width:20px;
    height:22px;
    color:#fff;
    font-size: 20px;
}
.searchbox>div{
    color:#e1251b;
    line-height: 34px;
    position: relative;
}
.searchbox>div>span{
    font-weight: bold;
    margin:0 15px 0 20px;
}
.searchbox>div a{
    color:#e1251b;
}
.searchbox>div i{
    background: #e1251b;
    color:#fff;
    display: inline-block;
    padding:0 3px;
    border-radius: 5px;
    line-height: 12px;
    font-style: normal;
    position: absolute;
    left:32px;
    top:2px;
}
.searchbox>p{
    clear:both;
    line-height: 20px;
}
.searchbox>p a{
    color:#999;
    margin-right: 5px;
}
.searchbox>p a:hover{
    color:#e1251b;
 }
.nav{
    height:40px;
    line-height: 40px;
    font-size: 15px;

}
.nav .red{
    font-weight: 700;
}
.nav a{
    color:#333;
    margin-right: 16px;
}
.nav a:hover{
    color:#e1251b;
}
/*banner模块*/
.banner{
    margin-top: 10px;
}
.ban-left,.ban-right{
    width:190px;
    height:470px;
   
}
.ban-main{
    width:790px;
    margin:0 10px;
    height:470px;
    background: pink;
}
.ban-left{
    background: #fff;
    padding:10px 0;
    font-size: 14px;
    position: relative;
}
.ban-left ul li{
    padding-left:20px;
    line-height: 25px;
    color:#333;

}
.ban-left ul li:hover{
    background: #ddd;
}
.ban-left ul li a{
    color:#333;
}
.ban-left ul li a:hover{
    color:#e1251b;
}
.ban-left ul li>div{
    width:800px;
    height:500px;
    position: absolute;
    left:190px;
    top:0;
    display: none;}
.ban-left ul li:hover>div{
    display: block;
    background: #fff;
    border:solid 2px #eee;
}
.bann1{
    height:40px;
    margin-top: 12px;
    width:730px;
    line-height: 24px
}
.bann1 a{
    color:#fff !important;
    font-size: 12px;
    margin-left:15px;
    padding:0 13px;
    display: inline-block;
    height:24px;
    float:left;
    background: #000000;
}
.bann1 a:hover{
    background:#f10215;
    color:#fff !important;
}
.ban-left ul li>div dl dd a{
    font-size: 12px;
    margin-top:30px;
    margin-left:10px;
}
.ban-left ul li>div dl dd{
    margin-left:30px;
}
.bann2{
    font-weight: bold;
}

/*通用样式*/
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font:12px  Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif;
    background: #f4f4f4 url(../images/ban-bg.webp) no-repeat center 250px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
a{
    text-decoration: none;
}
.clear{
    clear:both;
}
ul,li{
    list-style: none;
}
input{
    outline:none; /*去掉表单 元素外边框线*/
}

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1572068884503'); /* IE9 */
  src: url('iconfont.eot?t=1572068884503#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('iconfont.woff?t=1572068884503') format('woff'),
  url('iconfont.ttf?t=1572068884503') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1572068884503#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xiangshang:before {
  content: "\e81b";
}

.icon-xiangxia:before {
  content: "\e81c";
}

.icon-dingwei:before {
  content: "\e60d";
}

.icon-sousuokuang:before {
  content: "\e644";
}

.icon-yanjing:before {
  content: "\e681";
}

.icon-kefu1:before {
  content: "\e60b";
}

.icon-kefu:before {
  content: "\e70c";
}

.icon-bianji:before {
  content: "\e600";
}

.icon-gouwuche:before {
  content: "\e60c";
}

.icon-xiangji:before {
  content: "\e6d3";
}

.icon-guanbi:before {
  content: "\e608";
}

.icon-xiangyou:before {
  content: "\e68b";
}

.icon-address:before {
  content: "\e697";
}

三、总结
在网页布局方面有许多要考虑的问题，如行列块浮动和div大小的定义等等，都需要提前计算和规划好。往后要继续熟悉定位功能的使用，这样会使搭建网页更加得心应手。