2019.12.25作业,由于工作原因,这几天未能完成作业,现开始补上作业。
flex项目的属性
flex的项目有6个属性:flex-basis
,flex-grow
,flex-shrink
,flex
,align-self
,order
,分别控制flex项目的宽度,扩展,收缩,单独对齐方式以及排序方式。
组件的开发
一个组件就是一个css样式表,通过样式表,像搭建积木一样将整个网页快速创建出来,分为公共组件和专用组件
使用的语法:@import
实现过程:
1、创建一个组件库components;
2、创建公共组件,例如:公共头部,公共底部,广告栏等等;
3、创建专用组件;
创建一个组件的过程
1、创建一个html文档,写好网页的元素
2、创建一个css文档,在css文档中写好html文档中元素的样式
3、在html文档中使用link
导入css文档样式
默认导航页实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="components/public/public_header/public_header.css">
<link rel="stylesheet" href="components/public/public_headline/public_headline.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-huiyuan2"></i>登录</a>
<a href="">注册</a>
</span>
</div>
<div class="public_headline">
<span>二手交易</span>
</div>
</body>
</html>
公共页面重置
*{
margin: 0;
padding: 0;
/*参考线*/
/*outline: 1px dashed red;*/
}
body{
font-size: 14px;
color: #555555;
background-color: #efefef
;
}
a{
color: #404040;
text-decoration: none;
font-size: 13px;
}
公共导航
/*@import "pubilc_reset.css";*/
@import url(../pubilc_reset.css);
.public-header {
height: 44px;
background-color: black;
padding: 0 20px;
display: flex;
flex-flow: row nowrap;
}
.public-header a{
/*margin: auto 0;*/
line-height: 44px;
padding: 0 10px;
color: #cccccc;
}
.public-header > a:hover{
background-color: #fff;
color: black;
}
.public-header > span {
margin-left: auto;
}
.public-header> span i{
font-size: 16px;
color: #cccccc;
padding-right: 10px;
}
.public-header > span a{
/*margin: auto 0;*/
line-height: 44px;
padding: 0 10px;
color: #cccccc;
}
公共大标题
@import "../pubilc_reset.css";
.public_headline{
padding: 30px;
text-align: center;
}
.public_headline span {
font-size: 30px;
font-weight: bolder;
padding-bottom: 7px;
border-bottom: 3px solid red;
}