首页 > 代码库 > css(二)
css(二)
重新排传智的首页!头部和左边的部分完成了!
<!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="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="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="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="images/ppt1.jpg"> </div> <div class="shipin floatR"> <ul> <li><a href="#"><img src="images/img01.jpg"></a><br>陈建利专题-我有我原则</li> <li><a href="#"><img src="images/img02.jpg"></a><br>张巍专题-我为创业狂</li> <li><a href="#"><img src="images/img03.jpg"></a><br>小林催人泪下经历</li> <li><a href="#"><img src="images/img04.jpg"></a><br>曹伟-玩酷我的程序人生</li> </ul> </div> <div class="clear"></div> </div> <!--开学结束--> <!--学院消息开始--> <div class="info"> <div class="title"> <img src="images/college.jpg"> </div> <div class="content"> <ul class="overflow"> <li><a href="#"><b class="red">2013年限时钜惠,PHP基础班免费学!</b></a><img src="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="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="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="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="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="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="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行...
css(二)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。