CSS實戰(代碼部分)

原創 John_boom 2020-06-19 01:55

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
    <!-- 引入base.css -->
    <link rel="stylesheet" href="css/base.css" />
    <!-- 引入index.css -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- 引入favicon.ico-->
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!-- 京東的頭部導航開始 -->
<div class="shortcut">
    <div class="w">
        <div class="fl">
            <div class="dt">
                送至：北京
                <i><s>◇</s></i>
            </div>
        </div>
        <div class="fr">
            <ul>
                <li>
                    <a href="#">你好，請登錄</a> &nbsp;&nbsp;
                    <a href="#" class="col-red">免費註冊</a>
                </li>
                <li class="line"></li>
                <li>我的訂單</li>
                <li class="line"></li>
                <li class="fore">我的京東
                    <i><s>◇</s></i>
                </li>
                <li class="line"></li>
                <li>京東會員</li>
                <li class="line"></li>
                <li>企業採購</li>
                <li class="line"></li>
                <li class="fore tel-jd">
                    <em class="tel"></em>
                    手機京東
                    <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>
<!-- 京東頭部導航結束 -->
<!-- topbannner start-->
<div class="topbanner" id="top_banner">
    <div class="w tp">
        <img src="images/topbanner.jpg" alt="">
        <!-- this is the close banner -->
        <a href="javascript:;" class="close-banner" id="jd_close"></a>
    </div>
</div>
<script>
    // 事件源是標籤a
    // 事件 點擊
    // 事件處理程序 topbanner隱藏
    var jd_close = document.getElementById("jd_close");
    var topbanner =document.getElementById("top_banner");
    // 事件源.事件 =function(){}
    jd_close.onclick = function(){
        topbanner.style.display ="none";
    }
</script>
<!-- topbanner end -->


<!-- 搜索欄的開始 -->
<!-- 這裏用到了clearfix的清楚浮動 -->
<div class="w clearfix">
    <!-- 這個圖標有兩個內容即：一個背景圖含有超級鏈接（京東的首頁）+一個動圖 -->
    <div class="logo">
        <a href="http://www.jd.com" target="_blank" class="jd-a" title="jingdong">京東</a>
        <div class="db11">
            <a href="#"><img src="images/dong.gif" alt=""></a>
        </div>
    </div>
    <!-- 這裏是搜索框的位置 -->
    <div class="search">
        <input type="text" name="" id="" value="圖書開搶">
        <button>搜索</button>
    </div>
    <!-- 右邊小車圖標的開始 -->
    <div class="car">
        <a href="#">我的購物車</a>
        <span class="icon1"></span>
        <span class="icon2">></span>
        <span class="icon3">6</span>
    </div>
    <!-- 熱點詞彙的開始 -->
    <div class="hotwords">
        <a href="#" class="col-red">11月11天</a>
        <a href="#">11.11秒殺</a>
        <a href="#">買2免1</a>
        <a href="#">Note5 黑</a>
        <a href="#">12期免息</a>
        <a href="#">智能科技</a>
        <a href="#">清倉</a>
        <a href="#">國際服飾</a>
        <a href="#">優惠券</a>
    </div>
</div>



<!-- nav 部分開始 -->
<div class="jd-nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">
                <a href="#">全部商品分類</a>
            </div>
            <div class="dd">
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>家用電器</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>
                <div class="items">
                    <h3>手機、數碼、京東通信</h3>
                    <span>></span>
                </div>

            </div>
        </div>
        <div class="navitems">
            <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 class="new"><a href="#">團購</a></li>
                <li><a href="#">拍賣</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">智能</a></li>
            </ul>
        </div>
        <div class="bike">
            <a href="#"></a>
        </div>
    </div>
</div>

<!-- 下面就是大banner -->
<!-- 這裏是中間滾動欄部分 -->
<div class="banner604">
    <a href="#"></a>
