百度前端学院学习心得

目录

1. 零基础HTML编码
2. 零基础HTML及CSS编码（一）
3. 三栏式布局
4. 定位和居中问题
5. 待更新

前言

本文全部学习心得皆来源于在百度前端学院的各个项目，本文的写作顺序按照百度前端学院的“小薇学院”、“斌斌学院”和”耀耀学院“中下属项目排列。

本文的心得及学习过程中所编写的源代码均可随意转载，欢迎各位访客积极指正或帮助改善代码。本人不负责解答各种新人关于web前端的疑问，如有疑问请自行挪步各种搜索引擎（我也是新手）。

本文随着我的学习进度在不断更新维护中……

1.零基础HTML编码

任务描述

参考示例图（点击查看），完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构）

提交的代码

https://github.com/flying-sakura/BaiduIFE/blob/master/XiaoWei/Task1/index.html

心得

1. 建议使用<strong>来代替<b>以实现加粗
2. <strong>可不仅限于加粗字体实现“强调”功能，且在残障人士使用“阅读”功能时会重读。
3. 在表单中，建议使用<input type=”submit”>来代替<button>以实现表单提交
4. “submit”支持键盘的“enter”实现单击；<button>实现表单需自己定义函数，且键盘“enter”按下时无反应。
5. <footer> 标签定义文档或节的页脚
6. 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。一般网页都会在底部加上该标签并附上”copyright©“以申明网页版权。

2.零基础HTML及CSS编码（一）

任务描述

基于第一个任务“零基础HTML编码”的代码，参考 示例图（点击查看），在”零基础HTML编码“的代码基础上增加CSS样式代码的编写

提交的代码

https://github.com/flying-sakura/BaiduIFE/blob/master/XiaoWei/Task2/index.html

心得

1. 导航栏的制作
2. ①　DIV一个区域
   ②　使用无序列表作为每个导航分配
   ③　将无序列表按行（或按列）显示
   默认按列显示，若要按行显示则display: inline;
   按行显示效果如下：
   
3. 为DIV添加阴影实现3D（纸质书/卡片）效果
4. 利用box-shadow:[X-[inset] x-offset y-offset blur-radius spread-radiuscolor;
   参考链接：
   http://blog.csdn.net/freshlover/article/details/7610269
5. 用table实现细线表格的制作
6. table{border-collapse:collapse;}
   td{border:1px solid #ccc;}
   
7. 对表格的不同行（或列）应用不同的样式
8. 使用选择器，如nth-of-type(n)选择第n个标签
   更多选择器：
   http://www.w3school.com.cn/cssref/css_selectors.asp

3.三栏式布局

任务描述

• 使用 HTML 与 CSS 按照 示例图（点击查看）实现三栏式布局。
• 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

提交的代码

https://github.com/flying-sakura/BaiduIFE/blob/master/XiaoWei/Task3/index.html

心得

1. 三栏式布局的方式
2. ①　绝对定位法： 左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相等固定宽度，在这里设置为200px，并且左边div的top值为0，left值为0，同理右边top值为0，right值为0。然后设置中间div的样式，将中间div的margin-left和margin-right设置为左右两边的固定宽200px。 ②　自身浮动法： 左栏左浮动，右栏右浮动，中间栏放最后。 ③　margin负值法： 左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来。 参考链接： http://www.cnblogs.com/guoqing26/p/5313481.html https://www.douban.com/group/topic/96065549/ ④　CSS calc()函数——宽度（/高度）自适应 假设左栏宽度200px，右栏宽度120px，要使得中间栏宽度自适应，则需在中间栏对应的DIV中写上{width: calc(100%-200px-120px);} 该方法同样可以用于三栏式布局，不同的是三栏的DIV不用设置position（换句话说，position:static;）。
3. 父级DIV高度自适应为子级DIV最大高度
4. 若子元素全是带有float属性的元素，则在父级DIV的CSS中添加：{display:table}和添加伪元素::after{clear:both;} 其他方法参考链接： http://www.cnblogs.com/fatty-yu/p/6800716.html

定位和居中问题

任务描述

• 实现如示例图（点击打开）的效果
• 灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角

任务分析

1. 
   
2. 用一个大的div作为容器，在其中包含两个div
3. 对大div的样式进行如下设置，使其水平居中、垂直居中、自动扩展高度置

position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0; 
display: table;

以上三行代码的作用是使其水平居中、垂直居中，最后一行代码的作用是使其随内部内容自动扩展高度。

• 对小div的样式进行如下设置（以左上角1/4圆为例），使其居于左上角，呈1/4圆

• position:absolute;
  width:50px;
  height:50px;
  top:0px;
  left:0px;
  border-radius: 0 0 50px 0;

  border-radius可以只设置一角的圆角边框，其参数顺序为左上、右上、右下、左下。

  提交的代码

  心得

  1. 更多的水平和垂直居中的方法
  2. http://blog.csdn.net/freshlover/article/details/11579669