虽然花了很长时间，但是也知道了不少，这次也不像以前了，不知道怎么下手，虽然是照着图片做，不过也做出来了图片来自w3cfuns：网站图片url 看了w3cfuns的两天驾驭DIV+CSS 这个网站对新人来说真的是个不错的学习网站。
<div class="page">
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img alt="厘米IT学院" src="../img/logo.png">
</a>
</div>
<div>
<ul class="nav">
<li><a href="#" class="navctive">首页</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>
</div>
<div class="banner">
<a href="#"> <img alt="厘米IT学院" src="../img/banner.jpg">
</a>
</div>
<div class="content">
<div class="contentleft">
<a href="#"><img alt="www" src="../img/articleBanner.jpg"></a>
<h1><a href="#">Web前端开发工程师好找工作吗？</a></h1>
<p>据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。</p>
<br/><p>随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web前端开发工程师、Web页面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏览器，用户体验降低，搜索引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。</p>
<br/><p>现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。</p>
<br/><p>正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。</p><br/>
</div>
<div class="contentright">
<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="#">盛大网络--前端开发工程师</a></dd>
<dd><a href="#">阿里巴巴--前端开发工程师</a></dd>
<dd><a href="#">金山软件--KIS-WEB前端页面工程师</a></dd>
<dd><a href="#">360京东商城 -- Web前端开发工程师</a></dd>
<dd><a href="#">阿里巴巴 - 技术部 - Web前端开发工程师（高</a></dd>
<dd><a href="#">阿里巴巴 - 技术部 - Web前端开发工程师（初</a></dd>
<dd><a href="#">人人网 - 技术部 - 3G前端工程师</a></dd>
<dd><a href="#">人人网 - 技术部 - Web前端开发工程师</a></dd>
<dd><a href="#">搜狐 - 媒体技术产品中心 - JavaScript前端</a></dd>
<dd><a href="#">新浪 - 运营部 - Web前端开发工程师</a></dd>
<dd><a href="#">新浪 - 无线部 - Web前端开发工程师</a></dd>
<dd><a href="#">新浪 - 技术部 - Web前端开发工程师</a></dd>
<dd><a href="#">新浪 - 产品部 - JavaScript前端工程师</a></dd>
<dd><a href="#">百度 - Web前端研发工程师</a></dd>
<dd><a href="#">百度 - 商务搜索 - Web前端研发工程师</a></dd>
<dd><a href="#">百度 - 社会化网络事业部 - JavaScript前端</a></dd>
<dd><a href="#">百度 - 搜索研发部 - web前端研发工程师</a></dd>
<dd><a href="#">百度 - 系统部 - WEB前端开发工程师</a></dd>
</dl>
</div>
</div>
<div class="footer">
<p><a href="#">关于W3CStudy</a> | <a href="#">广告服务</a> | <a href="#">提交问题</a> | <a href="#">
联系我们</a> | <a href="#">版权声明</a> | <a href="#">关于隐私</a> | <a href="#">合作伙伴</a></p>
<p><a href="#">京ICP备10055601号</a> All rights(C)2008-2010 Reserved<p>
</div>
</div>
</div>
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
font-family:Verdana, Geneva, sans-serif; /*浏览器会识别可识别的一个值来下载且应用*/
}
img{
border: none;
}
h1{
font-size:100%;
color:#900;
}
a{
text-decoration: none;/* 文本装饰 例如：上划线、下划线、删除线、闪烁等 */
color:#333;
}
a:hover{
color: #333;
text-decoration: underline;
}
.header,.banner,.content,.footer{width:1000px; margin:0 auto;}
.page{
background:url(../img/bg.gif) repeat-x;
background-image: url(../img/clouds.gif);
background-repeat: repeat-x;
padding-top:45px;
}
.header{
}
.logo a{
width:220px;
height:54px;
float:left;
background:#991616;
display: block;
}
.logo a img{
display: block;
}
.nav{
width:780px;
height:54px;
float:left;
background:#393838;
list-style:none;/* 取出li标签的点 */
}
.nav li a{
font-size: 14px;
color: #ccc;
text-align: center;
display: blcok;
float: left;
line-height: 54px;
width:86px;
}
.nav li a:hover{
color: #fff;
}
.nav li .navctive{
background:url(../img/navHoverBg.png) no-repeat;
color:#fff;
}
.nav li{
display:inline; }
.content{
overflow:hidden;
background:#eaeaea;
font-size:12px;
line-height:24px;
}
.contentleft{
width: 660px;
margin: 10px;
display: inline;
float: left;
text-indent: 2em;
}
.contentright{
width: 300px;
margin: 10px;
display:inline;
}
.contentleft img{
display:block;
}
.contentleft h1{
margin:20px 0;
font-size:24px;
font-family:"微软雅黑", "黑体";
}
.contentright dl{
margin-bottom: 10px;
}
.contentright dt{
background-image: url(../img/title.jpg);
no-repeat;
height: 32px;
line-height: 32px;
color: #fff;
font-size: 14px;
font-weight: bold;
overflow: hidden;
text-indent: 2em;/* 首行缩进两个文字 */
}
.contentright dl dd{
overflow: hidden;
height: 24px;
line-height: 24px;
text-indent: 1em;
background: url(../img/dot.gif) no-repeat 7px 10px;
}
.footer{
background: #393838;
color: #ccc;
height: 52px;
line-height: 18px;
padding-top: 18px;
font-size: 12px;
text-align: center;
}
.footer a{
color: #ccc;
}