</div>
<div class="w main clearfix">
    <div class="slider">
        <a href="#"><img src="images/slider1.jpg" alt=""></a>
        <ul class="circle"><!-- 這是小圓點 -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li class="current">6</li>
        </ul>

        <div class="arrow"><!-- 這是左右的兩個三角 -->
            <a href="javascript:;" class="arrow-l"><</a>
            <a href="javascript:;" class="arrow-r">></a>
        </div>
    </div>
    <!-- 這裏是右側的新聞公告部分 -->
    <div class="news">
        <div class="jd-news">
            <div class="dt">
                <h3>京東快報</h3>
                <a href="#">更多></a>
            </div>
            <div class="dd">
                <ul>
                    <li><a href="#"><span>[特惠]</span>1元秒殺</a></li>
                    <li><a href="#"><span>[公告]</span>母嬰類APP【京東寶寶】上線</a></li>
                    <li><a href="#"><span>[特惠]</span>美的品牌日 APP嗨購大放“價”</a></li>
                    <li><a href="#"><span>[公告]</span>京東深入蒙牛生產基地進行質檢</a></li>
                    <li><a href="#"><span>[特惠]</span>白條購家電 24期免息！</a></li>
                </ul>
            </div>
        </div>
        <div class="lifeservi">
            <div class="dt">
                <h3>生活服務</h3>
            </div>
            <div class="dd">
                <ul>
                    <li class="lifeservi-icon1">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon2">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon3">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon4">
                        <a href="#" class="song">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon5">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon6">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon7">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon8">
                        <a href="#">
                        <i></i>
                        <span>話費</span>
                    </a></li>
                    <li class="lifeservi-icon9">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon10">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon11">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                    <li class="lifeservi-icon12">
                        <a href="#">
                            <i></i>
                            <span>話費</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 雙11的某個活動 -->
<div class="w todays clearfix">
    <div class="night">
        <div class="night-l fl">
            <img src="images/night.jpg" alt="">
        </div>
        <div class="night-r">
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 頁面的底部開始 9.13-->
<div class="footer">
    <div class="service"><!-- 服務模塊 -->
        <!-- 底部的標語部分開始 -->
        <div class="slogan">
            <span class="item slogan1">
                <img src="images/slogan1.png" alt="">
            </span>
            <span class="item slogan2">
                <img src="images/slogan2.png" alt="">
            </span>
            <span class="item slogan3">
                <img src="images/slogan3.png" alt="">
            </span>
            <span class="item slogan4">
                <img src="images/slogan4.png" alt="">
            </span>
        </div>
        <!-- 下面是底部的幫助鏈接部分 -->
        <div class="w shopping clearfix">
            <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>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd><a href="#">上門自提</a></dd>
                <dd><a href="#">211限時達</a></dd>
                <dd><a href="#">配送服務查詢</a></dd>
                <dd><a href="#">配送費收取標準</a></dd>
                <dd><a href="#">海外配送</a></dd>
            </dl>
            <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>
            <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>
            <dl>
                <dt><a href="#">特色服務</a></dt>
                <dd><a href="#">奪寶島</a></dd>
                <dd><a href="#">DIY裝機</a></dd>
                <dd><a href="#">延保服務</a></dd>
                <dd><a href="#">京東E卡</a></dd>
                <dd><a href="#">京東通信</a></dd>
                <dd><a href="#">京東JD+</a></dd>
            </dl>
            <!-- 這裏是中國地圖的覆蓋部分 -->
            <div class="coverage">
                <div class="dt">京東自營覆蓋區縣</div>
                <div class="dd">
                    <p> 京東已向全國2357個區縣提供自營配送服務，支持貨到付款、POS機刷卡和售後上門服務。</p>
                    <p class="looklook"><a href="#">查看詳情 ></a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="w againw">
        <!-- 鏈接 -->
        <div class="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="#">English Site</a>
            <a href="#">Contact Us</a>
        </div>
        <!-- 最後的尾部版權部分 -->
        <div class="copyright">
            北京市公安局朝陽分局備案編號110105014669  |  京ICP證070359號  |  互聯網藥品信息服務資格證編號(京)-經營性-2014-0008  |  新出發京零 字第大120007號<br />
            音像製品經營許可證蘇宿批005號  |  出版物經營許可證編號新出發(蘇)批字第N-012號  |  互聯網出版許可證編號新出網證(京)字150號<br />
            網絡文化經營許可證京網文[2014]2148-348號  違法和不良信息舉報電話：4006561155  Copyright © 2004-2015  京東JD.com 版權所有<br />
            京東旗下網站：360TOP  拍拍網  網銀在線
        </div>
        <div class="message">
            <a href="#"><img src="images/mess1.png" alt=""></a>
            <a href="#"><img src="images/mess2.png" alt=""></a>
            <a href="#"><img src="images/mess3.png" alt=""></a>
            <a href="#"><img src="images/mess4.png" alt=""></a>
            <a href="#"><img src="images/mess5.png" alt=""></a>
        </div>
    </div>
