收藏
天蓬老师批改状态：合格
老师批语：作业能完成就好, 不一定非得上课前...
@import语法,实现页面组件的组装@import基本上可以完成了@import + Grid创建组件库：
components
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><!-- 导入CSS样式表--><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; /内边距/
/outline: 1px dashed red;/ /轮廓线*/
}
body{
font-size: 13px;
font-family: Arial; /字体/
color: #555555;
background-color: #efefef;
}
a{
color: #404040; /前景色/
text-decoration: none; /*下划线*/font-size: 13px;
}
li{
list-style: none; /黑点去掉/
}
```## 导行CSS样式```CSS/*导入元素的公共初始化样式表*/
@import “../../public_reset.css”;
.public-header{
height: 44px;
background-color: black;
padding: 0 20px; /左右不要太靠边/
display: flex; /*转为flex盒子*/flex-flow: row nowrap; /*水平，不换行*/
}
.public-header a{ /.public-header a，防止重复类名/
line-height: 44px; /行高/
color: #cccccc;
padding: 0 10px; /公开/
}
.public-header > a:hover{ /鼠标/
background-color: #fff;
color: black;
}
.public-header span{
margin-left: auto; /右对齐，flex内float无效/
}
.public-header > span i{
font-size: 16px;
color: #cccccc;
padding-right: 10px;
}
```
第一次在上课前完成上节课作业，加油。
抽空还需要多联系。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
