网页设计
-
第一步需要做哪些工作
- 分析页面模块，找出重复性内容
- 对各部分命名，列清层级结构
- 按层级确定各部分位置，长宽，在纸上画出结构图
-
块级元素与行内元素
- 常用的块级元素：
<h><p><ul><div>;常用的内联元素：<b><td><a><img><span>; - 特性：内联元素没有width、height属性以及竖直方向的padding和margin属性。
-
display:inline-black;可以让元素的本质是行内但有块的特性。
- 常用的块级元素：
-
布局时的一些要点
- 对齐
- 水平对齐：
第一种方法：.parent{text-align: center;}
.child{display:inline-block;}；
第二种方法.child{width:10px; margin: 0 auto;} - 垂直对齐：
.parent{display:inline; vertical:middle;}
- float+margin可以解决宽与列的自适应问题
float使块浮动并脱离文档流，但仍在当前父元素内。同一父元素内浮动的元素本质上属于内联的行元素，但当其总长度突破父元素时会产生换行。因此，当浮动块的margin-left设置为负值时可以视为在同一行内朝反方向移动。 - 响应式布局
可以使用@media针对不同的screen设置相应的尺寸。建议在布局时对于元素位置使用百分比设置，而元素的大小用em单位设置。这样可以利用@media通过只改动font-size来改变整体大小。
认识Bootstrap
- 如何使用Bootstrap库
通过加载bootstrap样式表与引用类名设置元素样式。注意：container等类的默认值可能会影响其它元素，应该谨慎使用或者重新设置。
