本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
彩搭配在设计中很重要！不同的配色方案呈现出不同的效果，搞定配色！请学习最好的配色教程 色彩模式 1、RGB色彩模式。通过光的三原色相加混合产生的。显示器的所有色彩都是通过红色、绿色、蓝色这三原色混合来显示的。 2、CMYK 色彩模式。是指墨水或颜料的三原色加上黑色这四种颜色，混合后出现的色彩。CMYK是打印机等印刷设备使用的色彩模型。 3、索引色…
网页制作实战项目九：飘城旅行社（分步教程）精 在上一课中，我们学习了实战项目九-首页的制作，今天来实现其他主要页面：旅游资讯。 练习一：PC端固定布局 地址：http://www.125jz.com/wp-content/demo/20190113demo1.html 练习二：流体移动布局 地址：马上上线 练习三：兼容响应式布局 地址：马上上线 1.导航下…
准备整理一套APP界面设计教程，可能会花费一段时间，请持续关注。 首先开篇我们介绍APP 界面设计，也就是新手最常遇到的问题：尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了，如果你是Mac用户，可以尝试一下Sketch，软件的版本当然是推荐高版本，因为功能更强大，作图的速度…
【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 毫州文化旅游公司 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握行为的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、行为的使用 3 、HTML及CSS的使用 【上机难点】 1、导航栏制作 2、CSS的定义和使用 【上机教学…
微信扫一扫 
支付宝扫一扫 
