Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:不错, 继续努力
components
)小结:1.组件化开发就是把一个页面拆分成最小的功能块,在写网页是再通过把各个功能块组装起来构成页面。这样可以减少重复工作。
2.组件化开发注意点:对文件夹的管理,文件的命名注意,比较容易记忆,这样再以后利用是可以快速找到文件;
编程约定,@import
语法实现页面的组装;
是一个组件必须使用一个独立无二的类名class。
最大的意义在于他的复用性
Flex
弹性盒子元素的六个属性
.item{
flex-basis:<legth>; /*可以是数值和百分比*/
flex-basis:auto; /*默认值,原始宽度*/
}
.item{
flex-grow:<number>; /*放大的数值,默认值是0*/
}
.item{
flex-shrink:<mumber>;/*缩小的数值,默认值是1*/
}
flex:0 1 auto; 等价于 flex:initial;
flex:auto; 等价于 flex:1 1 auto; 等价于 flex:2;
flex:none; 等价于 flex:0 0 auto;
.item{
order:<integer>; /*排列数值,默认值为0*/
}
align-self
属性定义了单个项目再纵轴上的对齐方式,可以覆盖align-items
定义的属性,默认值为auto即继承父元素的align-items
属性,如果没有父元素,等同于stretch。
.tiem{
align-self:auto; /*默认值,继承父元素align-items属性*/
align-self:flex-start; /*交叉轴开始对齐*/
align-self:flex-end; /*交叉轴结束对齐*/
align-self:center; /*交叉轴中间对齐*/
align-self:baseline; /*交叉轴第一列基线*/
align-self:stretch; /*项目的边距盒的尺寸尽可能接近所在行的尺寸*/
}
*{
margin:0;
padding:0;
outline: 1px dashed red;
}
body{
font-size: 13px;
color:#555;
background-color:#efefef;
}
a{
color:#404040;
text-decoration:none;
font-size:13px;
}
li {
list-style:none;
}
@import url(../../public_reset.css);
.public-header{
height:44px;
background-color:000;
padding:0 20px;
display:flex;
flex-flow: row nowrap;
}
.public-header a{
line-height:44px;
color:#ccc;
padding:0 10px;
}
.public-header > a:hover{
background-color:#fff;
color:#000;
}
.public-header > span{
margin-left:auto;
}
.public-header > span > a > i{
font-size:16px;
color:#ccc;
padding-right:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../static/font/iconfont.css">
<link rel="stylesheet" href="./public_header.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>