本次网页制作的效果图如上图所示，分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
今天给大家分享的是网站前端开发常用工具及网址。 掌握了这些工具中的大部分，会让你的WEB前端设计工作事半功倍，您离一个优秀的前端设计师也就不远了~~ 原前端开发网（w3cfuns）开发，让前端开发变得更简单，exe文件只有1.67MB，点击直接运行，不需要安装，很方便。 功能：正则表达式、代码压缩、雪碧图制作、json格式化等，如果你经常在没有网络的办公环境…
字体版权一直是很多设计师的雷区，一不小心就容易触犯。125建设网和大家一起来弄清楚：免费可商用字体到底有哪些？怎么知道哪些字体是侵权的？ 怎么知道哪些字体是侵权的？ 可以在360查字体：https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。 免费可商用字体有哪些？ 1. 思源黑体（推荐） 思源黑体…
今天125网页设计给大家分享界面设计中常用的字体，字号，字体颜色及间距对齐的一些小经验，通过设计经验可以帮助你做出更好的版式，相信大家会有收获。 一、常见界面设计中字体使用问题 1.字体样式太多，导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 二.界面设计中文字的使用规则 移动端常规字体 IOS:常选择华文黑体或者冬青黑体，尤其是…
1. 学好HTML和CSS编程 这是网页设计中最基础，也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分，因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏，可以提升网站的易用性，还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片，能大大提升网站的逼格。图片应当辅助你的设计来推销…
微信扫一扫 
支付宝扫一扫 
