html+css布局小练习w3cfuns

浏览数：24 / 时间：2015年06月09日

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