本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密（Proximity） 对比（Contrast） 避免页面上的元素太过相似、如果元素不相同，就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的：增强页面效果， 有助于信息的组织如何实现：通过字体选择、线宽、颜色、形状…
两天入门React+Node（全栈工程师培训教程），教程内容完整、脉络清晰、通俗易懂，能帮助初学者看清技术路径，快速入门。所有内容都配有 Demo 和操作指导。
Table布局 和 Div+CSS布局的争论，过了7-8年了，今天看到一篇文章《为什么我们不建议用Table布局》，又想发表下自己的见解，供初学网页制作的新手参考。 《为什么我们不建议用Table布局》节选： Table要比其它html标记占更多的字节。 (延迟下载时间，占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面…
三点透视是一种绘图方法，一般用于超高层建筑，俯瞰图或仰视图。第三个消失点必须和画面保持垂直的主视线，必须使其和视角的二等分线保持一致。 (二点透视）就是把立方体画到画面上，立方体的四个面相对于画面倾斜成一定角度时，往纵深平行的直线产生了两个消失点。 建筑绘画的两点透视要比三点透视还要难以掌控，Anatoly Reza Pahlevi 为我们展示了他的独门绝技…
1. 学好HTML和CSS编程 这是网页设计中最基础，也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分，因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏，可以提升网站的易用性，还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片，能大大提升网站的逼格。图片应当辅助你的设计来推销…
微信扫一扫 
支付宝扫一扫 
