本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
学习提升网站： 翼狐网 http://www.yiihuu.com/Hack Design https://hackdesign.org/掘金 https://juejin.im/ web前端开发网站： 中国网页设计：http://www.125jz.com/Wordpress主题 ：http://www.weidea.net/Wordpress教程：htt…
今天125网页设计给大家分享界面设计中常用的字体，字号，字体颜色及间距对齐的一些小经验，通过设计经验可以帮助你做出更好的版式，相信大家会有收获。 一、常见界面设计中字体使用问题 1.字体样式太多，导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 二.界面设计中文字的使用规则 移动端常规字体 IOS:常选择华文黑体或者冬青黑体，尤其是…
网页设计中的字体 中文：宋体，微软雅黑，方正系列（无状态） 英文： Helvetica：被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。 Lucida Grande：是Mac OS U…
提升作品精致度的方式：1、选择背景要高清、尽量选简不选繁；2、中、英文字要使用相对应的字体，提升整体层次感；3，善于使用图形化的元素，但是要注意尽量不要太复杂，否则会影响整体视觉感受；4、合理的留白，但是要避免盲目过度的留白；
微信扫一扫 
支付宝扫一扫 
