小米商城-题头1

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>

</body>
</html>

css

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

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

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;
}

pass

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