这篇博客介绍了如何使用HTML5创建一个完整的网页布局。从制作根盒子和大型版心盒子开始，逐步细化到导航、业务、新闻和尾部区域的布局设计。在导航部分，讲解了如何通过浮动和定位实现LOGO与列表的布局；在业务区域，利用内边距和外边距调整图片和文字；新闻区域则涉及图片、文字和边框的样式设定；最后在尾部区域，通过列表和图片组合展示版权信息，并用文本样式和布局进行微调。
制做一个页面简单的流程:
制作一个根盒子,在根盒子里面嵌套各种各样的div盒子
按照网页需求把网页分为若干个大型盒子,然后在大型的盒子里面嵌套版心区域盒子
版心区域的盒子一般都会设置长宽大小,并且强制居中,让网站的版心跟着用户走
在进行了大纲盒子与版心盒子的划分之后就可以在各个模块的版心区域开始进行各个模块的精准划分
导航区域:
在导航区域的地方有着两个盒子,两个盒子一个左浮动,一个右浮动,左边的盒子装填logo,右边的盒子装着列表,并且通过让列表进行左浮动来让列表在水平方向上排开.
在列表里面,每一个li都可以通过添加外边距margin来进行微调,在每一个li列表的里面还有着一张图片来充当间隔,可以通过使用背景图片来进行填充背景属性选择不进行平铺,并且把图片给进行向右移动然后垂直居中.最后可以通过
line-height: 父盒子的高度 ;(行高)
text-align: center;(水平对齐)来把导航内的文字进行居中对齐
业务区域
在业务盒子里面添加版心盒子
在版心盒子里面添加4个盒子来分别的填装4个区域的要求
在四分之一的盒子中添加图片与文件,使用版心盒子与内部
最低0.47元/天 解锁文章
扫一扫
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
