小米商城-题头2

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><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>
</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;
}
.trolley{
    float: right;
    padding: 12px;
    background-color: #424242;
}

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

ul a,
.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: 90%;
    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;
}
#s3 {
    margin-top: 2px;
}

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

}

pass

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