小米商城-題頭3

htmlcss

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="./小米.css">
</head>
<body>

<div class="nav clearfix">
    <div class="container clearfix">
        <ul class="nav-left">
            <li id="ll"><a href="">小米商城</a></li>
            <li><a href="">MIUI</a></li>
            <li><a href="">IoT</a></li>
            <li><a href="">雲服務</a></li>
            <li><a href="">水滴</a></li>
            <li><a href="">金融</a></li>
            <li><a href="">有品</a></li>
            <li><a href="">Select Region</a></li>
        </ul>
        <!--<div class="c2"></div>-->
        <div class="trolley"><a href="">購物車</a></div>

        <ul class="nav-right">
            <li><a href="">消息通知</a></li>
            <li><a href="">註冊</a></li>
            <li><a href="">登陸</a></li>
        </ul>
    </div>
</div>

<div class="clearfix" id="s1">
    <div class="container clearfix" id="s2">
        <div id="s3"><img src="img/mi.png" alt=""></div>
        <div id="s4"><img src="img/biao.png" alt=""></div>
        <ul id="s5">
            <li><a href="">小米手機</a></li>
            <li><a href="">紅米</a></li>
            <li><a href="">電視</a></li>
            <li><a href="">筆記本</a></li>
            <li><a href="">盒子</a></li>
            <li><a href="">新品</a></li>
            <li><a href="">路由器</a></li>
            <li><a href="">智能硬件</a></li>
            <li><a href="">服務</a></li>
            <li><a href="">社區</a></li>
        </ul>
        <div id="s6">
            <input id="si1" type="image" src="img/button.png">
            <input id="si2" type="text">
        </div>
    </div>
</div>

<div class="clearfix" id="t1">
    <div class="container clearfix" id="t2">
        <ul id="t3">
            <li><span> &gt;</span><a href="">手機 電話卡</a></li>
            <li><span> &gt;</span><a href="">電視 盒子</a></li>
            <li><span> &gt;</span><a href="">筆記本</a></li>
            <li><span> &gt;</span><a href="">智能 家電</a></li>
            <li><span> &gt;</span><a href="">健康 家居</a></li>
            <li><span> &gt;</span><a href="">出行 兒童</a></li>
            <li><span> &gt;</span><a href="">路由器 手機配件</a></li>
            <li><span> &gt;</span><a href="">移動電源 插線板</a></li>
            <li><span> &gt;</span><a href="">耳機 音箱</a></li>
            <li><span> &gt;</span><a href="">生活 米兔</a></li>
        </ul>
        <div id="t4">
            <img src="img/picture.jpg" alt="">
        </div>
    </div>
</div>

</body>
</html>

 

csshtml

* {
    margin: 0;
    vertical-align:middle;
}

.nav {
    background-color: black;
    font-size: 13px;
    font-weight:bold;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul.nav-left > li {
    float: left;
    padding: 12px;
}
/*左對齊*/
#ll{
    padding: 12px 12px 12px 0px;
}
.trolley{
    float: right;
    padding: 12px;
    background-color: #424242;
}

ul.nav-right > li {
    float: right;
    padding: 12px;
}

ul a,
ul span,
.trolley a{
    color: #b0b0b0;
    text-decoration: none;
    display:block;
}


.trolley:hover{
    background-color: white;
}
.trolley:hover a{
    color:red;
}

ul a:hover {
    color: #fff;
}

/*清除  浮動的反作用*/
.clearfix:after {
    content: "";
    display: block;
    clear: left;
}
.container {
    width: 1350px;
    margin: 0 auto;
}

/*第二行*/
#s5 a:hover {
    color:red;
}
#s1{
    font-size:15px;
    font-weight:bold;

}
#s5>li{
    float: left;
    padding: 10px;
    margin-top: 22px;
}
/*第一個圖片左對齊*/
#s3,
#s4{
    float: left;
    padding: 10px 10px 10px 0px;
}
#s3 {
    margin-top: 2px;
}

#si1,
#si2{
    float:right;
    padding: 11px;
    height:25px;
    border:1px solid red;
    margin-top: 18px;

}

/*第三行*/
#t3{
    float: left;
    background-color: dimgrey;
    font-size: 15px;
    font-weight:bold;
    width: 16.5%;
    /*爲了縮小多種瀏覽器顯示差距,高度設定值*/
    height: 490px;
    margin-bottom: 5px;
    margin-top: 5px;
    border-top:15px solid dimgrey;
    border-bottom:15px solid dimgrey;
}
#t3 a{
    padding: 15px;
    color:white;
}
#t3 span{
    float: right;
    padding: 15px;
    color:white;
}
#t3 li:hover{
    background: coral;
}
#t4{
    float:right;
    width: 83.5%;
    margin-bottom: 5px;
    margin-top: 5px;
}
#t4 img{
    /*圖片充滿整個div*/
    width: 100%;
}

 

img瀏覽器

passspa

相關文章
相關標籤/搜索