本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
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、盒子在页面的显示=margin+border+padding+width/height 2、每个html元素都可以抽象为一个盒子 效果图： 参考： css布局基础：盒子模型练习|www.125jz.com 家电 冰箱 洗衣机 空调 洗护 洗衣液 牙膏 护发素 衣物 男装 女装 童装
banner的字体选用要根据banner的主题，去挑选，因为字体本身也是有性格的。 一、稳定型（协调，齐全，稳定，高质） 微软雅黑、冬青黑体、宋体、华文细黑 方正正中黑 方正兰亭系列 二、刚硬，锐利，清晰，强烈 造字工坊力黑体 造字工坊版黑体 造字工坊劲黑体 锐字逼格锐线体简 张海山锐线体 华康儷金黑 蒙纳超刚黑体 （更适用大气，热烈，权威，声明等主题） 三…
蓝色既代表着忧郁，又代表着温柔，它和白色混合之后，还能体现柔顺、淡雅、浪漫的氛围，像天空的色彩~蓝的种类也有很多，克莱因蓝是备受设计师喜爱的一种，也是最经典的一种，而且蓝色是最具凉爽、清新、专业的颜色，今天125建站网给大家分享9种不同的蓝色，你更喜欢哪一种呢？
网上学习如何制作网页的教程很多，但是都很杂乱，没有一个体系。这篇文章，是给大家梳理一下制作网页所需要学习的内容，新手可以按照这个流程，一步一步的学习，当然，如果你一直看下去，我们会有惊喜给大家。
字体版权一直是很多设计师的雷区，一不小心就容易触犯。125建设网和大家一起来弄清楚：免费可商用字体到底有哪些？怎么知道哪些字体是侵权的？ 怎么知道哪些字体是侵权的？ 可以在360查字体：https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。 免费可商用字体有哪些？ 1. 思源黑体（推荐） 思源黑体…
微信扫一扫 
支付宝扫一扫 