html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=""/> <meta name="description" content=""/> <link rel="stylesheet" type="text/css" href="css/cssstyles.css"/> <title>首页设计</title> </head> <body> <!--头部--> <!--头部分包括Logo图片+导航条--> <div id="header"> <!--logo图片超链接--> <a id="logo" href="#"><img src="images/logo.png"/></a> <!--导航--> <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">培训课程</a></li> <li><a href="#">优秀学员</a></li> <li><a href="#">课程疑问</a></li> <li><a href="#">职业生涯</a></li> <li><a href="#">学员社区</a></li> <li><a href="#">官方博客</a></li> <li><a href="#">学员地址</a></li> </ul> </div> <!--banner部分--> <!--banner图片，应该用js控制多张图片--> <a id="banner" href="#"><img src="images/banner.jpg" /></a> <!--内容部分--> <div id="content"> <!--左侧的文章：图片，标题，正文--> <div id="leftArticle"> <!--正文图片--> <a id="articlePicA" href="#"><img src="images/articleBanner.jpg"/></a> <!--正文标题--> <h1><a href="#">Web前端开収工程师好找工作吗？</a></h1> <!--正文内容,p标签--> <p>据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于 大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。</p> <p>随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web前端开发工程师、Web页 面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏 览器，用户体验降低，搜索引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。</p> <p>现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。</p> <p>正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。</p> </div> <!--右侧的信息链接--> <!--信息栏和导航栏的布局差不多，但是这里使用“dl+dt+dd”比“ul+li”要好--> <div id="rightInfo"> <!--职业生涯栏目--> <dl> <dt>职业生涯</dt> <dd><a href="#">Web前端开发工程师需要掌握哪些核心技能？</a></dd> <dd><a href="#">我是程序员，有必要进行web前端开发的学习吗?</a></dd> <dd><a href="#">我是网站美工，目前发展遇到瓶颈，该如何解决？</a></dd> <dd><a href="#">我适合从事web前端开发行业吗？</a></dd> <dd><a href="#">Web前端工程师如何给自己定位？</a></dd> <dd><a href="#">Web前端开发工程师好找工作吗？</a></dd> </dl> <!--好职推荐栏目--> <dl> <dt>好职推荐</dt> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=370">盛大网络--前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=397">阿里巴巴--前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=97">金山软件--KIS-WEB前端页面工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=62">360京东商城 -- Web前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=419">阿里巴巴 - 技术部 - Web前端开发工程师（高级）</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=418">阿里巴巴 - 技术部 - Web前端开发工程师（初级）</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=417">人人网 - 技术部 - 3G前端工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=416">人人网 - 技术部 - Web前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=415">搜狐 - 媒体技术产品中心 - JavaScript前端</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=414">新浪 - 运营部 - Web前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=413">新浪 - 无线部 - Web前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=412">新浪 - 技术部 - Web前端开发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=411">新浪 - 产品部 - JavaScript前端工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=410">百度 - Web前端研发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=409">百度 - 商务搜索 - Web前端研发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=408">百度 - 社会化网络事业部 - JavaScript前端</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=407">百度 - 搜索研发部 - web前端研发工程师</a></dd> <dd><a href="http://www.w3cfuns.com/forum.php?mod=viewthread&tid=406">百度 - 系统部 - WEB前端开发工程师</a></dd> </dl> </div> </div> <!--页底部分：第一行文字全部为链接，第二行左边的是备案号，右侧是版权信息--> <div id="footer"> <!--上半部分为全部链接--> <p> <a href="#">关亍cssStudy</a> | <a href="#">广告服务</a> | <a href="#">提交问题</a> | <a href="#">联系我们</a> | <a href="#">版权声明</a> | <a href="#">关亍隐私</a> | <a href="#">合s作伙伴</a> </p> <!--第二行左边的是备案号，右侧是版权信息--> <p> <a href="#">京ICP备10055601号</a> All rights(C)2008-2010 Reserved </p> </div> </body> </html>
CSS代码：
/*标签重置,图片边框处理*/ body,div,p,ul,li,dl,dt,dd,h1,a{ margin:0px; padding:0px;} img { border:none;} /*设置页面的宽度，并且水平居中，四大板块的宽度应该都是一样的*/ #header,#banner,#content,#footer{ width:1000px; margin:0 auto;} /*页面背景:html,body的背景*/ html { background:url(../images/bg.gif) repeat-x;} body { background:url(../images/clouds.gif) repeat-x; padding-top:45px;} /*header版块*/ /*头部与上边沿有45px的距离，为实现这个效果，我们采用设置body上内边距的办法*/ /*将header的logo图片做为块状元素，包括超链接*/ #logo { display:block; width:220px; height:54px; float:left; background-color:#991616;} #logo img{ display:block;} /*导航部分的css设计*/ #nav { width:780px; height:54px; list-style:none; float:left; background-color:#393838;} #nav li{ float:left;} #nav li a { display:block; width:86px; height:54px; line-height:54px; text-align:center; font-size:12px; text-decoration:none; float:left; color:#ccc;} #nav li a:hover { color:#fff;} /* BUG:FireFox内，不能够自适应内部元素的高度，所以它的高度变为零，而在ie6里面却可以正帯显示，这是一个很严重的问题，如果高度不能自适应的话，那内部子元素logo和nav的浮动产生的影响就会"外泄"，对header外面的版块产生影响，从而产生版块错位。直接在header的样式里"overflow:hidden;"*/ #header { overflow:hidden;} /*设置某一项处于当前激活状态： #nav li .navActive { background:url(../images/navHoverBg.png) no-repeat; color:#fff;} */ /*banner版块*/ /*设置图片的大小，包括父容器的大小，防止图片大小自适应大小导致图片破坏页面布局*/ #banner { display:block; width:1000px; height:292px; margin-top:10px; margin-bottom:10px;} #banner img { display:block; width:1000px; height:292px;} /*content版块*/ #content { overflow:hidden; font-size:12px; line-height:24px; background:#EAEAEA;} /* bug：leftArticle和rightInfo 上下左右都有10像素的外边距，如果我们用左侧浮动来实现2栏效果，在存在外边距的情况下就会出现IE6的双倍边距Bug，为了避免出现bug，我们就利用"display:inline;" */ #leftArticle,#rightInfo { margin:10px; float:left; display:inline;} #leftArticle{width:660px;} #rightInfo{width:300px;} #articlePicA,#articlePicA img { display:block;} /*h1 styles*/ #leftArticle h1{ margin:20px 0; font-size:24px; font-family:"黑体", "楷体", "宋体";} h1{ font-size:100%;} #leftArticle h1 a { color:#900; text-decoration:none;} #leftArticle h1 a:hover { text-decoration:underline;} /*每段文字都会缩进两个文字:text-indent:2em*/ #leftArticle p { text-indent:2em; color:#333; margin-bottom:30px; font-size:14px;} /*右侧的信息栏*/ #rightInfo dl{ margin-bottom:10px;} /*dt*/ #rightInfo dl dt { background:url(../images/title.jpg) no-repeat; height:32px; line-height:32px; color:#fff; font-size:14px; font-weight:bold; text-indent:30px;} /*dd*/ #rightInfo dl dd { height:24px; line-height:24px; background:url(../images/dot.gif) no-repeat 7px 10px; text-indent:30px;} #rightInfo dl dd a { color:#333; text-decoration:none; } #rightInfo dl dd a:hover { color:#999; text-decoration:underline;} /*footer版块*/ #footer{ background:#393838; height:52px; line-height:18px; margin-top:10px; padding-top:18px; text-align:center; color:#ccc; font-size:12px; } #footer a{color:#ccc; text-decoration:none;} #footer a:hover{text-decoration:underline;}
Css设计步骤：
1.对用到的html标签进行Css样式的重置(margin 0,padding 0)，方便页面的重新架构。
2.对于页面中的所有图片边框进行处理，美观并且防止影响布局。
3.页面的主体居中。margin:0 auto,并且一定要设置绝对宽度。
4.页面的背景，背景的显示跟加载的速度有关，而背景图片的大小直接影响加载的速度。这里采用的是：给html和body都添加背景图片，不同的是html标签的背景图片非常小，是一个蓝色向白色渐变的小图片，body标签背景图片是一张完整的图片。当页面开始加载时，会先显示html的背景，上面蓝色下面白色渐变的背景，如果body背景还没加载完，页面也不会显得太单调。
5.header版块，logo图片和导航栏。有链接的图片，应该把a,img标签都定义成块元素，方便页面的布局。
导航的设计：ul+li 设置宽度和高度；去掉标签的点：list-style:none;注意li的左浮动；导航下的a
标签设置为块元素，设置宽高；height和line-height，如果容器设定了高度，并且有文字，最好设定行
高一样，效果显得好看！？li和li a都float:left。
(注意：overflow:hidden ！一个块状元素内的子块状元素，如果要浮动，则应该在父块状元素内添加overflow:hidden，为了防止ff的bug!)
6.设置某一项处于当前激活状态：
#nav li .navActive{ background:url(../images/navHoverBg.png) no-repeat; color:#fff;}。
7.banner版块，图片大小直接影响页面布局，所有图片最后定义宽度和高度，所以图片应该定义成块状元素，有链接的图片，a标签链接也应该定义成块状元素。
注：设置图片的大小，包括父容器的大小，防止图片大小自适应大小导致图片破坏页面布局。
8.content版块，布局时要注意两个点，第一，overflow:hidden ！一个块状元素内的子块状元素，如果要浮动，则应该在父块状元素内添加overflow:hidden，为了防止ff的bug。 第二，IE6的双边距bug，当父容器当中的子容器(块级元素)有浮动样式的时候，给子容器元素添加margin-left和margin-right样式， 会出现。
解决办法：
一，display:inline;display:list-item 这样在元素浮动时就不会出现；
二，!important解决，比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10p
9.a标签的伪类样式，hover,visited
10.其他的样式，包括字体样式，背景，等等，具体调试或者借助chrome