基于HTML+CSS编写京东的静态主页（代码+笔记）

源码资源链接：

https://download.csdn.net/download/cindy647/10535906

步骤：

1.截图，要一个效果图

2.搭建项目环境，结构样式行为分离

3.引入图片和图标，存储

4.划分结构布局

笔记：

模拟鼠标

cursor:pointer; 鼠标变成小手

cursor:move; 鼠标变成四角箭头

cursor:text; 鼠标变成工形插入条光标

cursor:default; 鼠标变成小白

圆角矩形

border-radius: 宽/高一半；

border-radius:50%；

border-radius: 0.3em；

border-radius: 3px3px 8px 4px;

左上角右上角右下角左下

层级

简单概述：谁高。

使用：

一、必须有定位。（除去static）

二、用z-index来控制层级数。

层级问题（谁高）

总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。

定位高于浮动，浮动高于标准流。（高低和占不占位置无关）

（除去static之外）。

用法：1、必须有定位。（除去static之外）。

2、给定z-index的值为层级的值。（不给默认为0）

（层级为0的盒子，也比标准流和浮动高。）

（层级为负数的盒子，比标准流和浮动低。）

（层级不取小数）

（层级一样，后面的盒子比前面的层级高。）

（浮动或者标准流的盒子，后面的盒子比前面的层级高。）

定位中：abso lute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。

什么时候用margin和padding（不考虑宽高）

1.需要使用背景图的时候必须用padding。

2.会出现外边距合并或者margin塌陷的时候用padding。

3.行内元素上下只能设置padding，不能设置margin。（行内高16px）

4.看border，如果是a连接，看能不能让字体变色，或者显示小手。

5.看需求。

隐藏盒子问题

1.overflow：hidden; 隐藏盒子超出的部分。

2.display: none; 隐藏盒子，而且不占位置。(用的最多)

3.visibility: hidden; 隐藏盒子，而且占位置。

4.opacity: 0; 隐藏盒子，而且占位置。

Position/top/left/...-999px隐藏盒子，而且占位置

半透明

opacity：0.4；优点方便。缺点：里面的内容也会半透明。

C3的技术来解决半透明：

background: rgba(0,0,0,0.3);

background: rgba(0,0,0, .3);

代码：（很长，自留笔记而已，可以略过）

HTML部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <link rel="stylesheet" href="css/bass.css"/>
    <link rel="stylesheet" href="css/global.css"/>
    <link rel="icon" href="favicon.ico"/>
</head>
<body>
<!--nav导航部分开始-->
    <div class="site-nav">
        <div class="w">
            <div class="fl">
               <div class="site-nav-send"> 送至：北京
                   <i><s>◇</s></i>
               </div>
                <div class="site-nav-city">
                </div>
            </div>
            <div class="fr site-nav-r">
                <ul>
                    <li><a href="#">你好，请登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li class="line"></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="line"></li>
                    <li class="fore">
                        <a href="#">我的京东</a>
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li><a href="#">京东会员</a></li>
                    <li class="line"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="line"></li>
                    <li class="fore jd-tel">
                        <span></span>
                        <a href="#">手机京东</a>
                        <i><s>◇</s></i></li>
                    <li class="line"></li>
                    <li class="fore">
                        关注京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">
                        客服服务
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">
                        网站导航
                        <i><s>◇</s></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<!--nav导航部分结束-->
<!--banner部分开始-->
<div class="topbanner">
    <div class="w tb">
        <a href="#">
            <img src="images/top-banner.jpg">
        </a>
        <a href="#" class="close-banner"></a>
    </div>
