标签：轮播 iba 培训 rect lin 论坛 基础 float no-repeat
按照自己的设计做了传智首页的一部分,虽然网页调的好像差不多了,但是还是感觉结构有点混乱,全局统筹意思有点欠缺,第一是一些切图不知道对应的是哪一部分,第二我觉得也与老师给的作业里面只有半张网页有关系,哈哈哈...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>传智首页</title> <style type="text/css"> /*全局css设置*/ body,p,ul,li,h1{margin:0px;padding:0px;} ul,li{list-style:none;} body{background-color:#F1F1F1;font-size:12px;font-family:Arial,宋体;color: #444;} a:link,a:visited{color:#444;text-decoration:none;} a:hover{color:red;} .clear{clear:both;} /*top模块*/ .top{ width:958px; margin:0px auto; height:20px; line-height:20px; background-color:#DCDADB; } .top p{float:left;color:#1A8DC6;} .top li{float:right;padding-left:4px;} .top .red a:link,.top .red a:visited{color:red;} .top .blue a:link,.top .blue a:visited{color:blue;} .top .blue a:hover{color:red;} /*logo模块*/ .logo{ margin:0px auto; width:958px; height:102px; background:url("images/bg-logo.jpg") no-repeat; position:relative; } .logo .left{ width:202px; height:76px; background: url("images/logo.gif") no-repeat; position: absolute; top:14px; } .logo .middle{ position: absolute; width:390px; top:10px; left:250px; } .logo .middle h1{ color:dodgerblue; float:left; width: 390px; padding-left:4px; padding-bottom: 4px; } .logo .middle li{ background:url("images/li01.png") no-repeat; width:78px; height:20px; float:left; line-height:20px; text-indent:10px; margin:2px 50px 2px 0px; } .logo .right{ background: url("images/topword.gif") no-repeat; width:358px; height:90px; position: absolute; right: 0px; top:6px; } .white:link,.white:visited{color:#fff;} .white:hover{color:red;} /*导航栏*/ .index{ width:958px; height:48px; margin:0px auto; background-color:#1A8DC6; } .index ul{ padding-left:10px; } .index li{ height: 19px; float: left; line-height:19px; font-size:14px; padding:14px 8px; } .index .bg{ background: url("images/menu1.gif") no-repeat; width:75px; text-indent:21px; font-weight:bold; } /*分享,学院模块*/ .box1{ width:958px; margin:0px auto; height:35px; line-height:35px; } .box1 .share{ float:left; padding-left:20px; width:455px; height:35px; } .box1 .colleges{float:right;padding-right:20px;} .box1 .colleges li{ float:right; background:url(images/li02.jpg) no-repeat 0px 13px; text-indent:8px; margin:0px 3px; } .box1 .colleges .big{font-size:14px;font-weight:bold;} /*内容模块*/ .content{ width:958px; margin:0px auto; } /*开学模块*/ .content .box2{ width:650px; background-color:#fff; float:left; } .content .box2 .kaixue{ font-size:14px; border-bottom:1px dashed #ccc; float:left; padding-top:10px; } .content .box2 .kaixue .blue{ color:deepskyblue; font-size:24px; padding:0px 20px 0px 13px; font-weight:bold; } /*图片轮播模块*/ .content .box2 .lunbo{ padding-top:20px; float:left; } /*学员视频模块*/ .content .box2 .xueyuan img{width:142px;height:88px;} .content .box2 .xueyuan ul{ padding-top:20px; float:left;width:320px; margin-left:20px; } .content .box2 .xueyuan li{ float:left; padding-bottom:22px; padding-left:16px; } .content .box2 .xueyuan p{text-indent:10px;} /*开班信息模块*/ .content .box3{ background-color:#F8F8F8; width:295px; float:right; } .content .box3 .title{ font-size:20px; background:url(images/righttitle.gif) no-repeat; height:35px; line-height:35px; padding-left:40px; color:#fff; } .content .box3 li{ border-bottom:1px dashed #ccc; padding:5px 10px; } .content .box3 .kaiban .red{ color:red; font-weight:bold; float:right; } .content .box3 .kaiban .blue{ color:blue; font-weight:bold; float:right; } .content .box3 h4{padding-left:10px;} </style> </head> <body> <div class="top"> <p>专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构</p> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">招贤纳士</a> |</li> <li><span class="red"><a href="#">传智特刊</a></span> |</li> <li><span class="blue"><a href="#">校园生活</a></span> |</li> <li><span class="blue"><a href="#">免费公开课</a></span> |</li> <li><a href="#">网站首页</a> |</li> </ul> </div> <div class="logo"> <div class="left"></div> <div class="middle"> <h1>PHP学员</h1> <ul> <li><a href="#" class="white">北京校区</a></li> <li><a href="#" class="white">上海校区</a></li> <li><a href="#" class="white">广州校区</a></li> <li><a href="#" class="white">武汉校区</a></li> <li><a href="#" class="white">成都校区</a></li> </ul> <div class="clear"></div> </div> <div class="right"></div> </div> <div class="index"> <ul> <li class="bg"><a href="#" class="white">首页</a></li> <li><a href="#" class="white">PHP培训课程</a></li> <li><a href="#" class="white">PHP视频下载</a></li> <li><a href="#" class="white">人才服务</a></li> <li><a href="#" class="white">校园生活</a></li> <li><a href="#" class="white">师资力量</a></li> <li><a href="#" class="white">就业信息</a></li> <li><a href="#" class="white">报名流程</a></li> <li><a href="#" class="white">原创教材</a></li> <li><a href="#" class="white">常见问题</a></li> <li><a href="#" class="white">来校路线</a></li> <li><a href="#" class="white">技术论坛</a></li> </ul> <div class="clear"></div> </div> <div class="box1"> <div class="share"> <img src="images/share.jpg" usemap="#Map" /> <map name="Map"> <area shape="rect" coords="332,5,402,31" href="#"> <area shape="rect" coords="262,5,332,31" href="#"> <area shape="rect" coords="192,5,262,31" href="#"> <area shape="rect" coords="133,5,192,31" href="#"> <area shape="rect" coords="74,5,133,31" href="#"> </map> </div> <div class="colleges"> <ul> <li><a href="#">网页平面设计学院</a></li> <li><a href="#">c/c++学院</a></li> <li><a href="#">ios学院</a></li> <li><a href="#">.net学院</a></li> <li><a href="#">php学院</a></li> <li><span class="big">其它学院入口:</span></li> </ul> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="content"> <div class="box2"> <div class="kaixue"> <p><span class="blue">我们开学了</span>今天我终于来到了心中向往已久的神圣学府--传智播客,开始了改变命运的征途<img src="images/jiantou.jpg"></p> </div> <div class="lunbo"> <img src="images/ppt1.jpg" /> </div> <div class="xueyuan"> <ul overflow="hidden"> <li><a href="#"><img src="images/img04.jpg" /></a><p><a href="#">曹伟-玩酷我的程序人生</a></p></li> <li><a href="#"><img src="images/img02.jpg" /></a><p><a href="#">张巍专题-我为创业狂</a></p></li> <li><a href="#"><img src="images/img03.jpg" /></a><p><a href="#">小林催人泪下经历</a></p></li> <li><a href="#"><img src="images/img01.jpg" /></a><p><a href="#">陈建利专题-我有我原则</a></p></li> </ul> </div> <div class="clear"></div> </div> <div class="box3"> <div class="title"> PHP培训开班信息 </div> <div class="kaiban"> <h4>PHP基础班</h4> <ul> <li><a href="#">北京--10月12号</a><span class="blue">爆满已开班</span></li> <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li> </ul> <h4>PHP就业班</h4> <ul> <li><a href="#">北京--10月16号</a><span class="blue">爆满已开班</span></li> <li><a href="#">北京--11月16号</a><span class="red">预约报名</span></li> </ul> <h4>PHP远程班</h4> <ul> <li><a href="#">北京--10月12号</a><span class="red">预约报名</span></li> <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li> </ul> </div> </div> <div class="clear"></div> </div> </body> </html>
效果图:
标签：轮播 iba 培训 rect lin 论坛 基础 float no-repeat
原文地址：http://www.cnblogs.com/panbee/p/6120184.html
