手写flex项目上的六个属性

组件效果图

头部html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全站头部导航</title>
    <link rel="stylesheet" href="public-header.css">
    <link rel="stylesheet" href="../../../static/font/iconfont.css">
</head>
<body>
<div class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">网站首页</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont icon-icon_group"></i>登录</a>
        <a href=""><i class="iconfont icon-icon_group"></i>注册</a>
    </span>
</div>
</body>
</html>

头部组件css代码

.public-header{
    height:50px;
    background-color: #282c31;
    padding:0 30px;
    display:flex;
}
.public-header a{
    line-height:50px;
    padding:0 20px;
}
.public-header>a:hover{
    background-color:#3a87ad;
    color: #55a532;
}
.public-header>span{
    margin-left:auto;
}
.public-header>span i{
    padding-right: 15px;
}

初始化全局

@import"../public-reset.css";
*{
    margin:0;
    padding:0;
    /*outline:1px dashed rosybrown;*/
}
body{
    font-size:20px;
    color:#282c31;
    background-color:#55ce9f;
    /*height:60px;*/
}
a{
    color:lavender;
    /*text-decoration: none;*/
    font-size:15px;
}

二手交易

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="piblic-headerline.css">
</head>
<body>
<div class="public-headline">
    <span>二手交易</span>
</div>
</body>
</html>

二手交易组件css代码

@import"../public-reset.css";
.public-headline span{
    font-size:60px;
    font-weight:bolder;
    padding-bottom:10px;
    border-bottom:3px solid #bd2c00;
}
.public-headline{  text-align:center;}

12.25 手写flex项目上的六个属性-页面组件开发思路和总结-导航代码-php10期线上班

手写flex项目上的六个属性

组件效果图

头部html

总结

页面组件开发，先建立一个初始化全局的css文件，在建立一个与html文档名称相同的css文件，把初始化全局的css文件引入，开始写布局，，再把写好的布局放入html文档，写好的组件可以方便进行复用，新建的html css文件名称一致

相关文章