</div>
<!--banner部分结束-->
<!--search部分开始-->
<div class="w clearfix">
    <div class="search-logo">
        <a href="#" title="jingdong" target="_self">京东官网</a>
    </div>
    <div class="search-input">
        <input type="text" value="运动相机"/>
        <button>搜索</button>
    </div>
    <div class="search-car">
        <a href="#">我的购物车</a>
        <i class="icon1"></i>
        <i class="icon2">&gt;</i>
        <i class="icon3">8</i>

    </div>
    <div class="search-morealink">
        <ul class="fl">
            <li><a href="#" class="col-red">出境999</a></li>
            <li><a href="#">沸腾出费</a></li>
            <li><a href="#">249见100</a></li>
            <li><a href="#">手机节</a></li>
            <li><a href="#">每150减30</a></li>
            <li><a href="#">到了日后</a></li>
            <li><a href="#">cool手机</a></li>
            <li><a href="#">都尅管口</a></li>
            <li><a href="#">第六感</a></li>
        </ul>
    </div>
</div>
<!--search部分结束-->

<!--shortcut-nav部分开始-->
<div class="shortcut-nav w">
    <div class="w">
        <div class="shortcut-nav-menu">
            <div class="shortcut-nav-menu-all">
                <a href="#">全部商品分类</a>
            </div>
            <div class="shortcut-nav-menu-one">
                <div>
                    <h3>
                        <a href="#">家用电器</a>
                    </h3>
                    <i>></i>
                </div>
                <div>
                    <h3>
                        <a href="#">电脑办公</a>
                    </h3>
                    <i>></i>
                </div>
                <div>
                    <h3>
                        <a href="#">童装专场</a>
                    </h3>
                    <i>></i>
                </div>
                <div>
                    <h3>
                        <a href="#">手机数码</a>
                    </h3>
                    <i>></i>
                </div>
                <div>
                    <h3>
                        <a href="#">古风服饰</a>
                    </h3>
                    <i>></i>
                </div>
            </div>
        </div>
        <div class="shortcut-nav-items">
            <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>
        <div class="shortcut-nav-img">
            <a href="#">
                <img src="images/img2.jpg" alt=""/>
            </a>
        </div>
    </div>
</div>
<!--shortcut-nav部分结束-->
<!--sub-banner部分开始-->
<div class="sub-banner">
    <a href="#"></a>
</div>
<!--sub-banner部分结束-->
<!--main部分开始-->
<div class="w clearfix main">
    <div class="main-slider fl">
        <a href="#">
            <img src="images/slider.jpg"/>
        </a>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <i class="i-left">></i>
        <i class="i-right"><</i>
    </div>
    <div class="main-news fr">
        <div class="main-news-top">
            <dl>
                <dt><i>京东快报</i><a>更多></a></dt>
                <dd>【转告】京东自营正式上线</dd>
                <dd>【转告】京东自营正式上线</dd>
                <dd>【转告】京东自营正式上线</dd>
                <dd>【转告】京东自营正式上线</dd>
                <dd>【转告】京东自营正式上线</dd>
            </dl>
        </div>
        <div class="main-news-cen">
            <div>
                <div class="fig"><img class="img1" src="images/fly.png"/></div>
                <a href="#">话费</a>
            </div>
            <div>
                <div class="fig"><img class="img2" src="images/fly.png"/></div>
                <a href="#">机票</a>
            </div>
            <div>
                <div class="fig"><img class="img1" src="images/fly.png"/></div>
                <a href="#">话费</a>
            </div>
            <div class="div-last">
                <div class="fig"><img class="img2" src="images/fly.png"/></div>
                <a href="#">机票</a>
            </div>
        </div>
        <a href="#">
            <img src="images/img2.jpg" alt=""/>
        </a>
    </div>
</div>
<!--main部分结束-->

<!--today部分开始-->
<div class="w today clearfix">
    <div class="today-left">
        <a href="#"></a>
    </div>
    <div class="today-right">
        <ul>
            <li><a href="#"><img src="images/pic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/pic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/pic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/pic5.jpg" alt=""/></a></li>
        </ul>
        <i class="i-left">></i>
        <i class="i-right"><</i>
    </div>
</div>
<!--today部分结束-->

