html和css牛刀小試

時間  2019-12-13
標籤 html css 牛刀小試 欄目 HTML 简体版
原文   原文鏈接

html和css網上教程不少,這裏我也給你們一個網址:https://www.cnblogs.com/majj/javascript

今天心血來潮就模仿着小米的官網寫了部分代碼,效果圖以下:(本人故意加了個華爲廣告欄在最上方,表示支持華爲,哈哈哈)css

代碼以下:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="icon" href="./images/xm_t.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!--廣告欄位置-->
    <div class="site-top-banner">
        <a href="https://www.mi.com/">
        </a>
    </div>
    <!--頂部的導航欄-->
    <div class="site-top-bar">
        <div class="container clearfix">
            <div class="top-l">
                <a href="javascript:void(0)">小米商城</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">MIUI</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">IoT</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">雲服務</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">金融</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">有品</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">小愛開放平臺</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">企業團購</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">資質證照</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">協議規則</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">下載app</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">Select Region</a>
            </div>
            <div class="top-shop">
                <a href="javascript:void(0)">
                    <i class="iconfont">&#xe62b;</i>
                    購物車（
                    <span class="count">0</span>）
                </a>
                <div class="cart-menu">

                </div>
            </div>
            <div class="top-info">
                <a href="javascript:void(0)">登陸</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">註冊</a>
                <span class="sep">|</span>
                <a href="javascript:void(0)">消息通知</a>
            </div>
        </div>
    </div>
    <!--網站的頭部-->
    <div class="site-header">
        <div class="container clearfix">
            <div class="header-logo">
                <a href="javascript:void(0)">
                    <img src="./images/xm-logo.png" alt="小米logo" title="小米商城">
                </a>
            </div>
            <div class="header-nav">
                <ul class="nav-list">
                    <li class="nav-category">
                         <a class="link-category" href="#">
                            <span>所有商品</span>
                        </a>
                        <div class="site-category">
                            <ul class="site-category-list">
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        手機&nbsp;電話卡
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        電視&nbsp;盒子
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        筆記本&nbsp;平板
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        家電&nbsp;插線板
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        出行&nbsp;穿戴
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        智能&nbsp;路由器
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        電源&nbsp;配件
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        健康&nbsp;兒童
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        耳機&nbsp;音箱
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                                <li class="category-item">
                                    <a href="javascript:void(0)" class="title">
                                        生活&nbsp;箱包
                                        <i class="iconfont">&#xe748;</i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span class="text">小米手機</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>Redmi 紅米</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>電視</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>筆記本</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>家電</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>路由器</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>智能硬件</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>服務</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="link" href="#">
                            <span>社區</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="header-search">
                 <form class="search-form" action="">
                    <label for="search"></label>
                    <input class="search-text" type="text" id="search">
                    <div class="search-text-value">
                        <a href="javascript:void(0)">小米9</a>
                        <a href="javascript:void(0)">小米9 SE</a>
                    </div>
                    <input class="search-btm iconfont" type="submit" value="&#xe62f;">
                 </form>
            </div>
        </div>
    </div>
    <!--頭部下方輪播圖-->
    <div class="site-slide">
        <div class="container site-lunbo">
            <a href="javascript:void(0)">
                <img src="./images/lunbo1.jpg" alt="">
            </a>
            <a class="ui-prev" href="javascript:void(0)">上一張</a>
            <a class="ui-next" href="javascript:void(0)">下一張</a>
            <div class="ui-pager">
                <span class="ui-pager-item">
                    <a href="javascript:void(0)">1</a>
                </span>
                <span class="ui-pager-item">
                    <a href="javascript:void(0)">2</a>
                </span>
                <span class="ui-pager-item">
                    <a href="javascript:void(0)">3</a>
                </span>
                <span class="ui-pager-item">
                    <a href="javascript:void(0)">4</a>
                </span>
                <span class="ui-pager-item">
                    <a href="javascript:void(0)">5</a>
                </span>
            </div>
        </div>
    </div>
    <!--中間銜接home部分-->
    <div class="home-hero-sub">
        <div class="container clearfix">
            <div class="home-l">
                <ul class="home-l-list clearfix">
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe600;</i>
                            選購手機
                        </a>
                    </li>
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe607;</i>
                            企業團購
                        </a>
                    </li>
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe604;</i>
                            F碼通道
                        </a>
                    </li>
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe60e;</i>
                            米粉卡
                        </a>
                    </li>
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe60f;</i>
                            以舊換新
                        </a>
                    </li>
                    <li class="top-l">
                        <a href="#">
                            <i class="iconfont">&#xe601;</i>
                            話費充值
                        </a>
                    </li>
                </ul>
            </div>
            <div class="home-r">
                <ul class="clearfix">
                    <li class="first">
                        <a href="javascript:void(0)">
                            <img src="./images/home-r-1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="./images/home-r-2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <img src="./images/home-r-3.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>

        </div>

    </div>
    <!--廣告中間展現-->
    <div class="home-banner-box">
        <div class="container">
            <a href="">
                <img src="./images/Redmi-7A.jpg" alt="">
            </a>
        </div>
    </div>
    <!--頁面page內容展現-->
    <div class="page-main">
        <div class="container">
            <div class="page-phone">
                <div class="box-hd">
                    <h2 class="title">手機</h2>
                    <div class="more" >
                        <a href="" class="more-link">
                            查看所有
                            <i class="iconfont">&#xe602;</i>
                        </a>
                </div>
                </div>
                <div class="box-bd clearfix">
                    <div class="box-bd-l">
                        <ul>
                            <li>
                                <a href="javascript:void(0)">
                                    <img src="./images/page-phone-left.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="box-bd-r">
                        <ul class="box-bd-rlist">
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-1.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米9 6GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">驍龍855，索尼4800萬超廣角微距三攝</p>
                                <p class="price">
                                    <span class="num">2999</span>
                                    元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-2.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米9 SE 6GB+64GB
                                    </a>
                                </h3>
                                <p class="desc">索尼4800萬超廣角三攝，驍龍712</p>
                                <p class="price">
                                    <span class="num">1999</span>
                                    元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-3.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        Redmi Note 7 3GB+32G
                                    </a>
                                </h3>
                                <p class="desc">4800萬拍照千元機，18個月超長質保</p>
                                <p class="price">
                                    <span class="num">2999</span>
                                    元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-4.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米Play 4GB+64GB
                                    </a>
                                </h3>
                                <p class="desc">5.84"小水滴全面屏，後置1200萬 AI 雙攝</p>
                                <p class="price">
                                    <span class="num">2999</span>
                                    元
                                </p>
                                <div class="flag flag-new">新品</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-5.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米8青春版6GB+64GB
                                    </a>
                                </h3>
                                <p class="desc">潮流鏡面漸變色，2400萬自拍旗艦</p>
                                <p class="price">
                                    <span class="num">1499</span>
                                    元
                                </p>
                                <div class="flag">減 200 元</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-6.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米8 SE 6GB+64GB
                                    </a>
                                </h3>
                                <p class="desc">三星 AMOLED 全面屏，驍龍710</p>
                                <p class="price">
                                    <span class="num">1599</span>
                                    元
                                </p>
                                <div class="flag">享8折</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-7.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        小米6X 6GB+128GB
                                    </a>
                                </h3>
                                <p class="desc">輕薄美觀的拍照手機</p>
                                <p class="price">
                                    <span class="num">1599</span>
                                    元
                                </p>
                                <div class="flag">享8折</div>
                            </li>
                            <li class="box-bd-item">
                                <div class="figure-img">
                                    <a href="">
                                        <img src="./images/page-phone-r-8.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="title">
                                    <a href="javascript:void(0)">
                                        紅米6A 2GB+16GB
                                    </a>
                                </h3>
                                <p class="desc">12nm高性能處理器，1300萬高清相機</p>
                                <p class="price">
                                    <span class="num">2999</span>
                                    元
                                </p>
                                <div class="flag">減 50 元</div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    <!--電視廣告中間展現-->
    <div class="home-banner-box">
        <div class="container">
            <a href="">
                <img src="./images/618xm-ds.jpg" alt="">
            </a>
        </div>
    </div>
    </div>
    <!--右側懸浮欄 & 返回頂部-->
    <div class="home-right-bar">
        <div class="bar-l">
            <ul class="bar-top">
                <li class="bar-sort">
                    <a href="javascript:void(0)">
                        <i class="iconfont">&#xe651;</i>
                        <p class="bar-text">手機APP</p>
                    </a>

                </li>
                <li class="bar-sort">
                    <a href="javascript:void(0)">
                        <i class="iconfont">&#xe611;</i>
                        <p class="bar-text">我的中心</p>
                    </a>

                </li>
                <li class="bar-sort">
                    <a href="javascript:void(0)">
                        <i class="iconfont">&#xe605;</i>
                        <p class="bar-text">售後服務</p>
                    </a>

                </li>
                <li class="bar-sort">
                    <a href="javascript:void(0)">
                        <i class="iconfont">&#xe638;</i>
                        <p class="bar-text">聯繫客服</p>
                    </a>
                </li>
                <li class="bar-sort">
                    <a href="javascript:void(0)">
                        <i class="iconfont">&#xe62b;</i>
                        <p class="bar-text">購物車</p>
                    </a>
                </li>
            </ul>
            <div class="bar-sort bar-totop">
                <a class="" href="#">
                    <i class="iconfont">&#xe64a;</i>
                    <p class="bar-text">回頂部</p>
                </a>
            </div>
        </div>

    </div>
    <!--網站底部-->
    <div class="site-footer">
        <div class="container">
            <div class="footer-service">
                <ul class="list-service clearfix">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="iconfont">&#xe605;</i>
                            預定維修服務
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="iconfont">&#xe603;</i>
                            7天無理由退貨
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="iconfont">&#xe606;</i>
                            15天免費換貨
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="iconfont">&#xe64d;</i>
                            滿150元包郵
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="iconfont">&#xe6dc;</i>
                            520餘家售後網點
                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>幫助中心</dt>
                    <dd>
                        <a href="javascript:void(0)">帳號管理</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">購物指南</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">訂單操做</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>服務支持</dt>
                    <dd>
                        <a href="javascript:void(0)">售後政策</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">自助服務</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">相關下載</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>線下門店</dt>
                    <dd>
                        <a href="javascript:void(0)">小米之家</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">服務站點</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">受權體驗店</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>關於小米</dt>
                    <dd>
                        <a href="javascript:void(0)">瞭解小米</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">加入小米</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">投資者關係</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>關注咱們</dt>
                    <dd>
                        <a href="javascript:void(0)">新浪微博</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">官方微信</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">聯繫咱們</a>
                    </dd>
                </dl>
                <dl class="col-links">
                    <dt>特點服務</dt>
                    <dd>
                        <a href="javascript:void(0)">F 碼通道</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">禮物碼</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">防僞查詢</a>
                    </dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">
                        400-100-5678
                    </p>
                    <p>
                        週一至週日 8:00-18:00 <br>
                        （僅收市話費）
                    </p>
                    <a class="small-btm" href="javascript:void(0)">
                        <i class="iconfont">&#xe650;</i>
                        聯繫客服
                    </a>
                </div>
            </div>

        </div>
    </div>
    <!--網頁最底下一句話-->
    <div class="site-info">
        <div class="container">
            <div class="slogan">探索黑科技,小米爲發燒而生</div>
        </div>
    </div>

