注册页:(各种表单标签)
1】表单标签外面要有1个form标签
2】左侧说明文字,右侧对齐(盒子宽度一样,文字右对齐)
3】一个盒子中,左边是图片或图标(行内块)、右边是文字,中线对齐。【给图片或行内块加,vertical-align:middle;】
4】一个盒子中只有一块内容,此时可以用padding去到指定位置。
5】表单最后的按钮,是一个提交按钮
【1】导航类的列表布局
1)列表,ul和li来做盒子。
2)li中放a
3)a转成块,设置高,不设宽,靠padding撑开盒子
【2】新闻式的列表布局
1)分上下两个盒子
2)上面放h标签
3)下面放ul标签
【3】换行式列表布局
1)大盒子宽是固定的
2)小盒子就是li
3)li的数量不确定,一行占不下,自动换行
【4】分类式列表布局
1)每个li中有分类名字和小图标
2)小图标的布局,经常用浮动(右浮动)
【5】网页底部的帮助列表布局
1)大说明,下面跟着小链接
2)每个列表都是1个dl
3)大说明用dt,小链接用dd
【6】轮播图布局
1)宽、高固定的大盒子
2)ul和li来装切换的图片
3)左右按钮和小圆圈都是用定位
【7】tab栏布局
1)分为上下两部分(tab栏选项部分、tab栏内容部分)
2)tab栏选项部分,使用一个盒子包起来,里面用ul和li
【注意】给li设置统一的样式,然后给选中的li设置独特样式
3)有几个选项,就有几个内容盒子,只有1个内容盒子是显示的,其他都是隐藏的
【8】中线对齐
1)一个盒子中,左边是图片或图标(行内块)、右边是文字,中线对齐。【给图片或行内块加,vertical-align:middle;】
布局:
1)理论:盒模型(内、外边距) + 浮动(时机、影响) + 定位(边偏移、方式)
2)多练多总结。 |
|