![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：你后面的代码格式是乱的, 建议用markdown来完成作业
Collection
Collection
]！
1.项目宽度：项目在分派主轴剩余空间之前，项目所占的主轴空间的宽度
auto是项目原始宽度flex-basis: auto;当前项目有两个宽度：显示宽度 flex-basis，原始宽度：=widthflex-basis: > width;flex-basis: 80px;flex-basis: 30%;min-width: 150px;
2.项目扩展：将主轴上的剩余空间按比例分配给项目
flex-grow: ;空间分配比例flex-grow: 0;flex-grow: 1;
3.项目的收缩：将项目上的多余空间按比例进行缩小
默认值为1：空间不做时按比例进行缩小flex-shrink: 1;
4.flex：将flex-grow flex-shrind flex-basis
默认值：不扩展，自动收缩，宽度自动flex: 0 1 auto;flex: auto=flex:1 1 auto;flex: auto;完全失去弹性flex: none=flex:0 0 autoflex: none;flex: 2=flex:1 1 0;flex: 2;
5.align-self:单独自定义某个交叉轴上的对齐方式
align-self: flex-start; 起始端对齐align-self: flex-end; 结束端对齐
6.order:自定义项目在主轴上的排列顺序，默认为0，书写顺序数字越小越靠前
（一）页面组件的开发思路
1、首先先要把网站拆分成不同的组件。如：头部、正文、左边、右边、底部。
2、寻找需要用到的素材。
3、依次制作需要用的网站组件
4、进行组合
（二）实现过程
1、整理素材和网站架构
2、编写公共组件
3、编写不同组件的html和css。
4、编写专用组件
5、套用公共组件和专用组件
6、检查效果进行微调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.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>
<!--大标题样式-->
<div class="public-headline">
<span>二手交易</span>
</body>
</html>
一、index.css代码
/公共样式/
@import “public/public_resel.css”;
/头部样式/
@import “public/publix_header/public_header.css”;
/大标题样式/
@import “public/public_headline/public-headline.css”;
二、公共样式代码
{
margin: 0;
padding: 0;
/outline: 1px dashed red;*/
}
body{
font-size: 13px;
color: #555555;
background-color: #efefef;
}
a{
color:#404040;
text-decoration: none;font-size: 13px;
}
li{
list-style: none;
}
三、头部代码
@import “../public_resel.css”;
.public-header{
height: 44px;
background-color: black;
padding: 0 20px;
/flex/
display: flex;
flex-flow: row nowrap;
}
.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;
}
.public-header > span i{
font-size: 16px;
color: #cccccc;
padding-right: 10px;
}
四、大标题代码
@import “../public_resel.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;
}
天蓬老师