html+css布局小练习w3cfuns

　　虽然花了很长时间，但是也知道了不少，这次也不像以前了，不知道怎么下手，虽然是照着图片做，不过也做出来了图片来自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;
 }