<!--footer部分开始-->
<div class="footer">
    <div class="footer-top">
        <div class="footer-top-slogen">
            <span class="footer-top-slogen-icon footer-top-slogen-icon1"><img src="images/slogan1.png" alt=""/></span>
            <span class="footer-top-slogen-icon footer-top-slogen-icon2"><img src="images/slogan2.png" alt=""/></span>
            <span class="footer-top-slogen-icon footer-top-slogen-icon3"><img src="images/slogan3.png" alt=""/></span>
            <span class="footer-top-slogen-icon footer-top-slogen-icon4"><img src="images/slogan4.png" alt=""/></span>
        </div>
        <div class="w clearfix">
        <div class="footer-top-shopping">
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">巅峰会是</a></dd>
                <dd><a href="">邓福如广</a></dd>
                <dd><a href="">的他是的</a></dd>
                <dd><a href="">等任何的</a></dd>
                <dd><a href="">地方纷纷</a></dd>
                <dd><a href="">大风天的</a></dd>
            </dl>
        </div>
        <div class="footer-top-shopping">
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">巅峰会是</a></dd>
                <dd><a href="">邓福如广</a></dd>
                <dd><a href="">的他是的</a></dd>
                <dd><a href="">等任何的</a></dd>
                <dd><a href="">地方纷纷</a></dd>
                <dd><a href="">大风天的</a></dd>
            </dl>
        </div>
        <div class="footer-top-shopping">
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">巅峰会是</a></dd>
                <dd><a href="">邓福如广</a></dd>
                <dd><a href="">的他是的</a></dd>
                <dd><a href="">等任何的</a></dd>
                <dd><a href="">地方纷纷</a></dd>
                <dd><a href="">大风天的</a></dd>
            </dl>
        </div>
        <div class="footer-top-shopping">
            <dl>
                <dt><a href="">购物指南</a></dt>
                <dd><a href="">巅峰会是</a></dd>
                <dd><a href="">邓福如广</a></dd>
                <dd><a href="">的他是的</a></dd>
                <dd><a href="">等任何的</a></dd>
                <dd><a href="">地方纷纷</a></dd>
                <dd><a href="">大风天的</a></dd>
            </dl>
        </div>
        <div class="footer-top-shopping">
            <dl class="last-dl">
                <dt><a href="#">购物指南</a></dt>
                <dd><a href="#">巅峰会是</a></dd>
                <dd><a href="#">邓福如广</a></dd>
                <dd><a href="#">的他是的</a></dd>
                <dd><a href="#">等任何的</a></dd>
                <dd><a href="#">地方纷纷</a></dd>
                <dd><a href="#">大风天的</a></dd>
            </dl>
        </div>
        <div class="coverage">
            <h3>京东自营覆盖区县</h3>
            <p>京东已向全国2654个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
            <a href="#">查看详情></a>
        </div>
        </div>
    </div>
    <div class="footer-bottom w">
        <div class="footer-bottom-links">
            <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>
        </div>
        <div class="footer-bottom-copyright">
            <img src="images/gh.png" alt=""/>少时诵诗书所所所所所所所所 <br/>拉海底捞副本附件花费文件那个
        </div>
        <div class="footer-bottom-img">
            <a href="#"><img src="images/img1.png" alt=""/></a>
            <a href="#"><img src="images/img1.png" alt=""/></a>
            <a href="#"><img src="images/img1.png" alt=""/></a>
            <a href="#"><img src="images/img1.png" alt=""/></a>
            <a href="#"><img src="images/img1.png" alt=""/></a>
        </div>
    </div>
</div>
<!--footer部分结束-->
</body>
</html>

css部分-base

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

fieldset, img, input, button {           /*fieldset组合表单中的相关元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

ul, ol {
    list-style: none;           /*清除列表风格*/
}

input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

select, input {
    vertical-align: middle;
}

select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;
}

/*防止多行文本框拖动*/
img {
    border: 0;
    vertical-align: middle;
}

