组件就是方便一个网站，可以多个不同的页面重复使用一样的代码，和一样的css样式。可以增加一个网站开发的速度。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="public_header.css">
<link rel="stylesheet" href="../../../static/font/iconfont.css">
<title>全站头部导航</title>
</head>
<body>
<div class="public-header">
<a href="">网站首页</a>
<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>
css
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
color: #555555;
background-color: #efefef;
}
a{
color: #404040;
text-decoration: none;
font-size: 13px;
}
li{
list-style: none;
}
css
@import “../../public_reset.css”;
.public-header{
height: 44px;
background-color: black;
padding: 0 20px;
display: flex;flex-flow: row nowrap;
}
.public-header a {
line-height: 44px;
padding: 0 10px;
color: #cccccc;
}
.public-header > a:hover{
background-color: #cccccc;
color: black;
}
.public-header>span{
margin-left: auto;
}
.public-header>span i{
font-size: 16px;
color: #cccccc;
padding-right: 10px;
}
