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>

 

  1 @CHARSET "UTF-8";

  2 *{

  3     margin: 0px;

  4     padding: 0px;

  5     font-family:Verdana, Geneva, sans-serif; /*浏览器会识别可识别的一个值来下载且应用*/

  6 }

  7 img{

  8     border: none;

  9 }

 10 h1{

 11     font-size:100%;

 12     color:#900;

 13 }

 14 a{

 15     text-decoration: none;/* 文本装饰 例如：上划线、下划线、删除线、闪烁等 */

 16     color:#333;

 17 }

 18 a:hover{

 19     color: #333;

 20     text-decoration: underline;

 21 }

 22 .header,.banner,.content,.footer{width:1000px;  margin:0 auto;}

 23 .page{

 24     background:url(../img/bg.gif) repeat-x;

 25     background-image: url(../img/clouds.gif);

 26     background-repeat: repeat-x;

 27     padding-top:45px;

 28 }

 29 .header{

 30 }

 31 .logo a{

 32     width:220px;

 33     height:54px;

 34     float:left;

 35     background:#991616;

 36     display: block;

 37 }

 38 .logo a img{

 39     display: block;

 40 }

 41 .nav{

 42     width:780px;

 43     height:54px;

 44     float:left;

 45     background:#393838;

 46     list-style:none;/* 取出li标签的点 */

 47 }

 48 .nav li a{

 49     font-size: 14px;

 50     color: #ccc;

 51     text-align: center;

 52     display: blcok;

 53     float: left;

 54     line-height: 54px;

 55     width:86px;

 56 }

 57 .nav li a:hover{

 58     color: #fff;

 59 }

 60 .nav li .navctive{

 61     background:url(../img/navHoverBg.png) no-repeat;

 62     color:#fff;

 63 }

 64 .nav li{

 65     display:inline;

 66     

 67 }

 68 .content{

 69     overflow:hidden; 

 70     background:#eaeaea; 

 71     font-size:12px; 

 72     line-height:24px;

 73 }

 74 .contentleft{

 75     width: 660px;

 76     margin: 10px;

 77     display: inline;

 78     float: left;

 79     text-indent: 2em;

 80 }

 81 .contentright{

 82     width: 300px;

 83     margin: 10px;

 84     display:inline;

 85 }

 86 .contentleft img{

 87     display:block;

 88 }

 89 .contentleft h1{

 90     margin:20px 0; 

 91     font-size:24px; 

 92     font-family:"微软雅黑", "黑体";

 93 }

 94 .contentright dl{

 95     margin-bottom: 10px;

 96 }

 97 .contentright dt{

 98     background-image: url(../img/title.jpg);

 99     no-repeat;

100     height: 32px;

101     line-height: 32px;

102     color: #fff;

103     font-size: 14px;

104     font-weight: bold;

105     overflow: hidden;

106     text-indent: 2em;/* 首行缩进两个文字 */

107 }

108 .contentright dl dd{

109     overflow: hidden;

110     height: 24px;

111     line-height: 24px;

112     text-indent: 1em;

113     background: url(../img/dot.gif) no-repeat 7px 10px;

114 }

115 .footer{

116     background: #393838;

117     color: #ccc;

118     height: 52px;

119     line-height: 18px;

120     padding-top: 18px;

121     font-size: 12px;

122     text-align: center;

123 }

124 .footer a{

125     color: #ccc;

126 }

View Code