</div>
</body>
</html>

base.css部分

@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 { 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";
    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
}

/*頭部導航開始*/
.shortcut {
    height: 30px;
    line-height: 30px;
    background-color: #f1f1f1;
}

.shortcut .dt,
.shortcut .fore{
    padding: 0 20px 0 10px;
    position: relative;
}

.shortcut .dt i,
.fore i{
    font: 400 15px/15px "SimSun";
    position: absolute;
    top: 13px;
    right: 3px;
    height: 7px;
    overflow: hidden;
    width: 15px;
}

.shortcut .dt s,
.fore s{
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.fr li{
    float: left;
    padding:0 10px;
}
.fr .line{
    width: 1px;
    height: 12px;
    background-color: #ddd;
    margin-top: 9px;
    padding: 0;
}
.shortcut .tel-jd{
    padding: 0 20px 0 25px;
}
.tel{
    position: absolute;
    width: 15px;
    height: 20px;
    background: url(../images/sprite.png) no-repeat;
    left: 5px;
    top: 5px;
}
/*頂部end*/
/*topbannner start*/
/*設置頂部圖的背景顏色*/
.topbanner{
    background-color: #8A25C6;
}
/*這裏是關閉圖標的屬性值，通過絕對定位，因爲關閉圖標是通過定位到該位置的，可見他的父親一定是相對定位*/
.close-banner {
    position: absolute;
    right: 0;
    top:5px;
    width: 19px;
    height: 19px;
    background: url(../images/close.png) no-repeat;
}
/*關閉圖標的hover屬性值，是用背景定位：底部*/
.close-banner:hover {
    background-position: bottom;
}
/*父親的定位可知是相對定位*/
.tp {
    position: relative;
}
/*topbannner end*/

/*搜索欄的開始*/

/*這裏是左邊的圖標部分開始*/
.logo{
    width: 360px;
    height: 75px;
    background-color: pink;
    float: left;
    padding-top: 25px;
    background: url(../images/logo.png) no-repeat 0 25px;
    position: relative;
}
.jd-a{
    display: block;
    width: 270px;
    height: 60px;
    text-indent: -1000em;
}
.db11{
    position: absolute;
    width: 180px;
    height: 80px;
    background-color: pink;
    top: 10px;
    left: 168px;
}
/*這裏是搜索框的部分*/
.search{
    width: 538px;
    height: 35px;
    float: left;
    margin-top: 25px;
}
/*這裏是搜索框的表單的輸入*/
.search input{
    width: 450px;
    height: 32px;
    border: 2px solid #B61D1D;
    padding-left: 4px;
    color: #666;
    font: 14px/32px "microsoft yahei";
    float: left;
}
.search button{
    width: 80px;
    height: 36px;
    background-color: #B61D1D;
    float: left;
    font: 16px/36px "microsoft yahei";
    color: #fff;
    cursor: pointer;/*鼠標變成小手*/
}
/*右側的小車圖標的開始*/

/*子絕父相的體現*/
.car{
    width: 96px;
    padding-left: 43px;
    float: right;
    margin: 25px 65px 0 0 ;
    border: 1px solid #DFDFDF;
    line-height: 34px;
    position: relative;
}
/*購物車的圖標*/
.icon1 {
    position: absolute;
    top:10px;
    left: 20px;
    width: 16px;
    height: 13px;
    background: url(../images/sprite.png) no-repeat -1px -59px;
}
/*>的體現*/
.icon2 {
    font: 400 13px/13px SimSun;
    position: absolute;
    top: 10px;
    right: 10px;
}
/*數字圖標的體現*/
.icon3 {
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    top: -4px;
    border-radius: 7px 7px 7px 0;
}
/*熱點詞彙的屬性*/
.hotwords {
    width: 500px;
    padding: 7px 0;
    float: left;
}
.hotwords a{
    margin-right: 6px;
}

/*nav 部分*/
.jd-nav {
    width: 100%;
    height: 44px;
    border-bottom: 2px solid #B1191A;
}

/*子代要絕對定位，所以父親相對定位*/
.dropdown {
    width: 210px;
    height: 44px;
    float: left;
    position: relative;
    z-index: 10;       /*這裏是提高層疊的權重*/
    overflow: visible;   /*這裏是溢出的可視的作用，與overflow: hidden;作用相反*/
}

.dropdown .dt{
    height: 44px;
}
.dropdown .dt a{
    display: block;
    height: 44px;
    font: 400 15px/44px "microsoft yahei";
    background-color: #B1191A;
    color: #fff;
    padding-left: 10px;
}
.dropdown .dd {
    height: 465px;
    background-color: #C81623;
    margin-top: 2px;
}

.dropdown .items {
    height: 31px;
    line-height: 31px;
    border-left: 1px solid #B61D1D;
    padding-left: 10px;
    color: #fff;
    font-size: 15px;
    font-family: "microsoft yahei";
}

.dropdown .items h3 {
    float: left;
}
.dropdown .items span {
    float: right;
    margin-right: 15px;
    font-family: "SimSun";
    font-weight: 600;
}

.navitems {
    width: 680px;
    height: 44px;
    float: left;
}
.navitems li {
    float: left;
}
.navitems li.new {
    background:  url(../images/new.jpg)  no-repeat right top;
}
.navitems li a{
    display: block; /*這裏a是行標籤，不能設置寬高，所以要轉成塊標籤*/
    color: #333;
    font: 400 15px/44px "microsoft yahei";
    padding: 0 20px;

}
.navitems li a:hover {
    color: #B1191A;
}
.bike {
    width: 140px;
    height: 40px; /*這裏相比之前的版本少了高，因爲太高會壓到後面的邊*/
    background:  url(../images/bike.jpg) no-repeat;
    float: right;
}
.bike a {
    display: block;
    height: 44px;
}
/*底部開始*/
.slogan{
    height: 54px;
    padding: 20px ;
    background-color: #f5f5f5;
    position: relative;
    margin-bottom: 15px;
}

.item{
    width: 302px;
    position: absolute;
    top: 20px;
    left: 50%;/*這裏爲什麼要用50%*/
}

.slogan1{
    margin-left: -608px;
}
.slogan2{
    margin-left: -304px;
}
.slogan3{
    margin-left: 2px;
}
.slogan4{
    margin-left: 304px;
}

/*這裏是底部幫助鏈接的部分*/
.shopping dl {
    width: 198px;
    float: left;
}
.shopping dt,
.coverage .dt{
    font-size: 16px;
    height: 28px;
    font-family: "microsoft yahei";
    padding-top: 10px;
}
.shopping dd{
    height: 20px;
}
.coverage {
    float: right;
    width: 210px;
    height: 165px;
    background: url(../images/china.png) no-repeat left bottom;
}
.coverage .dd{
    margin-top: 10px;
}
.coverage p{
    line-height: 18px;
}
.looklook {
    text-align: right;
    margin-top: 5px;
}

.againw {
    border-top: 1px solid #E5E5E5;
    padding: 23px 0 30px 0;
    margin-top: 30px;
    text-align: center;
}
.links {
    height: 25px;
}
.links a{
    padding: 0 6px;
}
.copyright {
    line-height: 18px;
    margin-bottom: 10px;
}

index.css部分

@charset "UTF-8";
.banner604 {
    position: relative;
}
.banner604 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 604px;
    background:  url(../images/banner.jpg)  no-repeat top center;
}
.main {
    position: relative;
}
.slider {
    width: 730px;
    height: 453px;
    background-color: pink;
    margin: 12px 0 0 220px;
    float: left;
    position: relative;
}
.circle {
    position: absolute;
    bottom: 8px;
    left: 50%;
    margin-left: -66px;
}
.circle li {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #3E3E3E;
    float: left;
    text-align: center;
    line-height: 18px;
    color: #fff;
    margin: 0 2px;
    cursor: pointer;
}
.circle li.current {
    background-color: #B61B1F;
}
.arrow-l, .arrow-r {
    position: absolute;
    width: 28px;
    height: 62px;
    top: 50%;
    margin-top: -31px;
    color: #fff;
    font: 500 18px/62px "宋體";
    text-align: center;
    background:  rgba(0,0,0,.2);
}
.arrow-l {
    left: 0;
}
.arrow-r {
    right: 0;
}
.arrow-l:hover,.arrow-r:hover {
    background: rgba(0,0,0,.4);
    color: #fff;
}
.news {
    width: 248px;
    height: 451px;
    border: 1px solid #E4E4E4;
    float: right;
    margin-top: 12px;
}
.jd-news {
    height: 200px;
    border-bottom: 1px dashed #E4E4E4; /*虛線*/
}
.jd-news .dt, .lifeservi .dt {
    height: 43px;
    border-bottom: 1px dotted #E8E8E8;
    line-height: 43px;
}
.jd-news .dt h3 ,.lifeservi .dt h3 {
    float: left;
    font: 14px/43px "microsoft yahei";
    color: #666;
    padding-left: 15px;
}
.jd-news .dt a{
    float: right;
    font: 13px/43px "Simsun";
    margin-right: 15px;
}
.jd-news .dd ul {
    padding: 8px 0 0 15px;
}
.jd-news .dd li {
    line-height: 28px;
}
.jd-news .dd li span {
    font-weight: 700;
    margin-right: 5px;
}
.lifeservi {
    height: 251px;
    overflow: hidden;
    width: 248px;
}
.lifeservi ul {
    width: 252px;
}
.lifeservi  ul li {
    width: 62px;
    height: 70px;
    border: 1px solid #E4E4E4;
    border-top: 0;
    float: left;
    margin-left: -1px;
}
.lifeservi li a{
    display: block;
    height: 70px;
    text-align: center;
    padding-top: 44px;
    position: relative;
}
.lifeservi li i {
    position: absolute;
    top: 12px;
    left: 18px;
    width: 25px;
    height: 25px;
    background:  url(../images/icon_lifeserv.png)  no-repeat right top ;
}
/*生活服務的圖標系列*/
.lifeservi-icon2 a i {
    background-position: right -25px;
}
.lifeservi-icon3 a i {
    background-position: right -50px;
}
.lifeservi-icon4 a i {
    background-position: right -75px;
}
.lifeservi-icon5 a i {
    background-position: right -100px;
}
.lifeservi-icon6 a i {
    background-position: right -125px;
}
.lifeservi-icon7 a i {
    background-position: right -150px;
}
.lifeservi-icon8 a i {
    background-position: right -175px;
}
.lifeservi-icon9 a i {
    background-position: right -200px;
}
.lifeservi-icon10 a i {
    background-position: right -225px;
}
.lifeservi-icon11 a i {
    background-position: right -250px;
}
.lifeservi-icon12 a i {
    background-position: right -275px;
}
.lifeservi .song {
    background:  url(../images/song.png)  no-repeat right top;
}

