本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
最新的中国网民电脑分辨率统计情况显示95%的用户在1280以上，一些用户数较多的电商网站最大宽度一般也为1190或1200，如淘宝、天猫、京东…网页宽度为1200将会成为主流，当然现在很多网站为响应式网站可以适应多种分辨率了。
最近几年能看到各行各业越来越多关于知识体系化的文章话题被关注，一定程度上说明在当前社会发展中，大家越来越重视个人知识体系化的积累。本篇文章将围绕知识体系为主题，会涉及到很多不同纬度的知识内容展开。 为什么要构建知识体系 第一，系统化知识，可以帮助我们更高效学习，节省学习中大量不必要的时间； 第二，学习吸收进来的知识点及时纳入体系里，可以让知识记得更加牢固； …
网页设计中的字体 中文：宋体，微软雅黑，方正系列（无状态） 英文： Helvetica：被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。 Lucida Grande：是Mac OS U…
125网页设计今天给大家推荐几个毛笔字生成器，毛笔字在线生成网站： http://www.51poca.com/ http://www.epinv.com/online/ http://www.akuziti.com/mb/ 毛笔字改造使用方法 将下载下来的字体图片AI转路径，编辑文字。 首先使用在线生成器输入选择好你需要的文字字形，将文字图片拖至AI中。 …
微信扫一扫 
支付宝扫一扫 
