首先，在最开始写音悦台网站项目的时候，我布局会很麻烦，后来我又学到了几个布局小技巧，发现并不是那么难。比如一些整齐的如同表格一样的页面可以使用grid布局，结合flex布局会更简单些。
项目技术：html5、css3、sass
一、项目文档结构
css：样式表
img：图片资源
scss：sass文件
iconfont：矢量图标引用文件
footer.html：公共底部
head.html：公共头部
index.html：网站首页
register.html：注册页
login.html：登录页
reading.html：购物须知
goods.html：商品详情页
list.html：专辑列表页
二、项目技术技巧应用
Gird布局：
一、grid-template-*
eg：grid-template-columns：100px 100px 100px (表示三列)
grid-template-rows：100px 100px 100px 100px (表示四行)
ps:想写多少行或多少列，就填写相应属性的个数。不填写就会自动分配，将容器自动充满。
二.跟grid-template相关的东西
1)、repeat() 第一个参数是重复的次数，第二个是重复的值
eg ：grid-template-columns：100px 100px 100px
grid-template-columns：repeat（3，100px）
2)、auto-fill 有时，单元格的大小是固定的，但是容器的大小不确定，auto-fill属性就会自动填充
eg：grid-template-rows：repeat（auto-fill，100px）
3)、fr：方便表示比例关系 （fraction的缩写，片段的意思）
eg：grid-template-columns：repeat（4，1fr）//宽度平均分为四列等分
4)、 minmax() 产生一个长度范围，2个参数，一个最小值，一个最大值
eg：grid-template-columns：1fr minmax（150px,1fr） 最小都不会小于150px
5)、auto 表示由浏览器自己决定长度
eg：grid-template-columns：100px auto 100px （不写则默认auto）
中间自动填充，根据浏览器的大小自动计算
6)、网格线（作用：帮助定位 格子定位到哪跟线上）
n行有n+1跟水平网格线
m列有m+1跟垂直网格线
eg：grid-template-columns:[c1] 100px [c2] 100px [c3] 2列3跟网格线
三、grid-row-gap / grid-columns-gap
item (格子/项目)之间的距离
eg：row-gap:20px (行与行之间的距离)
column-gap:20px (列与列之间的距离)
简写：gap：20px 20px
3、grid-template-areas
一个区域由单个或多个单元格组成 需要在项目属性里面设置】
每个单元格代表一个区域 （自己想怎么划分就怎么划分 一个格子可以成为一个区域 两个格子也可以成为一个区域）
4、grid-auto-flow
划分网格线以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列，即填满第一行，再开始放入第二行（就是子元素的排放顺序）
eg：grid-auto-flow：row（先行后列 默认）
grid-auto-flow：column （先列后行）
跟grid-auto-flow 相关 dense（提高空间的利用率）
5、对齐方式 justify-items(水平方向) / align-items(垂直方向)
设置所有单元格内容的水平和垂直的对齐方式、
水平垂直合并写：place-items：center center
6、justify-content(水平方向) / align-content(垂直方向)
设置整个内容区域的水平和垂直对齐方式
eg：justify-content：center
align-content：center
7、grid-auto-columns / grid-auto-rows
用来设置多出来的项目的宽和高
项目属性
1、grid-column-start / grid-column-end
grid-row-start / grid-row-end 用来指定item的具体位置
简写：eg1：grid-column：1 / 3 (第一个参数开始的位置 第二个参数结束的位置)
eg2： grid-column-star：span 2；从开始方向跨越两个单元格
eg3： grid-column-end：span 2；从结束方向跨越两个单元格
eg2和eg3效果一样 一个往右一个往左
2、grid-area 指定项目在哪一个区域 （结合容器属性一起使用）
简写：grid-area：1 / 1 / 3 / 3
3、justify-self / align-self
只能用于单个项目（单元格）的水平/垂直方向
简写：place-self：center center
为了把一个公共头部页面嵌套在其他页面，试了很多办法，一直没有找到正确的，然后最后才发现，写完嵌套，在公共头部页面需要写target 。
例子：
<iframe src="head.html" width="100%" height="178px"></iframe>:嵌套把页面嵌套到另外一个页面
css写属性
iframe{
border：0
}
然后当前页面添加target="_top" 例子：<basehref="" target="_top">
target :语法
<base href="" target="_top">
属性值：
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
用到的css技巧：
1、display: flex;/*水平排列*/
2、flex-direction: column;/*垂直排列*/
3、transform: translateX(-1200px);/*动画平移*/
4、focus获取焦点
5、outline: none;/*outline 属性设置元素周围的轮廓线*/
6、cursor: pointer; /*把箭头变为小手*/
7、font-size: 0; /*空格占的东西给去掉*/
8、text-align: center; 设置居中
9、font-size:设置字体大小
10、font-weight:属性设置文本的粗细
