总结页面组件开发的思路与实现过程
就是把一个网站分为头部，中间，底部三个模块 先把每一个页面都写好然后在把他拼装成一个成品
顶部效果图
html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>全站头部导航</title><link rel="stylesheet" href="../../static/font/iconfont.css"><link rel="stylesheet" href="public_header.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>
```css
{
margin: 0;
padding: 0;
/参考线/
/outline: red dashed 1px;*/
}
body{
font-size: 13px;
background-color: #EBEBEB;
color: #222222;
}
a{
font-size: 13px;
/去除下划线/
text-decoration: none;
color: #404040;
}
li{
list-style: none;
}
```css/*引入公共样式文件*/@import "../public_teset.css";.public-header{height: 44px;background-color: black;padding: 0 20px;display: flex;}.public-header a{font-size: 13px;color: #f5f2f0;/*垂直居中*/line-height: 44px;padding: 0 10px;}.public-header > a:hover{background-color: #e9e9e9;color: black;}.public-header > span{margin-left: auto;}.public-header > span i{margin-right: 10px;}
手写作业
