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;
}