flex布局——京东商城头部+导航

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">
        <div class="menu iconfont icon-caidan"></div>
        <div class="int">
            <span>JD</span>
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="t恤">
        </div>
        <div class="login">登录</div>
    </div>
    <div class="main">
        <nav>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
            <a href="">
                <img src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png" alt="图片">
                <div>京东超市</div>
            </a>
        </nav>
    </div>
    <div class="footer">footer</div>
</body>
</html>

CSS部分

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
li{
    list-style:none;
}
a{
    color:#7b7b7b;
    text-decoration:none;
}
body{
    background-color:#f6f6f6;
}
html{
    font-size:10px;
}
@import 'reset.css';
.header{
    background-color:#e43130;
    color:white;
    height:4rem;
    display:flex;
    align-items:center;
    text-align:center;
    font-size:1.4rem;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:2;
}
.menu,.login{
    flex:1;
    height:3rem;
    line-height: 3rem;
}
.int{
    flex:6;
    height:3rem;
    line-height: 3rem;
    background-color:white;
    border-radius:3rem;
    display:flex;
    align-items:center;
}
.int span{
    font-size:2rem;
    height:2rem;
    line-height: 2rem;
    color:red;
    font-weight:800;
    flex:0 1 4rem;
    border-right:1px solid #999;
}
.int i{
    color:#999;
    flex:0 1 4rem;
}
.int input{
    flex:4;
    border:none;
    border-radius:3rem;
    outline:none;
}
.main{
    position:absolute;
    top:4.4rem;
    bottom:4.4rem;
    left:0;
    right:0;
    background:#007aff;
}
/*nav导航*/
nav{
    display:flex;
    flex-flow:row wrap;
    text-align:center;
    background-color:white;
    margin: 0 1rem;
    border-radius:2rem;
}
nav a{
    width:20%;
    padding:1rem;
}
nav a img{
    width:4rem;
}
.footer{
    color:#666;
    background-color:#fafafa;
    height:4.4rem;
    box-shadow:0 0 3px #999;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
}

相关文章