</body>
</html>

css代碼以下:java

/*清除默認樣式*/
*{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
input{
    border: 0;
    outline: none;
}
/*清除浮動*/
.clearfix:after{
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}
/*設置body的初始屬性*/
body{
    color: #333;
    font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
/*廣告欄位置樣式*/
.site-top-banner{
    width: 100%;
    height: 90px;
    background: url("../images/huawei-gg.jpg") no-repeat center top;
}
.site-top-banner a{
    display: block;
    height: inherit;
    width: inherit;
}


/*網頁最上方導航欄*/
.site-top-bar{
    width: 100%;
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    background-color: #333;
}
.container{
    width: 1226px;
    margin: 0 auto;
}
/*網頁最上方導航欄左側*/
.site-top-bar .top-l{
    float: left;
}
.site-top-bar a{
    color: #b0b0b0;
    text-align: center;
}
.site-top-bar a:hover{
    color: #fff;
}
.site-top-bar .sep{
    color: #424242;
    margin: 0 0.5em;
}
/*網頁最上方導航欄右側*/
.site-top-bar .top-shop{
    float: right;
    margin-left: 15px;
    position: relative;
}
.site-top-bar .top-shop .iconfont{
    position: relative;
    top: 1px;
}
.site-top-bar .top-shop a{
    display: block;
    width: 120px;
}
.site-top-bar .top-shop a:hover{
    background-color: #fff;
    color: #ff6700;
}
/*導航欄右側購物車*/
.site-top-bar .cart-menu{
    position: absolute;
    background-color: #fff;
    color: #424242;
    width: 316px;
    height: 94px;
    top: 40px;
    right: 0;
    border: 1px solid #eeeeee;
    display: none;
    z-index: 10;
}
.site-top-bar .top-shop:hover .cart-menu{
    display: block;
}
.site-top-bar .top-info{
    float: right;
}


/*網頁頭部header樣式*/
.site-header{
    width: 100%;
    height: 100px;
}
/*網頁頭部logo樣式*/
.site-header .header-logo{
    float: left;
    width: 62px;
}
.site-header .header-logo a{
    display: block;
    margin-top: 22px;
}
/*網頁頭部中間樣式*/
.site-header .header-nav{
    float: left;
    width: 850px;
}
.site-header .nav-list{
    width: 100%;
    padding: 12px 0 0 30px;
}
.site-header .nav-list .nav-category{
    width: 127px;
    padding-right: 15px;
    position: relative;
}
.site-header .nav-list .nav-category .link-category{
    padding: 26px 0 38px;
    display: block;
    visibility: hidden;
}
.site-header .nav-list>li{
    float: left;
}
.site-header .nav-item .link{
    padding: 26px 10px 38px;
    color: #333333;
    display: block;
    font-size: 16px;
}
.site-header .nav-item .link:hover{
    color: #ff6700;
}
/*網頁頭部右側樣式*/
.site-header .header-search{
    float: right;
    width: 296px;
    margin-top: 25px;
}
.header-search .search-form{
    width: 296px;
    height: 50px;
    position: relative;
    z-index: 2;
}
.header-search .search-form input{
    border: 1px solid #e0e0e0;
}
.header-search>.search-form:hover input{
    border: 1px solid #999;
}
.header-search .search-text{
    width: 223px;
    height: 48px;
    padding: 0 10px;
}
.header-search .search-text-value{
    position: absolute;
    top: 14px;
    right: 62px;
    font-size: 12px;
    text-align: center;
}
.header-search .search-text-value a{
    background-color: #eee;
    padding: 0 5px;
    margin-left: 5px;
    color: #757575;
}
.header-search .search-text-value a:first-child{
    margin-right: -4px;
}
.header-search .search-text-value a:hover{
    background-color: #ff6700;
    color: #fff;
}
.header-search .search-btm{
    width: 52px;
    height: 50px;
    position: absolute;
    right: 0;
    font-size: 24px;
    background-color: #fff;
}
.header-search .search-btm:hover{
    background-color: #ff6700;
    color: #fff;
}


/*site-category頭部下方左側導航欄*/
.site-category{
    position: absolute;
    width: 234px;
    height: 460px;
    background-color: rgba(0,0,0,0.6);
    top: 88px;
    left: -92px;
    z-index: 30;
}
.site-category .site-category-list{
    padding: 20px 0;
    height: 420px;
    font-size: 14px;
    color: #fff;
}
.site-category .category-item{
    position: relative;
}
.site-category .category-item:hover{
    background-color: #ff6700;
}
.site-category .site-category-list .title{
    display: block;
    height: 42px;
    line-height: 42px;
    padding-left: 30px;
    color: #fff;
}
.site-category .site-category-list a i{
    position: absolute;
    right: 20px;
    color:rgba(255,255,255,0.5);
    font-size: 12px;
}


/*頭部下方輪播圖*/
.site-slide .site-lunbo{
    position: relative;
}
.site-slide a{
    display: block;
}
.site-slide a img{
    width: 100%;
    height: 460px;
}
/*頭部下方輪播圖的左右鍵*/
.site-slide .ui-prev,.ui-next{
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 41px;
    height: 69px;
    text-indent: -9999px;
    overflow: hidden;
}
.site-slide .ui-prev{
    left:234px;
    background: url("../images/icon-slides.png") no-repeat -85px 0;
}
.site-slide .ui-prev:hover{
    background-position: 0 0;
}
.site-slide .ui-next{
    right: 0;
    background: url("../images/icon-slides.png") no-repeat -130px 0;
}
.site-slide .ui-next:hover{
    background-position: -42px 0;
}
/*頭部下方輪播圖下方的小圓圈*/
.site-slide .ui-pager{
    width: 400px;
    position: absolute;
    right: 24px;
    bottom: 22px;
    font-size: 12px;
    text-align: right;
}
.site-slide .ui-pager .ui-pager-item{
    display: inline-block;
}
.site-slide .ui-pager .ui-pager-item:hover a{
    border-color: rgba(0,0,0,0.4);
    background-color: rgba(255,255,255,0.4);
}
/*因爲沒有js就先讓第一個默認被選中*/
.site-slide .ui-pager .ui-pager-item:first-child a{
    border-color: rgba(0,0,0,0.4);
    background-color: rgba(255,255,255,0.4);
}
.site-slide .ui-pager .ui-pager-item a{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 10px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
    margin: 0 4px;
    text-align: left;
    border: 2px solid #fff;
    border-color: rgba(255,255,255,0.3);
}


/*中間銜接home部分*/
.home-hero-sub{
    margin-top: 15px;
}
/*中間銜接home左側部分*/
.home-hero-sub .home-l{
    float: left;
    width: 234px;
}
.home-hero-sub .home-l-list{
    display: block;
    background-color: #5f5750;
    padding: 3px;
    text-align: center;
    font-size: 12px;
}
.home-hero-sub .home-l-list .top-l{
    position: relative;
    float: left;
    width: 70px;
    height: 82px;
    padding: 0 3px;
}
.home-hero-sub .home-l-list .top-l:before{
    position: absolute;
    content: "";
    top: -1px;
    left: 6px;
    width: 64px;
    height: 1px;
    background: #665e57;
}
.home-hero-sub .home-l-list .top-l:after{
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 1px;
    height: 70px;
    background: #665e57;
}
.home-hero-sub .top-l a:hover{
    color: #fff;
}
.home-hero-sub .home-l a{
    display: block;
    padding-top: 18px;
    color: rgba(255,255,255,0.7)
}
.home-hero-sub .home-l a i{
    display: block;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    margin-bottom: 4px;
}
/*中間銜接home右側部分*/
.home-hero-sub .home-r{
    float: left;
}
.home-hero-sub .home-r li{
    float: left;
    margin-left: 15px;
}
.home-hero-sub .home-r li.first{
    margin-left: 14px;
}
.home-hero-sub .home-r li img{
    width: 316px;
    height: 170px;
}
.home-hero-sub .home-r li  a{
    display: block;
}


/*紅米廣告中間展現*/
.home-banner-box{
    margin: 20px 0 42px;
}
.home-banner-box a img{
    width: 1226px;
}


/*頁面page內容展現*/
.page-main{
    background-color: #f5f5f5;
    padding-top: 22px;
}
/*頁面page內容header部分*/
.page-main .box-hd{
    position: relative;
}
.page-main .box-hd .title{
    line-height: 58px;
    font-size: 22px;
    font-weight: 200;
}
.page-main .box-hd .more{
    position: absolute;
    right: 0;
    top: 0;
}
.page-main .box-hd .more a{
    font-size: 16px;
    line-height: 58px;
    color: #424242;
}
.page-main .box-hd .more a:hover{
    color: #ff6700;
}
.page-main .box-hd .more a:hover i{
    color: #ff6700;
}
.page-main .box-hd .more a i{
    color: #b0b0b0;
    font-size: 20px;
    padding: 4px;
}
/*頁面page內容body左邊部分*/
.page-main .box-bd .box-bd-l{
    width: 234px;
    float: left;
}
.page-main .box-bd li:hover{
    position: relative;
    top: -3px;
    box-shadow: 2px 2px 2px #eee;
}
.page-main .box-bd ul{
    height: 614px;
}
.page-main .box-bd .box-bd-l a{
    display: block;
}
.page-main .box-bd .box-bd-l img{
    width: 234px;
}
/*頁面page內容body右邊部分*/
.box-bd-r{
    width: 992px;
    float: left;
    /*margin-left: 14px;*/
}
.box-bd-r .box-bd-item{
    float: left;
    width: 234px;
    margin-left: 14px;
    margin-bottom: 14px;
    background-color: #fff;
    text-align: center;
    position: relative;
    padding: 20px 0;
}
.box-bd-r .box-bd-item .figure-img{
    height: 160px;
    width: 160px;
    margin: 0 37px 18px;
}
.box-bd-r .box-bd-item .figure-img a{
    display: block;
}
.box-bd-r .box-bd-item .figure-img img{
    height: 160px;
    width: 160px;
}
.box-bd-r .box-bd-item .title{
    font-size: 14px;
    font-weight: 400;
    margin: 0 10px 2px;
}
.box-bd-r .box-bd-item .title a{
    color: #333333;
}
.box-bd-r .box-bd-item .desc{
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.box-bd-r .box-bd-item .price{
    color: #ff6700;
    margin: 0 10px 12px;
}
.box-bd-r .box-bd-item .flag{
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #e53935;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    width: 64px;
    color: #fff;
    margin-left: -32px;
}
.box-bd-r .box-bd-item .flag-new{
    background-color: #83c44e;
}


/*右側懸浮欄 & 返回頂部*/
.home-right-bar{
    position: fixed;
    right: 0;
    top: 130px;
    width: 80px;
    height: 200px;
    background-color: #f00;
}
.home-right-bar .bar-sort{
    height: 90px;
    width: 82px;
    text-align: center;
    border: 1px solid #f5f5f5;
    background-color: #fff;
}
.home-right-bar .bar-sort:hover a{
    color: #ff6700;
}
.home-right-bar .bar-sort a{
    color: #757575;
    display: block;
    margin-top: 10px;
}
.home-right-bar .bar-sort i{
    font-size: 30px;
}
.home-right-bar .bar-sort p{
    margin-top: 4px;
}
.home-right-bar .bar-totop{
    margin-top: 20px;
}


/*網頁底部*/
.footer-service{
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
}
.site-footer .list-service li:first-child{
    border-left:none;
}
.site-footer .list-service li{
    float: left;
    font-size: 16px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 19.8%;
    border-left: 1px solid #e0e0e0;
}
.site-footer .list-service li a{
    color: #616161;
}
.site-footer .list-service li a i{
    font-size: 24px;
    line-height: 24px;
    margin-right: 6px;
    vertical-align: -4px;
    /*position: relative;*/
    /*top: 4px;*/
}

.footer-links{
    padding: 40px 0;
}
.footer-links .col-links{
    float: left;
    width: 160px;
}
.footer-links .col-links dt{
    margin: -1px 0 26px;
    color: #424242;
    line-height: 1.25;
}
.footer-links .col-links dd{
    margin-top: 10px;
    font-size: 12px;
}
.footer-links .col-links dd a{
    color: #757575;
}
.footer-links .col-contact{
    float: right;
    width: 251px;
    height: 112px;
    color: #616161;
    border-left: 1px solid #e0e0e0;
    text-align: center;
}
.footer-links .col-contact .phone{
    color: #ff6700;
    font-size: 22px;
    margin-bottom: 5px;
    line-height: 1em;
}
.footer-links .col-contact p{
    font-size: 12px;
    margin-bottom: 16px;
}
.footer-links .col-contact .small-btm{
    display: inline-block;
    width: 118px;
    height: 28px;
    border: 1px solid #ff6700;
    color: #ff6700;
    background: #fff;
    line-height: 28px;
    font-size: 12px;
}


/*網頁最底下一句話*/
.site-info .slogan{
    margin: 30px auto;
    text-align: center;
    color: #b0b0b0;
    line-height: 22px;
    background: #fff url("../images/slogan.png") no-repeat center 0;
    overflow: hidden;
    text-indent: -9999px;
}

完整代碼git地址:https://github.com/leixiaobai/web/tree/master/mi_sitegit

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程