小米商城-题头3

html

<!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>

css

* {
    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

pass

posted on 2018-03-15 14:13 浮槎北溟阅读(142) 评论(0) 编辑收藏举报