重新排传智的首页!头部和左边的部分完成了!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link type="text/css" href="css/index.css" rel="stylesheet">
<title>传智首页-专业的IT培训机构</title>
</head>
<body>
<!--box开始-->
<div class="box">
<!--header开始-->
<div class="header">
<!--top开始-->
<div class="top">
专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构
<span>
<a href="#">网站首页</a></li><a href="#" class="blue">免费公开课</a></li><a href="#" class="blue">校园生活</a></li><a href="#" class="red">传智特刊</a></li><a href="#">人才服务</a></li><a href="#">招贤纳士</a></li><a href="#" class="noline">联系我们</a></li>
</span>
</div>
<!--top结束-->
<!--logo开始-->
<div class="logo">
<div class="logoL">
<a href="#"><img src="data:images/logo.gif"></a>
</div>
<div class="logoM">
<h2>PHP学院</h2>
<ul>
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
</ul>
</div>
<div class="logoR">
<img src="data:images/topword.gif">
</div>
</div>
<!--logo结束-->
<!--导航栏开始-->
<div class="menu">
<ul>
<li><a class="current" href="#">首 页</a></li>
<li><a class="a2" href="#">PHP培训课程</a></li>
<li><a class="a2" href="#">PHP视频下载</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>
<li><a href="#">来校路线</a></li>
<li><a href="#">技术论坛</a></li>
</ul>
</div>
<!--导航栏结束-->
<!--header结束-->
<!--分享栏开始-->
<div class="share">
<div class="floatL">
<img src="data:images/share.jpg" usemap="#Map">
<map name="Map"><area shape="rect" coords="331,4,401,31" href="#"><area shape="rect" coords="261,4,331,31" href="#"><area shape="rect" coords="191,4,261,31" href="#"><area shape="rect" coords="132,4,191,32" href="#">
<area shape="rect" coords="73,4,132,32" href="#">
</map>
</div>
<div class="qita floatR">
<span>其它学院入口:</span><a href="#">.php学院</a><a href="#">.net学院</a><a href="#">ios学院</a><a href="#">c/c++学院</a><a href="#">网页平面设计学院</a>
</div>
<div class="clear"></div>
</div>
<!--分享栏结束-->
<!--left开始-->
<div class="left">
<!--开学开始-->
<div class="kaixue">
<div class="title">
<span class="span1">我们开学啦</span>今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途
</div>
<div class="lunbo floatL">
<img src="data:images/ppt1.jpg">
</div>
<div class="shipin floatR">
<ul>
<li><a href="#"><img src="data:images/img01.jpg"></a><br>陈建利专题-我有我原则</li>
<li><a href="#"><img src="data:images/img02.jpg"></a><br>张巍专题-我为创业狂</li>
<li><a href="#"><img src="data:images/img03.jpg"></a><br>小林催人泪下经历</li>
<li><a href="#"><img src="data:images/img04.jpg"></a><br>曹伟-玩酷我的程序人生</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--开学结束-->
<!--学院消息开始-->
<div class="info">
<div class="title">
<img src="data:images/college.jpg">
</div>
<div class="content">
<ul class="overflow">
<li><a href="#"><b class="red">2013年限时钜惠,PHP基础班免费学!</b></a><img src="data:images/hot.gif"></li>
<li><a href="#">ci电子商城-开发速度最快的PHP框架!</a></li>
<li><a href="#"><b class="blue">2013年传智播客PHP课程最新升级</b></a></li>
<li><a href="#">国内首家推出企业急需六大核心技术!!</a></li>
<li><a href="#"><b class="blue">学PHP编程，不做孬种程序员！</b></a></li>
<li><a href="#">新年开门红,俩学员毕业入职月薪过万！</a></li>
<li><a href="#">PHP学院年薪20-40万招聘讲师</a></li>
<li><a href="#">传智播客PHP视频教程配套笔记，更新到第114讲</a></li>
<li><a href="#">拒绝"上半天，自学半天"的教学培训</a></li>
<li><a href="#">中关村大型IT人才招聘会 上千岗位任选！</a></li>
</ul>
</div>
<div class="more">
<img src="data:images/more01.gif">
</div>
<div class="clear"></div>
</div>
<!--学院消息结束-->
<!--一段分割线开始-->
<div class="space"></div>
<!--一段分割线结束-->
<!--校园动态开始-->
<div class="dongtai">
<div class="title"><span>校园</span>动态</div>
<div class="img floatL">
<img src="data:images/img06.jpg"><br>
开拓视野,展现自我,，“非你莫属”我们来啦！
</div>
<div class="huodong floatR">
<h2>班级活动</h2>
<ul>
<li><a href="#">PHP学院IT专场招聘会成功举办！</a></li>
<li><a href="#">PHP学院学员参与录制，“非你莫属”我们来啦！</a></li>
<li><a href="#">PHP学院5.07班学员登百望山有氧运动</a></li>
<li><a href="#">PHP学院2.28班海奥森“HAPPY”徒步之旅</a></li>
<li><a href="#">PHP学院3.30班学员香山一日游</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院3.30班学员香山一日游</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
<li><a href="#">PHP学院12.29元旦晚会—不做孬种程序员</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="more"></div>
</div>
<!--校园动态结束-->
<div class="space"></div>
<!--论坛热帖开始-->
<div class="retie">
<div class="title"><span>论坛</span>热帖</div>
<div class="content">
<ul class="overflow">
<li><a href="#">金秋十月，传智1016PHP就业班开班啦</a></li>
<li><a href="#">2013 年国内 IT 行业薪资一览</a></li>
<li><a href="#">热烈祝贺第一期同学刘新创办长青科技</a></li>
<li><a href="#">1212 赢金币，PHP基础测试，参与得金币！</a></li>
<li><a href="#">关于韩顺平老师坦克大战的一个问题</a></li>
<li><a href="#">关于韩顺平老师坦克大战的问题</a></li>
<li><a href="#">一些资深的老程序员谈用哪种方法学习PHP最</a></li>
<li><a href="#">求一份正则表达式的教程</a></li>
<li><a href="#">smarty模板目录和路径文件问题</a></li>
<li><a href="#">PHP程序局域网不能实现上传??</a></li>
<li><a href="#">新人求韩顺平老师的smarty教程部门留言板的</a></li>
<li><a href="#"> 求助：php升级之后，网站显示空白</a></li>
</ul>
</div>
</div>
<!--论坛热帖结束-->
<div class="space"></div>
<!--PHP培训学员呐喊开始-->
<div class="nahan">
<div class="title"><span>PHP培训学员</span>呐喊</div>
<div class="img floatL">
<img src="data:images/img07.jpg"><br>
传智播客PHP学院就业明星-张巍
</div>
<div class="jiuye floatL">
<h2>就业信息</h2>
<ul>
<li><a href="#">贾＊＊ 2013.11.26 六＊广告有限公司 5000</a></li>
<li><a href="#">郝＊＊ 2013.11.24 宁波土＊有限公司 5000</a></li>
<li><a href="#">耿 ＊ 2013.11.21 中＊百文有限公司 4500</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">崔＊＊ 2013.11.18 天津达＊分校 4750</a></li>
<li><a href="#">高＊＊ 2013.11.17 中＊腾达科技公司 4000</a></li>
<li><a href="#">鲍＊＊ 2013.11.19 佰＊科技有限公司 5000</a></li>
<li><a href="#">韩 ＊ 2013.11.15 吉＊商科技有限公司 4500</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--PHP培训学员呐喊结束-->
<div class="space"></div>
<!--学员感言开始-->
<div class="ganyan">
<div class="title">
<span class="span1">学员</span>感言
<span class="span2"><a href="#">+More</a></span>
</div>
<div class="content floatL">
<img src="data:images/img08.jpg" />
<p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>杜宏海:同学到其它机构学完..</a></li>
<li><a href="#"><span class="red">[php学员]</span>杨*斌:一个小学生的奋斗史..</a></li>
<li><a href="#"><span class="red">[php学员]</span>黄超:传智播客,让我月薪增长到..</a></li>
<li><a href="#"><span class="red">[php学员]</span>刘传华:传智,我人生中的转折点..</a></li>
</ul>
</div>
<div class="content floatR">
<img src="data:images/img09.jpg" />
<p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</li></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>吴思阳:传智之旅-真正的升华..</a></li>
<li><a href="#"><span class="red">[php学员]</span>郝建设:短暂时光的改变..</a></li>
<li><a href="#"><span class="red">[php学员]</span>李玉宝:零基础学员,刚毕业就拿..</a></li>
<li><a href="#"><span class="red bold">查看更多学员感言</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--学员感言结束-->
<div class="space"></div>
<!--PHP培训名师答疑开始-->
<div class="dayi">
<div class="title">
<span class="span1">PHP培训</span>名师答疑
<span class="span2"><a href="#">+More</a></span>
</div>
<div class="img floatL">
<img src="data:images/img10.jpg">
</div>
<div class="content floatR">
<ul>
<li><a href="#">PHP应该学什么,如何学好PHP(三)</a></li>
<li><a href="#">PHP应该学什么,如何学好PHP(二)</a></li>
<li><a href="#">一个渴求学习但不知如何下手学生咨询</a></li>
<li><a href="#">印度哥们咨询tomcat配置问题</a></li>
<li><a href="#">请教先学习PHP还是JAVA的问题</a></li>
<li><a href="#">怎么设置自己做好的自定义404错误页面</a></li>
<li><a href="#">传智播客PHP视频教程手册大全</a></li>
<li><a href="#">韩老师回答大一学生如何选择专业问题</a></li>
<li><a href="#">传智PHP视频的几点问题，请韩老师回复</a></li>
<li><a href="#">韩老师，能把PHP课程笔记发给我吗？</a></li>
<li><a href="#">一位农民工流动人员给韩老师一封信</a></li>
<li><a href="#">查看更多答疑信息</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--PHP培训名师答疑结束-->
</div>
<!--left结束-->
<!--right开始-->
<div class="right"></div>
<!--right结束-->
</div>
<!--box结束-->
<!--footer开始-->
<div class="footer"></div>
<!--footer结束-->
</body>
</html>
/*index的css样式*/ /*css初始化*/
body,ul,ol,li,img,a,p,h1,h2,h3,h4,h5{margin:0px;padding:0px;}
ul,ol,li{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
body{color:#444;font-size:12px;background:#F1F1F1 url(../images/bg-body.gif) repeat-x;}
.clear{clear:both;}
.floatL{float: left;}
.floatR{float: right;}
.overflow{overflow: hidden;} /*box*/
.box{width:975px;border:1px solid red;margin:0px auto;}
/*header开始*/
/*top部分*/
.header .top{
height:27px;
line-height:27px;
padding-left:10px;
color:#2484CA
} .header .top span{
float: right;
} .header .top a{
border-right:1px solid #444;
padding:0px 10px;
}
.header .top .blue:link,.header .top .blue:visited{
color:blue;
}
.header .top .blue:hover{
color:red;
}
.header .top .red:link,.header .top .red:visited{
color: #B63232
}
.header .top .noline{
border: none;
} /*logo部分*/
.header .logo{
height:121px;
background: url(../images/bg-logo.jpg) no-repeat right bottom;
}
.header .logo .logoL{
width: 202px;
padding-top:23px;
float: left;
}
.header .logo .logoM{
float:left;
width:380px;
padding-left:20px;
padding-top: 40px;
}
.header .logo .logoM h2{
font-size:24px;
color: #0473C4;
}
.header .logo .logoM li{
background:url(../images/li01.png);
width: 68px;
height:20px;
line-height:20px;
float:left;
margin-top:10px;
margin-right:15px;
padding-left: 10px;
color:#fff;
}
.header .logo .logoR{
width:360px;
float:right;
padding-top: 16px;
} /*导航栏开始*/
.header .menu{
height: 47px
}
.header .menu li{
height:47px;
line-height: 47px;
float:left;
text-align:center;
margin-left:5px;
}
.header .menu ul a{
display:block;
width: 73px;
color: #fff;
}
.header .menu ul a:hover{
background: url(../images/menu2.gif);
}
.header .menu .a2{
width: 85px;
}
.header .menu .a2:hover{
background: url(../images/menu1.gif);
}
.header .menu .current{
background: url(../images/menu2.gif);
} /*分享栏开始*/
.share img{
padding-left: 10px;
}
.share .qita{
height: 35px;
line-height: 35px;
display:block;
}
.share .qita a{
background: url(../images/li02.jpg) no-repeat left center;
padding-left: 10px;
margin-right: 5px;
}
.share .qita span{
font-size:14px;
font-weight: bold;
margin-right: 5px;
} /*网页左边部分开始*/
.left{
width:630px;
}
/*开学开始*/
.left .kaixue{
padding:10px;
background-color:#fff;
} .left .kaixue .title{
background:url(../images/jiantou.jpg) no-repeat right bottom;
margin-bottom: 10px;
font-family: 黑体;
}
.left .kaixue .title .span1{
color: #0174C9;
font-size: 24px;
padding-right: 48px;
}
.left .kaixue .lunbo{
width: 300px;
height: 216px;
}
.left .kaixue .shipin{
width: 310px;
}
.left .kaixue .shipin img{
width: 142px;
height: 88px;
margin-bottom: 5px;
}
.left .kaixue .shipin li{
float: left;
text-align: center;
padding-left: 10px;
padding-top: 5px;
} /*学院消息开始*/
.left .info{
background-color: #fff;
padding: 10px;
}
.left .info .title{
}
.left .info .content li{
line-height: 20px;
float: left;
width: 300px;
}
.left .info .content .red{
color: red;
}
.left .info .content .blue{
color:blue;
}
.left .info .more{
float: right;
padding-top:10px;
}
/*一段分割线*/
.left .space{
height: 10px;
width: 630px;
} /*校园动态开始*/
.left .dongtai{
background-color: #fff;
padding:10px;
}
.left .dongtai .title{
border-bottom: 1px dashed #ccc;
background: url(../images/jiantou.jpg) no-repeat right center;
height: 30px;
line-height: 30px;
font-size:20px;
font-weight: bold;
font-family: 黑体;
margin-bottom: 10px;
}
.left .dongtai .title span{
color: #0174C9
}
.left .dongtai .img{
text-align: center;
}
.left .dongtai .img img{
margin-bottom: 5px;
}
.left .dongtai .huodong{
width: 300px;
}
.left .dongtai .huodong h2{
color: #8F8F8F;
margin-bottom:10px;
}
.left .dongtai .huodong li{
height: 22px;
line-height: 22px;
background: url(../images/li04.jpg) no-repeat left center;
padding-left:8px;
}
.left .dongtai .more{
height:20px;
background: url(../images/more01.gif) no-repeat right bottom;
} /*论坛热帖开始*/
.left .retie{
padding:10px;
background-color:#fff;
}
.left .retie .title{
height: :34px;
line-height: 34px;
font-size:20px;
margin-bottom: 10px;
background: url(../images/bg01.gif) no-repeat;
padding-left: 20px;
}
.left .retie span{
color: #0174C9;
}
.left .retie .content li{
height: 22px;
line-height: 22px;
background: url(../images/li05.gif) no-repeat left center;
padding-left:15px;
float:left;
width: 288px;
} /*PHP学员呐喊*/
.left .nahan{
padding:10px;
background-color:#fff;
}
.left .nahan .title{
height: :34px;
line-height: 34px;
font-size:20px;
margin-bottom: 10px;
background: url(../images/bg01.gif) no-repeat;
padding-left: 20px;
}
.left .nahan .title span{
color: #0174C9;
}
.left .nahan .img{
text-align: center;
margin-right: 30px;
}
.left .nahan .img img{
margin-bottom: 5px;
}
.left .nahan .jiuye h2{
color: #8F8F8F;
margin-bottom:10px;
}
.left .nahan .jiuye li{
height: 22px;
line-height: 22px;
background: url(../images/li04.jpg) no-repeat left center;
padding-left:8px;
} /*学员感言*/
.left .ganyan{
padding:10px;
background-color:#fff;
}
.left .ganyan .title{
width:600px;
height:34px;
background:url(../images/bg01.gif) no-repeat;
line-height:34px;
font-size:20px;
padding-left:20px;
}
.left .ganyan .span1{
float:left;
color: #0174C9;
}
.left .ganyan .span2{
float:right;
padding-right:10px;
}
.left .ganyan .content{
width:300px;
padding-top:10px;
padding-left:5px;
}
.left .ganyan .content img{
float:left;
}
.left .ganyan .content p{
float:right;
width:180px;
background:url(../images/li06.gif) no-repeat 0px 3px;
padding-right:8px;
text-indent:15px;
height:20px;
line-height:20px;
}
.left .ganyan .content ul{
background:url(../images/li07.gif) no-repeat 0px 6px;
padding-left:20px;
}
.left .ganyan .content li{
height:29px;
line-height:29px;
} /*名师答疑*/
.left .dayi{
background-color:#fff;
padding: 10px;
}
.left .dayi .title{
width:600px;
height:34px;
background:url(../images/bg01.gif) no-repeat;
line-height:34px;
font-size:20px;
padding-left:20px;
padding-bottom:10px;
}
.left .dayi .span1{
float:left;
color: #0174C9;
}
.left .dayi .span2{
float:right;
padding-right:10px;
}
.left .dayi .img{
padding-left: 10px;
}
.left .dayi .content{
width:498px;
}
.left .dayi .content li{
height: 22px;
line-height: 22px;
background: url(../images/li03.jpg) no-repeat left center;
padding-left:12px;
float:left;
width:210px;
padding-right:27px;
}
怒敲代码600行...