今天用html+css做一个最简单的页面。效果图如下：
艺帆集团公司企业网站源码基于艺帆企业cms制作，全站div+css 制作；它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码，减少重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦
说明：这里的韩文用中文随便代替。
1、拿到效果图首先分析页面布局
该图是竖排结构，分5个大的DIV：
立即学习“前端免费学习笔记（深入）”；
我做的页面宽度是1024px的，在5个DIV外面加一个大框给一个名为all的class。设定宽为1024px，并居中。
一般页面都是按顺序做，这个看个人习惯。由于只是一个页面，我的css就和HTML写在一个页面里面。
2、先写第一个div，给他一个class名称为top.
css样式如下：
效果如下：
这样第一个div就做好了。
3、下面做menu和logo
css如下：
效果图：
4、做menu的子菜单
css如下：
一般二级菜单的可以用js做，我这边没用js，直接用的css,给一级菜单和二级菜单定位，用样式（图中矩形框中的css）控制二级菜单的隐藏显示。这样写的缺点就是不兼容IE6。其他的主流浏览器像谷歌，火狐和IE高版本都可以兼容。
5、banner最好做了，直接放图片或设置背景都可以。此处省略
6、分析主体内容，第4个DIV
该DIV中分上下两层，第一层显示新闻列表，关于我们和产品中心，第二层显示logo+版权说明和一个下拉框
因为第一层的内容是并排显示，所以这三个DIV设置像左浮动。
按从左向右的顺序，先做新闻板块
样式：
7、图中关于我们又分左右结构，直接让图片左浮，左右结构就出来了。这种写法暂时还没遇到什么问题。
产品中心应该是用js做的百叶窗效果，这里暂时只是样式。效果会后续补上。在产品中心和底部logo之间加底部的logo和其他div就会自动下去了。
下面附上代码：
html+css基本页面 
ABOUT
关于我们关于我们关于我们关于我们关于我们关于我们
- 产品案例1 产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介
至于图片，用的到的就从效果图上切下来就ok了。
第一次总结这样的东西，不足之处还请见谅。希望可以和大家一起交流，一起进步。
页面一般分特效页面和普通页面。
布局一般分为菜单+LOGO，主体内容和尾部的版权说明。
特效页面的布局不确定，普通页面的布局一般分上中下，中间部分又分上下结构或左右结构。先把大体框架搭起来，再一点点往里填，会好做一点。
最后给大家一个参考网站：http://www.w3school.com.cn/里面前端需要的东西基本上都有了。遇到问题也可以去里面找解决方法。个人极力推荐。
