本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
前端文档 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web 前端社区 GitHub stackoverflow 掘金 JS 学习资源 现代 JavaScript 教程：https://zh.javascript.info/ 阮一峰 JS教程：https://wangdoc.com/javascript…
Table布局 和 Div+CSS布局的争论，过了7-8年了，今天看到一篇文章《为什么我们不建议用Table布局》，又想发表下自己的见解，供初学网页制作的新手参考。 《为什么我们不建议用Table布局》节选： Table要比其它html标记占更多的字节。 (延迟下载时间，占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面…
前端入门核心知识点 浏览器 Web标准：结构标准（HTML）、表现标准（CSS）、行为标准（JS） 浏览器分为两部分：渲染引擎（即：浏览器内核）、JS 引擎 浏览器的工作原理：重绘和重排、V8引擎 App的WebView容器，相当于浏览器，可以内嵌H5网页 HTML5 语义化标签：<header>、<article> 、<foo…
上一篇《从零开始做APP界面设计二：App界面设计尺寸》我们学习了app界面设计尺寸规范，今天中国网页设计给大家分享App界面设计中字体的选用、字号设置及配色方案。 App界面设计标准色: 背景用色、文字用色、图标用色 App界面设计标准字： IOS:中文使用苹方字体 英文和数字使用Helvetica Android:中文使用思源黑体 英文和数字使用Rob…
请加入网页设计交流群：208047327 ，在项目制作过程中有任何问题，可以在群内讨论，或进入本站问答社区互动。 【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…
微信扫一扫 
支付宝扫一扫 
