1225组件flex作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="static/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
    <div class="public-header">
        <a href="#">网站首页</a>
        <a href="#">我的文档</a>
        <a href="#">说明</a>
        <a href="#">奇奇怪怪</a>
        <span>
            <a href="#"><i class="iconfont icon-huiyuan2"></i>注册</a>
            <a href="#">登陆</a>
        </span>
    </div>
</body>
</html>

@import url('public/public_reset/public-reset.css');
@import url('public/public_header/public-header.css');
/*header部分*/
.public-header{
    background: black;
    height: 40px;
    padding:0 25px;
    display: flex;
    flex-flow: nowrap row;
}
.public-header a{
    line-height: 40px;
    color: white;
    padding: 0 10px;
}
.public-header span{
    margin-left: auto;
}
.public-header span i{
    padding-right: 5px;
}
.public-header > a:hover{
    background: white;
    color: black;
}
/*reset*/
*{
    margin: 0;
    padding: 0;
    outline: 1px dashed red;
}
body{
    font-size: 13px
    color: #555555;
    background: #efefef;
}
a{
    font-size: 13px;
    color: #404040;
    text-decoration: none;
}
li{
    list-style: none;
}

组件化布局
个人认位组件化的好处最直接的就是一种布局思路，这种布局思路可以增强代码的重复率！你甚至可以在空闲的时候打造一手你自己的专属组件。在你学会了less后再配合这种布局思路，就可以更加灵活更加快捷的布局页面！

相关文章