百度前端技术学院第一学习阶段总结

Posted 2020-07-04

第一学习阶段已经结束了，针对html/CSS的训练，收获很多，现在对于CSS开始熟练，也享受一个漂亮的网页在手下诞生的满足感。今天再回过头去看看排行榜第一的各组的代码，继续学习。

任务一：使用了一些知道但很少用到的标签（可能也是因为以前练得太少了）

1、<figure>标签运用在在文档中插入图片，文档的内容与图片有关，是html5的新标签。使用<figcaption>元素为figure添加标题；

2、选择框<form><label>性别：</label><input type="ratio" name="gender" /></form>

<textarea row=‘5‘ col=‘20‘>多行输入框

3、表格  表格标题<caption>

<table> 

<thead><tr><th>

<tbody><tr><td>

<tfoot>

<table>

4、边栏<aside>

任务二：在任务一的基础上增添样式

list-style-type:none  去掉列表前的点

border-collapse:collapse  设置表格的边框合并为一个单一的边框

任务三：三栏式布局

1、利用float

.left{width:200px;float:left;}

.rigth{width:200px;float:right;}

.middle{margin-left:210px;margin-right:210px;}

要注意的问题，自适应的模块在html中一定要放在最后

2、利用position

.wrapper{position:relative;}

.left,.right,.middle{position:absolute;}

.left{width:200px;}

.rigth{width:200px;right:20px;}

.middle{margin-left:210px;margin-right:210px;}

这种方法能够使三个模块正确摆放，但是要溢出父元素，即使父元素wrapper设置height:100%或者overflow:hidden也不行。而且中间模块不能达到自适应的目的

任务四：定位垂直居中

1、flex

.wrapper{display:flex;justify-content:center;align-items:center;}

2、position

.wrapper{width:500px;height:500px;left:50%;top:50%;margin-left:-250px;margin-top:-250px;}

.wrapper{left:50%;height:50%;transform:translate(-50%,-50%);}

3、table

.wrapper{display:table;}

.content{display:table-cell;vertical-align:middle;}

任务五：这个结合了前几个任务的知识点，不多说了

任务六：报纸排版

1、<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

2、font-variant:small-caps;text-transform:capitalize;font-style:oblique

3、背景图片上添加蒙版时，要注意position

4、列表前的符号可以用list-style-image：url()设置自定义图标

任务八：响应式布局

这个就是bootstrap框架了，第一次接触，觉得好神奇，非常方便，这里就不赘述了

任务十：FlexBox的用法

链接：https://segmentfault.com/a/1190000002910324介绍得很详细

任务十一：移动页面布局

主要就是用flex布局还有百分比，真心好用，要注意的就是细节方面的

.wrapper:before,.wrapper:after{content:"";display:table;clear:both;}清除浮动

任务十二：CSS3新特性

慕课网的教程~挺喜欢@keyframe这个特性的