css入門：day9—精靈圖-ps

一耙册、css精靈技術(shù)

網(wǎng)頁加載每一張圖片都需要對服務器進行一次請求槽袄，所以對服務器的負荷會很大烙无，可以將多個小圖放到一張大圖上，每個地方使用小圖片都對大圖進行背景定位即可遍尺，這樣只需要加載一張大圖片截酷，對服務器只做一次請求，可以減少服務器的開銷乾戏，提供網(wǎng)站的性能

微信案例其實就是用的精靈圖

<head>
    <meta charset="UTF-8">
    <title>微信案例</title>
    <style type="text/css">
        .box{
            height:74px;
            background:url(img/wx_bg.jpg);
            padding-left:300px;
        }
        ul{
            list-style:none;
            padding:0;
            margin:0;
        }
        li{
            float:left;
            margin-top:20px;
            margin-right:20px;
        }
        a{
            display:inline-block;
            text-decoration: none;
            color:#fff;
            height:33px;
            background:url(img/wxli_bg.png) left -192px;
            line-height:33px;
            padding-left:17px;
        }
        span{
            display:inline-block;
            height:33px;
            background:url(img/wxli_bg.png) right -192px;
            line-height:33px;
            padding-right:17px;
        }
        a:hover{
            color:green;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><span>首頁</span></a></li>
            <li><a href="#"><span>下載吧</span></a></li>
            <li><a href="#"><span>公共平臺</span></a></li>
        </ul>
    </div>
</body>

二迂苛、滑動門效果

概念：3個盒子浮動三热，左邊和右邊寫寬高，負責加載兩邊的背景三幻，中間的盒子寬度不定就漾，讓文字撐開

<head>
    <meta charset="UTF-8">
    <title>滑動門</title>
    <style type="text/css">
        .box{
            height:33px;
            margin-left:300px;
        }
        .box div{
            float:left;
            height:33px;
        }
        .left{
            width:18px;
            background:url(img/left.png);
        }
        .center{
            line-height:33px;
            color:#fff;
            background:url(img/center.png);
        }
        .right{
            width:17px;
            background:url(img/right.png);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center">這是文字進來了</div>
        <div class="right"></div>
    </div>  
</body>

字間距
單詞間距

四、梅蘭練習

引入字體圖標css和當前文件的css

    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

頂部代碼：

<!-- 頂部開始 -->
<div class="top container">
    <div class="content clearfix">
        <div class="welcome">您還念搬，歡迎來到建材網(wǎng)抑堡！</div>
        <ul>
            <li><a href="#">建材首頁</a></li>
            <li><a href="#">我的商務室</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
            <li><a href="#">我的收藏</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
            <li><a href="#">建材服務</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
            <li><a href="#">客服中心</a></li>
            <li><a href="#">網(wǎng)站導航</a><i class="iconfont icon-ico_arrows_unfold"></i></li>
        </ul>
    </div>
</div>
<!-- 頂部結(jié)束 -->

頂部css

/* CSS Document */
/* 公共 */
*{
    padding:0;
    margin:0;
}
.container{
    width:100%;
}
.content{
    width:970px;
    margin:0 auto;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
    color:#000;
}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
/* 頂部 */
.top{
    background:#f7f7f7;
    border-bottom:1px solid #d8d8d8;
    line-height:26px;
    font-size:12px;
}
.top .welcome{
    float:left;
}
.top ul{
    float:right;
}
.top ul li{
    float:left;
    padding:0 8px;
    text-align:center;
}
.top ul li i{
    font-size:12px;
    margin-left:4px;
}

logo和搜索html

<!-- logo和導航開始 -->
<div class="container">
    <div class="content clearfix search">
        <img src="images/logo.jpg">
        <form class="search">
            <input type="text" placeholder="請輸入關(guān)鍵字">
            <input type="submit" value="搜索" />
        </form>
    </div>
</div>
<!-- 導航和搜索結(jié)束 -->

logo和搜索css

/* 導航和搜索 */
.logo{
    float:left;
}
.search form{
    float:right;
    margin-top:29px;
    width:528px;
    height:40px;
    border:1px solid #c9c9c9;
}
.search form input{
    float:left;
    border:none;
}
.search form input[type="text"]{
    width:416px;
    height:28px;
    margin:5px;
    margin-right:0;
    border:1px solid #a6a6a6;
    padding-left:4px;
}
.search form input[type="submit"]{
    width:98px;
    height:30px;
    background:#2f70d0;
    color:#fff;
    margin-top:5px;
}

導航部分html

<!-- 導航部分開始 -->
<div class="container">
    <div class="content nav clearfix">
        <ul>
            <li><a class="on" href="#">首頁</a></li>
            <li><a href="#">建筑材料</a></li>
            <li><a href="#">兒童安全座椅</a></li>
            <li><a href="#">工藝美術(shù)品</a></li>
        </ul>
    </div>
</div>
<!-- 導航部分結(jié)束 -->

導航css

/* 導航 */
.nav{
    border-bottom:2px solid #0266a3;
    height:25px;
    margin-bottom:10px;
}
.nav ul li{
    float:left;
}
.nav ul li a{
    padding:0 16px;
    display:inline-block;
    height:25px;
    text-align:center;
    line-height:25px;
    font-size:14px;
}
.nav ul li a.on,.nav ul li a:hover{
    background:#0266a3;
    color:#fff;
}

banner部分html

<!-- banner部分開始 -->
<div class="container">
    <div class="content banner clearfix">
        <div class="menu">
            <h3>商機市場</h3>
            <ul>
                <li><a href="#"><img src="images/icon_1.png"><span>建筑材料</span></a></li>
                <li><a href="#"><img src="images/icon_2.png"><span>兒童安全座椅</span></a></li>
                <li><a href="#"><img src="images/icon_3.png"><span>工藝美術(shù)品</span></a></li>
                <li><a href="#"><img src="images/icon_4.png"><span>建筑材料</span></a></li>
                <li><a href="#"><img src="images/icon_5.png"><span>兒童安全座椅</span></a></li>
                <li><a href="#"><img src="images/icon_6.png"><span>工藝美術(shù)品</span></a></li>
            </ul>
        </div>
        <img src="images/banner.jpg" />
        <div class="message">
            <div class="introduce">
                <h4>建材通大眾版</h4>
                <img src="images/s_logo.jpg">
                <p>
                    價格實惠，量身為營銷預算不多的供應商所設(shè)锁蠕。了解詳情
                </p>
            </div>
            <div class="contact">
                <span>找信息或者發(fā)信息遇到問題夷野？</span>
                <p>
                    0571-89938887
                </p>
                <button>留言咨詢</button>
            </div>
        </div>
    </div>
</div>
<!-- banner部分結(jié)束 -->

banner部分css

/* banner */
.banner>div{
    float:left;
}
.banner .menu{
    width:200px;
    height:210px;
    background:#ebf0f6;
}
.banner .menu h3{
    background:#0266a3;
    font-size:14px;
    line-height:30px;
    color:#fff;
    padding-left:20px;
}
.banner .menu ul li a{
    line-height:28px;
    font-size:14px;
}
.banner .menu ul li a img{
    vertical-align:middle;
    margin:0 12px 0 8px;
}
.banner>img{
    margin:0 9px 0 11px;
    float:left;
}
.banner .message .introduce{
    width:227px;
    height:91px;
    background:#f7faff;
    border:1px solid #e0e6f0;
}
.banner .message .introduce h4{
    font-size:12px;
    padding-left:18px;
    padding-top:7px;
}
.banner .message .introduce img{
    margin-top:20px;
    margin-left:10px;
    float:left;
}
.banner .message .introduce p{
    float:left;
    width:156px;
    font-size:12px;
    margin-top:25px;
    margin-left:10px;
    line-height:20px;
}
.banner .message .contact{
    width:229px;
    height:82px;
    background:#f7f7f7;
    margin-top:21px;
    text-align:center;
    padding-top:12px;
}
.banner .message .contact span{
    color:#999;
}
.banner .message .contact p{
    background:url(../images/phone.jpg) 35px top no-repeat;
    margin-top:9px;
    color:#3f9ce0;
    font-size:14px;
}
.banner .message .contact button{
    width:74px;
    height:21px;
    border:none;
    border:1px solid #afc6e7;
    border-radius:2px;
    font-size:12px;
    line-height:21px;
    text-align:left;
    padding-left:25px;
    color:#1a649d;
    background:url(../images/button_bg.jpg) no-repeat 5px 2px;
    letter-spacing:-1px;
}

建筑材料html

<!-- 建筑材料開始 -->
<div class="container">
    <div class="content pro1 clearfix">
        <h3>建筑材料</h3>
        <ul>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c1.png"></a>
                    <div class="info">
                        <a href="#">好太太晾衣架&nbsp;鋁鈦合金&nbsp;升降雙桿</a>
                        <p>
                            自動換擋&nbsp;安全耐用<br>
                            穩(wěn)定性好&nbsp;抗氧化強
                        </p>
                        <span>
                            <b>239.00</b>
                            <s>￥386.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>99</span>件&nbsp;已售出<span>20</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c2.png"></a>
                    <div class="info">
                        <a href="#">威爾舒木地板12mm厚網(wǎng)絡(luò)超值特</a>
                        <p>
                            防滑抗污&nbsp;清理簡單
                            扣型緊密&nbsp;環(huán)保健康
                        </p>
                        <span>
                            <b>10.00</b>
                            <s>￥68.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>8</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c3.png"></a>
                    <div class="info">
                        <a href="#">好藝達高檔太空鋁三件套3500套</a>
                        <p>
                            經(jīng)典的設(shè)計風格<br>
                            油脂的產(chǎn)品品質(zhì)
                        </p>
                        <span>
                            <b>99.00</b>
                            <s>￥447.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>51</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c4.png"></a>
                    <div class="info">
                        <a href="#">好太太晾衣架&nbsp;8818&nbsp;曬被架</a>
                        <p>
                            自動換擋&nbsp;安全耐用
                            穩(wěn)定性好&nbsp;抗氧化強
                        </p>
                        <span>
                            <b>350.00</b>
                            <s>0.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>6</span>件</p>
                </div>
            </li>
        </ul>
        <div class="pro-news">
            <h4>建材資訊</h4>
            <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>
<!-- 建筑材料結(jié)束 -->

建筑材料css

/* 建筑材料 */
.pro1{
    margin-top:14px;
}
.pro1 h3{
    height:34px;
    background:#ecf1f7;
    line-height:34px;
    border-top:2px solid #c3d7e4;
    font-size:14px;
    padding-left:22px;
    margin-bottom:12px;
}
.pro1>ul{
    float:left;
    width:718px;
    height:344px;
    border:1px solid #d8d8d8;
    padding:0 5px;
}
.pro1>ul li{
    padding-top:14px;
    padding-left:22px;
    padding-bottom:12px;
    float:left;
    border-bottom:1px solid #eee;
    width:336px;
}
.pro1>ul li .pro-info>a{
    float:left;
    width:97px;
    height:100px;
    border:1px solid #cacaca;
    text-align:center;
}
.pro1>ul li .pro-info>.info{
    float:left;
    margin-left:10px;
}
.pro1>ul li .pro-info>.info>a{
    display:block;
    font-size:14px;
    margin-top:6px;
}
.pro1>ul li .pro-info>.info>p{
    color:#863e01;
    font-size:10px;
    width:100px;
    margin-top:10px;
}
.pro1>ul li .pro-info>.info>span{
    display:block;
    margin-top:16px;
}
.pro1>ul li .pro-info>.info>span b{
    color:#c50934;
    font-size:14px;
    margin-right:25px;
}
.pro1>ul li .pro-info>.info>span s{
    color:#555;
    font-size:8px;
}
.pro1>ul li .shopping button{
    border:none;
    margin-top:14px;
    float:left;
    background:#0a84e3;
    width:99px;
    height:26px;
    text-align:center;
    line-height:26px;
    color:#fff;
}
.pro1>ul li .shopping p{
    float:left;
    margin-left:10px;
    font-size:12px;
    margin-top:26px;
}
.pro1>ul li .shopping p span{
    color:#c50934;
}
.pro1 .pro-news{
    float:right;
    border:1px solid #e0e6f0;
    width:228px;
}
.pro1 .pro-news h4{
    background:#fcfcfc;
    font-size:12px;
    border-bottom:1px solid #e0e6f0;
    line-height:28px;
    height:28px;
    padding-left:15px;
}
.pro1 .pro-news ul{
    list-style-type:square;
    font-size:12px;
    padding-left:20px;
    line-height:24px;
    padding-top:5px;
    height:310px;
}

兒童安全座椅html

<!-- 兒童安全座椅開始 -->
<div class="container">
    <div class="content pro2 clearfix">
        <h3>兒童安全座椅</h3>
        <div class="pro-info">
            <p>
                <span>ISOFIX接口</span>
                <a href="#">詳情點擊>></a>
            </p>
            <ul class="clearfix">
                <li>
                    <a href="#"><img src="images/et01.png"></a>
                    <span>英國百代適-至尊者(帶<br />ISOFIX接口)奔馳寶馬專用</span>
                    <p>適合年齡：9個月-4歲</p>
                    <p>市場價：<s>￥5580元</s></p>
                    <p>直銷價：<b>￥3380元</b></p>
                </li>
                <li>
                    <a href="#"><img src="images/et02.png"></a>
                    <span>歐貝兒童安全座椅3-12歲<br>ISOFIX兒童汽車安全座椅</span>
                    <p>適合年齡：3-12歲</p>
                    <p>市場價：<s>￥1980元</s></p>
                    <p>直銷價：<b>￥1380元</b></p>
                </li>
                <li>
                    <a href="#"><img src="images/et03.png"></a>
                    <span>西班牙JANE(INDY&nbsp;PLUS<br>TEAM)3-12歲&nbsp;H65帶ISOfix</span>
                    <p>適合年齡：3-12歲</p>
                    <p>市場價：<s>￥2980元</s></p>
                    <p>直銷價：<b>￥1980元</b></p>
                </li>
                <li>
                    <a href="#"><img src="images/et04.png"></a>
                    <span>歐貝兒童安全座椅3-12歲<br>ISOFIX兒童汽車安全座椅</span>
                    <p>適合年齡：3-12歲</p>
                    <p>市場價：<s>￥1980元</s></p>
                    <p>直銷價：<b>￥1380元</b></p>
                </li>
            </ul>
        </div>
        <div class="pro-hot">
            <img src="images/et_right.png">
            <img src="images/et_right_bottom.png">
        </div>
    </div>
</div>
<!-- 兒童安全座椅結(jié)束 -->

兒童安全座椅css

/* 兒童安全座椅 */
.pro2 h3{
    background:#ecf1f7;
    height:34px;
    border-top:2px solid #c3d7e4;
    padding-left:22px;
    line-height:34px;
    font-size:14px;
    margin-top:15px;
}
.pro2 .pro-info{
    float:left;
    width:726px;
    
}
.pro2 .pro-info>p{
    height:34px;
    border-bottom:2px solid #4daee1;
}
.pro2 .pro-info>p span{
    float:left;
    width:123px;
    background:#4daee1;
    height:23px;
    margin-top:11px;
    border-top-left-radius:8px 7px;
    border-top-right-radius:29px 100%;
    color:#fff;
    padding-left:21px;
}
.pro2 .pro-info>p a{
    float:right;
    font-size:12px;
    color:#1a66b3;
    margin-top:17px;
    margin-right:10px;
}   
.pro2 .pro-info>ul{
    border:1px solid #cacaca;
    border-top:none;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
}   
.pro2 .pro-info>ul li{
    float:left;
    width:163px;
    text-align:center;
    font-size:12px;
    height:300px;
}   
.pro2 .pro-info>ul li>a{
    width:163px;
    height:169px;
    display:block;
    margin-bottom:5px;
    margin-top:5px;
}
.pro2 .pro-info>ul li>span{
    line-height:19px;
}   
.pro2 .pro-info>ul li>p{
    color:#999;
    line-height:24px;
}   
.pro2 .pro-info>ul li>p b{
    color:#a10000;
}
.pro2 .pro-hot{
    float:left;
    margin-left:18px;
}   
.pro2 .pro-hot img:first-child{
    display:block;
    border:1px solid #cbcbcb;
    margin-top:13px;
    margin-bottom:10px;
}

工藝美術(shù)品html

<!-- 工藝美術(shù)品開始 -->
<div class="container">
    <div class="content pro1 pro3 clearfix">
        <h3>工藝美術(shù)品</h3>
        <ul>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c1.png"></a>
                    <div class="info">
                        <a href="#">好太太晾衣架&nbsp;鋁鈦合金&nbsp;升降雙桿</a>
                        <p>
                            自動換擋&nbsp;安全耐用<br>
                            穩(wěn)定性好&nbsp;抗氧化強
                        </p>
                        <span>
                            <b>239.00</b>
                            <s>￥386.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>99</span>件&nbsp;已售出<span>20</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c2.png"></a>
                    <div class="info">
                        <a href="#">威爾舒木地板12mm厚網(wǎng)絡(luò)超值特</a>
                        <p>
                            防滑抗污&nbsp;清理簡單
                            扣型緊密&nbsp;環(huán)保健康
                        </p>
                        <span>
                            <b>10.00</b>
                            <s>￥68.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>8</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c3.png"></a>
                    <div class="info">
                        <a href="#">好藝達高檔太空鋁三件套3500套</a>
                        <p>
                            經(jīng)典的設(shè)計風格<br>
                            油脂的產(chǎn)品品質(zhì)
                        </p>
                        <span>
                            <b>99.00</b>
                            <s>￥447.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>51</span>件</p>
                </div>
            </li>
            <li>
                <div class="pro-info">
                    <a href="#"><img src="images/c4.png"></a>
                    <div class="info">
                        <a href="#">好太太晾衣架&nbsp;8818&nbsp;曬被架</a>
                        <p>
                            自動換擋&nbsp;安全耐用
                            穩(wěn)定性好&nbsp;抗氧化強
                        </p>
                        <span>
                            <b>350.00</b>
                            <s>0.00</s>
                        </span>
                    </div>
                </div>
                <div class="shopping">
                    <button>立即購買</button>
                    <p>限量<span>100</span>件&nbsp;已售出<span>6</span>件</p>
                </div>
            </li>
        </ul>
        <div class="pro-news">
            <h4>建材商社</h4>
            <div class="textimg clearfix">
                <img src="images/subtitle.png">
                <p>在裝燈具時，如果裝上分控開關(guān)荣倾，可以省去很多煩惱。因為如果只有一個總開關(guān)</p>
            </div>
            <ul>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年骑丸，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年舌仍，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年通危，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年铸豁，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年菊碟，終于滿足小</a></li>
                <li><a href="#"><span>[采暖論壇]</span>精心洗選大半年节芥，終于滿足小</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 工藝美術(shù)品結(jié)束 -->

工藝美術(shù)品css

/* 工藝品 */
.pro3 .pro-news{
    border:none;
}
.pro3 .pro-news .textimg{
    margin-top:14px;
    color:#777;
}
.pro3 .pro-news .textimg img{
    float:left;
}
.pro3 .pro-news .textimg p{
    float:left;
    width:108px;
    font-size:12px;
    margin-left:7px;
    line-height:21px;
}   
.pro3 .pro-news>ul{
    list-style:none;
    padding:0;
    margin:0;
    height:auto;
}   
.pro3 .pro-news>ul>li>a{
    color:#444;
}
.pro3 .pro-news>ul>li>a>span{
    color:#999;
}

友情鏈接html

<!-- 友情鏈接開始 -->
<div class="container">
    <div class="content friendlink clearfix">
        <ul>
            <li>友情鏈接：</li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
            <li><a href="#">央視網(wǎng)盟</a></li>
        </ul>
    </div>
</div>
<!-- 友情鏈接結(jié)束 -->

友情鏈接css

/* 友情鏈接 */  
.friendlink{
    padding-top:23px;
    border-top:1px solid #ddd;
    margin-top:18px;
    padding-bottom:28px;
}
.friendlink ul li{
    float:left;
    margin-right:8px;
    font-size:12px;
    line-height:26px;
}
.friendlink ul li a{
    color:#666;
}

底部html

<!-- 底部開始 -->
<div class="container">
    <div class="content footer">
        <ul>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
            <li><a href="">關(guān)于我們</a></li>
        </ul>
        <p>版權(quán)所有2000-2012 服務熱線：0571-89938887 請與我們聯(lián)系：Service@BMlink 建材網(wǎng)會員互動群：153120106</p>
        <span>本站網(wǎng)絡(luò)實名：中間網(wǎng)本站通用網(wǎng)址：中國建材網(wǎng) 浙B2-20060159</span>
    </div>
</div>
<!-- 底部結(jié)束 -->

底部css

/* 底部 */    
.footer{
    border-top:3px solid #0a7ec3;
    text-align:center;
    padding-top:16px;
}
.footer ul{
    display:inline-block;
}
.footer ul li{
    float:left;
    font-size:12px;
}
.footer ul li:first-child a{
    border-left:none;
}
.footer ul li a{
    padding:0 10px;
    border-left:1px solid #ccc;
}   
.footer p{
    font-size:12px;
    line-height:38px;
}   
.footer span{
    font-size:12px;
}

最后編輯于：2023.07.27 20:57:32

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市逆害，隨后出現(xiàn)的幾起案子头镊，更是在濱河造成了極大的恐慌，老刑警劉巖魄幕，帶你破解...
沈念sama閱讀 218,858評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件相艇，死亡現(xiàn)場離奇詭異，居然都是意外死亡纯陨，警方通過查閱死者的電腦和手機坛芽，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,372評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門胁艰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來救恨，“玉大人捌年，你說我怎么就攤上這事苇经∮谥妫” “怎么了筐高？”我有些...
開封第一講書人閱讀 165,282評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵挽放，是天一觀的道長润讥。經(jīng)常有香客問我膘盖，道長胧弛，這世上最難降的妖魔是什么尤误？我笑而不...
開封第一講書人閱讀 58,842評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮结缚，結(jié)果婚禮上损晤，老公的妹妹穿的比我還像新娘。我一直安慰自己红竭，他們只是感情好尤勋，可當我...
茶點故事閱讀 67,857評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著茵宪，像睡著了一般最冰。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上稀火，一...
開封第一講書人閱讀 51,679評論 1贊 305
城市分裂傳說
那天暖哨，我揣著相機與錄音，去河邊找鬼凰狞。笑死篇裁，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的赡若。我是一名探鬼主播达布，決...
沈念sama閱讀 40,406評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼逾冬！你這毒婦竟也來了黍聂？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,311評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤身腻，失蹤者是張志新（化名）和其女友劉穎产还，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體霸株，經(jīng)...
沈念sama閱讀 45,767評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡雕沉，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,945評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了去件。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坡椒。...
茶點故事閱讀 40,090評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖尤溜，靈堂內(nèi)的尸體忽然破棺而出倔叼，到底是詐尸還是另有隱情，我是刑警寧澤宫莱，帶...
沈念sama閱讀 35,785評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布丈攒，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏巡验。R本人自食惡果不足惜际插，卻給世界環(huán)境...
茶點故事閱讀 41,420評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望显设。院中可真熱鬧框弛，春花似錦、人聲如沸捕捂。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,988評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽指攒。三九已至慷妙，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間允悦，已是汗流浹背膝擂。一陣腳步聲響...
開封第一講書人閱讀 33,101評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留隙弛，地道東北人猿挚。一個月前我還...
沈念sama閱讀 48,298評論 3贊 372
代替公主和親
正文我出身青樓，卻偏偏與公主長得像驶鹉，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子铣墨，可洞房花燭夜當晚...
茶點故事閱讀 45,033評論 2贊 355

css入門：day9—精靈圖-ps

一耙册、css精靈技術(shù)

二迂苛、滑動門效果

四、梅蘭練習

推薦閱讀更多精彩內(nèi)容