本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等）。前段框架的好处：对于互联网的产品而言，前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说，考虑的问题更为复杂，他们既要为网站上提供的产品和服务实现一流的Web页面、优化…
如果你是新手，准备学习web前端开发的话，一定要想想为什么要学习它？性趣、爱好、获得一份相关工作…… 定位好自己，持之以恒，然后是多学、多思、多练、多交流、多总结，发现自己的问题，然后克服。在状态不好的情况下，要及时调整，多向大牛请教，那样往往能让自己成长的快，切勿急躁。 初学web前端开发可以看一些入门视频教程，之后可以买一些书，做一些小项目，要学会分析自…
字体主要分为衬线字和无衬线字。网站制作中，选用什么样的字体是比较重要。 衬线字和无衬线字的区别：左边的中文和英文字属于衬线字，右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。 如宋体，观察比划可以看到横细竖粗的特点，这就是典型的称线字。 无衬线字体没有这些额外的装饰，而且笔画的粗细差不多。比如微软雅…
字体版权一直是很多设计师的雷区，一不小心就容易触犯。125建设网和大家一起来弄清楚：免费可商用字体到底有哪些？怎么知道哪些字体是侵权的？ 怎么知道哪些字体是侵权的？ 可以在360查字体：https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。 免费可商用字体有哪些？ 1. 思源黑体（推荐） 思源黑体…
【时间要求】 2 学时（ 45 分钟× 2=90 分钟） 【上机内容】 运动会页面制作 【上机目的】 1 、掌握表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使用 【上机难点】 1、导航条的制作 2、CSS的使用 【上机内容】 请在规定时间内制作出以下网页：（要求要符合网站建设的规范！） 所需素…
CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密（Proximity） 对比（Contrast） 避免页面上的元素太过相似、如果元素不相同，就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的：增强页面效果， 有助于信息的组织如何实现：通过字体选择、线宽、颜色、形状…
微信扫一扫 
支付宝扫一扫 