/*雙11活動*/
.todays {
    position: relative;
}
.night {
    margin: 10px 0 28px 0;
}
.night-r {
    width: 1000px;
    height: 160px;
    float: right;
}
.night-r ul {
    width: 500%;
    _width:400%;
}
.night-r li {
    float: left;
    margin-right: 1px;
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

（單）標籤到底該不該閉合

<br> <hr> <input> <meta> <link> Google規定<br> 不需要“/” HTML 規定“/”可有可無 優點： 代碼整潔，現在新手比較喜歡不寫“/” 用自己的使用習慣就行，現今沒有統一標準

mwb310 2020-07-07 23:58:40

JQuery 實現圖片滑動實例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ wi

WihauShe 2020-07-07 20:06:27

CSS基本使用

常用類型 .font{ /* 字體的類型 1.你寫的字體當前系統要支持 2.可以同時定義多個字體，用,隔開，會按順序查找，找到就試用那個字體 */ /* font-family:sans-serif,"隸書","t

WihauShe 2020-07-07 20:06:27

HTML | 的詳細屬性使用 名稱/值對

導讀：meta的屬性有name,http-equiv,content,charset 屬性（HTML5 新屬性）, scheme （已棄用）。 元素可提供相關頁面的元信息（meta-information），比如針對搜索引擎和更新

Uching 2020-07-07 03:33:57

【CSS基礎篇】——常用屬性

文字的設置 顏色 div{ color: #FF0000; color: red; color: rgb(255,0,0); color: rgba(255,0,0,0.5); } 設置顏色有以

V er 2020-07-06 18:33:44

【表格的應用】

首先，如何寫出一個簡單的表格 以下是一個最簡單的表格，每個單元格的大小是按照裏面的內容進行自動分配的，所以就會出現單元格不均等的情況 <table border="1" width="500" height="200">

V er 2020-07-06 18:33:43

【css的簡單引入】——適合新人小白

css是什麼？？？ css=層疊樣式表 它是用來裝飾body中的內容（博主認爲 css可以比喻成“裝修”） 一、引入方式 1 外部樣式表 <link rel="stylesheet " href="css/style.css"

V er 2020-07-06 18:33:43

【佈局——浮動佈局】

一、塊級元素&行級元素 塊級元素 div{ width: 200px; height: 200px; border: 1px solid #000000; } 特性 1、沒有設置寬高 默認寬度一整行 2、

V er 2020-07-06 18:33:43

HTML5入門基本標籤

一小白第一次總結了部分簡單的（剛接觸html5的一些標籤） 爲什麼會誕生html5？ html5相對於html4有哪些優點呢？？？ 1、語義化 2、便於閱讀 3、便於維護 4、利於seo搜索引擎搜索，優化 以下是代碼運行結果圖片，

V er 2020-07-06 18:33:43

DIV+CSS實現兩邊固定寬度,中間自適應寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

perny 2020-07-05 23:44:51

IE6、7下li元素的子元素爲dl,ul,ol時產生的bug

話不多說，先看測試代碼 該段代碼在標準瀏覽器（包括IE8+）中的效果爲： 但在萬惡的IE6和IE7中的卻是這樣的： 外面看到li元素的子元素是列表元素時（既ul,ol,dl）,li的頂部會莫名其妙的空出一段來，就像是給li設了一個p

perny 2020-07-05 23:44:51

CSS學習中十條速記口訣

如果在用CSS設計佈局時遇到BUG，請認真閱讀以下內容，非常容易記憶的，不知道哪位高人把CSS BUG編成了順口溜了！看看好不好記住呢？一、IE邊框若顯若無，須注意，定是高度設置已忘記；二、浮動產生有緣故，若要父層包含住，緊跟浮動要清除，

ottozy 2020-07-04 17:52:36

【HTML】HTML 鼠標懸停於圖片顯示文字

在 img 元素中添加 title 屬性： <img src="images/logo.gif" alt="bupt_logo" title="bupt"/>

symsmile 2020-07-04 10:38:58

CONMISANMA的正確答案——CSS實現左右居中

這裏發佈的代碼全部都是經過我測試的，所以可以直接複製後使用。幾年以前記下的一條代碼，忘了轉載的人。在此表示感謝。測試系統：DEEPIN LINUX 15.6測試軟件：NETBEANS 8.2測試瀏覽器：Chrome 版本 63.0.323

CONMISANMA的正确答案 2020-07-04 01:50:48

vue-cli3中使用rem自適應

安裝 npm install postcss-px2rem --save 在vue.config.js中增加配置 const px2rem = require('postcss-px2rem'); const postcss = px

jinmo277 2020-07-02 03:09:25