/*  去掉图片低测默认的3像素空白缝隙*/
table {
    border-collapse: collapse;       /*合并外边线*/
}


body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";  /*宋体，Unicode，统一码*/
    color: #666;
    background: #fff
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #C81623;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal;
    text-decoration: none;
}

.col-red {
    color: #C81623 !important;
}

/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}

.fl {
    float: left
}

.fr {
    float: right
}

.al {
    text-align: left
}

.ac {
    text-align: center
}

.ar {
    text-align: right
}

.hide {
    display: none
}
/*nav开始*/
.site-nav {
    height: 30px;
    background: #f0f0f0;
    line-height: 30px;
}
.site-nav .fore {
    position: relative;
    padding: 0 25px 0 10px;
}
.site-nav-send {
    position:relative;
    padding:0 25px 0 10px;
    width: 60px;
    height: 30px;
}
.site-nav i{
    position: absolute;
    width: 15px;
    height: 7px;
    top: 12px;
    right: 8px;
    overflow: hidden;
}
.site-nav-send s,.site-nav-r .fore s{
    position: absolute;
    top: -15px;
}
/*var right*/
.site-nav li{
    float: left;
    padding: 0 10px;
}
.site-nav li.shu{
    width: 1px;
    height: 15px;
    background: #ddd;
    padding: 0px;
    margin-top: 9px;
}
.jd-tel {
    position: relative;
}
.site-nav .jd-tel {
    padding-left:25px;
}
.site-nav .fore span {
    position: absolute;
    top: 5px;
    left: 7px;
    width: 15px;
    height: 20px;
    background: url("../images/tel.png") no-repeat;
}
/*nav结束*/
/*top-banner开始*/
.topbanner {
    background-color: #37C2FB;
}
.tb {
    position:relative;
}
.close-banner {
    position:absolute;
    top: 5px;
    right: 5px;
    width: 19px;
    height: 19px;
    background: url("../images/close-banner.png") no-repeat;
}
.close-banner:hover {
    background-position:0 -19px;
}
/*top-banner部分结束*/
/*search部分开始*/
.search-logo {
    float:left;
    width: 362px;
    height: 60px;
    padding: 20px 0;
}
.search-input {
    float: left;
    width: 538px;
    height: 61px;
}
.search-car {
    float:right;
    width: 96px;
    height: 34px;
    margin:25px 65px 0 0;
    border: 1px solid #dfdfdf;
    background-color: #f9f9f9;
    line-height: 34px;
    padding-left: 43px;
    position: relative;
}
.icon1 {
    position: absolute;
    width: 18px;
    height: 16px;
    background: url("../images/tel.png") no-repeat 0 -58px;
    top: 8px;
    left: 18px;
}
.icon2 {
    position: absolute;
    right: 10px;
    top: 0;
    color: #999;
    font:13px/34px "SimSun";
}
.icon3 {
    position: absolute;
    top:-5px;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    line-height: 14px;
    text-align: center;
    color: #ffffff;
    border-radius:7px 0 7px 0;
}
.search-morealink {
    float: left;
    width: 538px;
    height: 28px;
}
.search-logo a {
    display: inline-block;
    width: 270px;
    height: 60px;
    text-indent:-5000px;
    background: url("../images/logo.png") no-repeat;
}
.search-input {
    float: left;
    height: 36px;
    padding: 25px 0 0 0;
}
.search-input input {
    float: left;
    width: 450px;
    height: 32px;
    border: 2px solid #b61d1d;
    padding-left: 4px;
    font: 400 14px/32px "microsoft yahei";
    color:rgb(153,153,153);
    border-right: 0;
}
.search-input button {
    height: 36px;
    width: 82px;
    color: #ffffff;
    font:400 16px/36px "微软雅黑";
    background-color : #B61D1D;
    cursor: pointer;
}
.search-morealink li {
    float: left;
    margin-top: 4px;
}
.search-morealink li a{
    display: inline-block;
    margin: 0 6px;
    color: #000;
}
.search-morealink li a:hover {
    color: #C81623;
}
/*search部分结束*/

