本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
请加入网页设计交流群：208047327 ，在项目制作过程中有任何问题，可以在群内讨论，或进入本站问答社区互动。 【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…
做HTML5网页，要播放视频，视频格式为mp4，结果浏览器只能听到声音，看不到画面。 反复测试，多个浏览器均出现此问题。刚开始以为视频的格式不对，我是从MOV转的MP4格式，反复确认嵌入的视频确实是mp4格式的，可是试了好多次结果都一样，只有声音不显示图像，搞了一天，直接搞懵了。 在网上到处搜索，最终解决。 问题描述： 在html5页面中嵌入视频，用浏览器打…
最新的中国网民电脑分辨率统计情况显示95%的用户在1280以上，一些用户数较多的电商网站最大宽度一般也为1190或1200，如淘宝、天猫、京东…网页宽度为1200将会成为主流，当然现在很多网站为响应式网站可以适应多种分辨率了。
微信扫一扫 
支付宝扫一扫 
