建立网站的第一周

网页设计

• 第一步需要做哪些工作

  1. 分析页面模块，找出重复性内容
  2. 对各部分命名，列清层级结构
  3. 按层级确定各部分位置，长宽，在纸上画出结构图

• 块级元素与行内元素

  1. 常用的块级元素：<h> <p> <ul> <div>;常用的内联元素：<b> <td> <a> <img> <span> ;
  2. 特性：内联元素没有width、height属性以及竖直方向的padding和margin属性。
  3. display:inline-black;可以让元素的本质是行内但有块的特性。

• 布局时的一些要点

  1. 对齐
  • 水平对齐：
    第一种方法：.parent{text-align: center;}
.child{display:inline-block;}；
    第二种方法.child{width:10px; margin: 0 auto;}
  • 垂直对齐：.parent{display:inline; vertical:middle;}
  2. float+margin可以解决宽与列的自适应问题
     float使块浮动并脱离文档流，但仍在当前父元素内。同一父元素内浮动的元素本质上属于内联的行元素，但当其总长度突破父元素时会产生换行。因此，当浮动块的margin-left设置为负值时可以视为在同一行内朝反方向移动。
  3. 响应式布局
     可以使用@media针对不同的screen设置相应的尺寸。建议在布局时对于元素位置使用百分比设置，而元素的大小用em单位设置。这样可以利用@media通过只改动font-size来改变整体大小。

认识Bootstrap

• 如何使用Bootstrap库
  通过加载bootstrap样式表与引用类名设置元素样式。注意：container等类的默认值可能会影响其它元素，应该谨慎使用或者重新设置。