任务一：零基础HTML编码

超链接不跳转

• 代码

    <a href="#" onclick="javascript:return false;">父级菜单</a>
  

• 链接的onclick事件先被执行，其次才是href。若想让href下的动作不执行，onclick要返回一个false值。

• 尽量不要用JavaScript协议作为href的属性值。
• href=”#”为跳转到本页面的顶部，若某些情况想防止抖动，可以写成href=”javasciprt:void(0)”,此时什么也不会发生。要注意这两种的区别。

任务二：零基础HTML与CSS编码

块状元素、内联元素、内联块状元素

块状元素	内联元素	内联块状元素
div h table	a span	img
form ol ul	em strong code	input

• 做这个任务的时候，多次有把块状、内联、内联块状元素之间相互转换的需求

• 这个问题在居中问题中也有相应的联系，例如要设图片居中时，图片是一个行内元素，只需将其父元素设置text-align：center即可。但若是块状元素就不能这样了，需要其他的方式，或者将块状元素变为行内元素，再使用text-aling。

  伪类选择符

• 这个demo中用到了：hover，这是一个兼容性比较好的伪类选择符。设置当鼠标滑过时改变一些状态。
  　　　　a:hover{ color:#666;}
  　　　　div:hover{ cursor:pointer;}

  小工具的使用

• 照着别人的设计图写html和css,可以用到一些小工具来帮忙。比如在这个demo中用到了屏幕取色小工具和像素测量小工具，网上有很多~

  表格相关

• 直接给表格设置border的时候会发现，每个单元格都有边框，整个表格也有边框，看起来很乱。使用以下属性使变宽变得干净简洁些。
  cellpadding 是边框与其内容的间隙大小；
  cellspacing 是边框与边框之间的间隙大小；
• 只对table td设置左与上边框，对table设置右与下边框。这样就不会边框重合变粗了。
• border-collapse:collapse属性,可使表格边框显示为一条单独的边框，更简单。
• border-collapse和cellspacing两者效果类似但不完全相同，前者相当于把两个挨着边框重合了，但是后者仅为挨着而已，会变粗。
• table-layout属性，默认值为auto，布局基于各单元格的内容。参数为fixed时，为固定布局的算法，布局与内容无关。在本例中运用这个属性，可以使表格每列的宽度相同，这样可以使表格的内容放在屏幕的中间（让左边的列内容右靠齐，右边列的内容左靠齐。用text-align属性）。

任务三：三栏式布局

　　将布局分为三栏，分别命名为left,center,right,同时高度要保证自适应（比最高的一边长），同时有图片居中的问题。

绝对定位方式

• 给left和right设置绝对定位，规定它们和左右边距的距离。center所在的div保持左浮动。
• 存在一个问题：父元素的高度自适应是不包括绝对定位的子元素的，因为绝对定位的子元素已经脱离了文档流。所以当left或right比较高的时候，最外层div的高度会出现问题。解决：可以给父元素指定一个min-height。

浮动方式

• 给left和right分别设置左浮动和右浮动，center布局的时候要写在left和right的下面，同时给包括center的div设置左浮动。
• 存在一个问题，当三栏高度不同的时候，用这种方式不能讲center的宽度设为100%了，否则不会产生想要的效果。今后用这种方式的时候最后left，center，right都能用百分比来确定宽度。这样比较美观。

margin负值的方式

• 布局的时候center要使用双层标签。命名为main
• 设置left，right,main均为左浮动，而main的width设为100%,给center设置左右边距，此时center在第一行，左右留有空隙将来给left和right。
• 给left和right设置margin-left负边距，使他们上浮到center旁边。
• 负边距对由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。

  文档流

  　　元素在没有浮动和绝对定位时的正常布局方式，（从左到右，从上到下）。
  　　脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

  参考

  三种三栏网页宽度自适应布局方法
  强大的负边距
  知乎上关于文档流的回答

任务四：定位和居中问题

百分比+margin负值的方法

• 首先将子元素的left和top设为50%，然后根据子元素的宽和高设置margin-left和margin-top。整个过程就是一个先把子元素的左上角移动到父元素中间，再把子元素的中心调整到父元素中心的过程。
• 这种方法需要知道元素的具体宽和高。

margin：auto水平居中+vertial-align垂直居中

• 对于定宽的块级元素，还可以使用margin-left：auto和margin-right:aoto来实现水平居中。
• 使用vertical-align实现垂直居中，要将块级元素变为table-cell型。
• 使用relative和absolute组合的方式来实现元素相对其他元素定位。

任务五：HTML和CSS（二）

　　任务五就是运用前面知识的综合练习。

任务六：HTML和CSS模拟报纸排版

　　任务六的要求是按照PDS设计稿的要求进行页面开发。
　　虽然之前看着慕课网的课程学过根据设计稿进行切图，但是根据设计图进行一个页面开发还是第一次。整个过程持续了一个下午，是一个非常细致的工作。让我对页面内的元素命名有了一定的感触（写到最后css特别多，感觉很乱），也真正明白了css3中出现那么多新的选择器的原因。 　　

源代码

源代码