/*<!--shortcut-nav部分开始-->*/
.shortcut-nav {
    height: 44px;
    width: 100%;
    border-bottom: 2px solid  #B61D1D;
}
 .shortcut-nav-menu {
     width: 210px;
     height: 44px;
     float: left;
 }
  .shortcut-nav-items {
      width: 730px;
      height: 44px;
      float: left;
  }
.shortcut-nav-img {
    width: 200px;
    height: 44px;
    float: right;
}
.shortcut-nav-img img {
    height: 39px;
    padding-bottom: 5px;
}
.shortcut-nav-menu-all a {
    display: inline-block;
    width: 210px;
    height: 44px;
    background-color: #b1191a;
    font:400 18px/44px "microsoft yahei";
    color: #ffffff;
    text-align: center;
}
.shortcut-nav-menu-one {
    width: 210px;
    height: 466px;
    margin-top: 2px;
    background-color: #C81623;
    border-left: 1px solid #b1191a;
    border-bottom: 1px solid #b1191a;
    position: absolute;
    z-index: 5;
}
.shortcut-nav-items li{
    float: left;
}
.shortcut-nav-items a {
    display: inline-block;
    height: 44px;
    padding: 0 20px;
    color:#333;
    font: 400 15px/44px "microsolt yahei";
}
.shortcut-nav-items a:hover {
    color:#c81623;
}
.shortcut-nav-menu-one div {
    height: 31px;
    padding: 0 10px;
    color:#fff;
    font:400 14px/31px "microsoft yahei";
}
.shortcut-nav-menu-one h3 {
    float: left;
}
.shortcut-nav-menu-one a {
    color: #ffffff;
}
.shortcut-nav-menu-one div:hover{
    background-color: #ffffff;
}
.shortcut-nav-menu-one div:hover a {
    color:#c81623;
}
.shortcut-nav-menu-one i {
    float: right;
    color: #ffffff;
    font: 400 12px/31px "console";
}
/*<!--shortcut-nav部分结束-->*/





/*footer部分开始*/
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}
.footer-top-slogen {
    width: 100%;
    height: 94px;
    position: relative;
    background-color: #f5f5f5;
}
.footer-top-slogen-icon {
    position: absolute;
    left:50%;
    top:20px;
}
.footer-top-slogen-icon1 {
    margin-left: -604px;
}
.footer-top-slogen-icon2 {
    margin-left: -302px;
}
.footer-top-slogen-icon4 {
    margin-left: 302px;
}

.footer-top-shopping dl{
    padding-top: 16px;
    float: left;
    width: 200px;
}
.footer-top-shopping dt,.coverage h3{
    height: 34px;
    font:18px/34px "microsoft yahei";
}
.footer-top-shopping dd {
    line-height: 20px;
}
.footer-top-shopping .last-dl {
    width: 100px;
}
.footer-top .coverage {
    float: right;
    width: 186px;
    height: 169px;
    margin-top: 16px;
    background: url("../images/china.png") no-repeat 0 -131px;
    padding:0 50px 0 20px;
}
.footer-top .coverage a {
    float: right;
}
.footer-top .coverage p {
    padding-top: 8px;;
}
.footer-bottom {
    border-top:1px solid #E5E5E5;
    text-align: center;
}
.footer-bottom-links {
    padding-top: 20px;
    padding-bottom: 10px;
    font:12px/18px "microsoft yahei";
}
.footer-bottom-links a {
    margin:0 5px;
    font:12px/18px "microsoft yahei";

}
.footer-bottom-img a {
    margin-right: 5px;
}

css部分-global

/*主体部分开始*/
/*主体-中心图开始*/
.main-slider{
    margin:12px 0 0 220px;
    width: 735px;
    height: 454px;
    position: relative;
}

.main-slider img {
    width: 735px;
    height: 454px;
}
.main-slider ul {
    float: left;
    width: 300px;
    height: 30px;
    position: absolute;
    left: 50%;
    margin-left:-150px;
    top:90%;
    z-index: 10;
}
.main-slider li {
    float: left;
    width: 18px;
    height: 18px;
    border-radius:50%;
    color: #ffffff;
    background-color: #333333;
    margin:5px 20px;
    text-align: center ;
}
.main-slider li:hover {
    background-color:#999;
}
.main-slider i {
    position: absolute;
    top:50%;
    margin-top: -25px;
    width: 30px;
    height: 50px;
    text-align: center;
    font:400 30px/50px "microsoft yahei";
    color:rgba(255,255,255,0.1);
    background-color: rgba(153,153,153,0.6);
}
.main-slider i:hover {
    background-color: rgba(153,153,153,0.9);
    color:rgba(255,255,255,0.6);
}
.main-slider .i-left {
    float: left;
    left: 5px;
}
.main-slider .i-right {
    float: right;
    right: 5px;
}
/*sub banner 部分开始 */
.sub-banner {
    position: relative;
}
.sub-banner a{
    position: absolute;
    float: left;
    width: 100%;
    height: 644px;
    background: url("../images/subbanner.jpg") no-repeat center top;
}
/*sub banner 部分结束*/
/*主体-中心图结束*/
/*主体-新闻部分开始*/
.main{
    position: relative;
    z-index: 6;
}
.main-news {
    margin-top: 12px;
    width: 247px;
    height: 454px;
    border: 1px solid #999999;
}
.main-news-top {
    height: 152px;
}
.main-news-top dt,.main-news-top dd{
    padding:0 10px;
}
.main-news-top dt{
    height: 31px;
    border-bottom: 1px solid #999999;
}
.main-news-top i {
    width: 90px;
    font:400 16px/31px "microsoft yahei";
    float: left;
}
.main-news .main-news-top a{
    display: inline-block;
    font:400 12px/31px "microsoft yahei";
    float: right;
    width: 50px;
    height: 31px;
}
.main-news-top dd {
    padding: 5px 0 0 0;
}
.main-news a {
    display: inline-block;
    width: 247px;
    height: 75px;
}

.main-news-cen div{
    float: left;
    width: 61px;
    height: 70px;
    border-right: 1px solid #999999;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    text-align:center;
}
.main-news-cen div.div-last {
    border-right: hidden;
}
.main-news-cen div a{
    text-align:center;
    width: 50px;
    height: 20px;
}
.main-news-cen div .fig {
    width: 25px;
    height: 24px;
    overflow: hidden;
    border:none;
    margin: 13px 19px 10px 18px;
}
.main-news-cen div .img1{
    position: relative;
    width: 50px;
    top: 0;
    left: 0;
}
.main-news-cen div .img2{
    position: relative;
    width: 50px;
    top:-25px;
    left: 0;
}
.main-news img {
    width: 247px;
}
/*新闻部分结束*/
/*图标部分开始*/
.today {
    margin:10px auto 20px ;
    position: relative;
}
.today-left {
    float: left;
    margin-right: 1px;
}
.today-left a {
    display: inline-block;
    width: 210px;
    height: 151px;
    background:url("../images/pic1.jpg") ;
}
.today-right {
    float: right;
    position: relative;
}
.today-right li {
    float: left;
    margin-right: 1px;
}
.today-right li img {
    width: 248px;
}
.today-right i {
    position: absolute;
    top:50%;
    margin-top: -25px;
    width: 30px;
    height: 50px;
    text-align: center;
    font:400 30px/50px "microsoft yahei";
    color:rgba(255,255,255,0.1);
    background-color: rgba(153,153,153,0.6);
}
.today-right i:hover {
    background-color: rgba(153,153,153,0.9);
    color:rgba(255,255,255,0.6);
}
.today-right .i-left {
    float: left;
    left: 5px;
}
.today-right .i-right {
    float: right;
    right: 5px;
}