标签：order 网页设计 href 平面设计 学院 style 免费 php培训 display
传智官网
HTML:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>传智官网</title> 6 <link rel="stylesheet" href="css/index.css" /> 7 </head> 8 <body> 9 <!--box开始--> 10 <div class="box"> 11 12 <!--header开始--> 13 <div class="header"> 14 <!--top开始--> 15 <div class="top"> 16 <div class="divL"> 17 专业的java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、ios培训机构 18 </div> 19 20 <div class="divR"> 21 <a href="#">网站首页</a><a href="#" class="a1">免费公开课</a><a href="#" class="a1">校园生活</a><a href="#" class="a2">传智特刊</a><a href="#">人才服务</a><a href="#">招贤纳士</a><a href="#" class="noline">联系我们</a> 22 </div> 23 </div> 24 <!--//top结束--> 25 <!--logo开始--> 26 <div class="logo"> 27 <div class="divL"> 28 <img src="img/logo.gif" /> 29 </div> 30 <div class="divC"> 31 <h2>PHP学院</h2> 32 <ul> 33 <li>北京校区</li> 34 <li>成都校区</li> 35 <li>广州校区</li> 36 <li>上海校区</li> 37 </ul> 38 </div> 39 <div class="divR"> 40 <img src="img/topword.gif" /> 41 </div> 42 </div> 43 <!--//logo结束--> 44 <!--nav开始--> 45 <div class="nav"> 46 <ul> 47 <li><a href="#" class="current">首 页</a></li> 48 <li><a href="#" class="a2">PHP培训课程</a></li> 49 <li><a href="#" class="a2">PHP视频下载</a></li> 50 <li><a href="#">人才服务</a></li> 51 <li><a href="#">校园生活</a></li> 52 <li><a href="#">师资力量</a></li> 53 <li><a href="#">就业信息</a></li> 54 <li><a href="#">报名流程</a></li> 55 <li><a href="#">原创教材</a></li> 56 <li><a href="#">常见问题</a></li> 57 <li><a href="#">来校路线</a></li> 58 <li><a href="#">技术论坛</a></li> 59 </ul> 60 </div> 61 <!--//nav结束--> 62 </div> 63 <!--//header结束--> 64 65 <!--left开始--> 66 67 <div class="left"> 68 <!--开学啦--> 69 <div class="left1"> 70 <div class="title"> 71 <span class="span1">我们开学啦</span> 72 <span class="span2">今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途</span> 73 </div> 74 <div class="photo"> 75 <img src="img/ppt1.jpg" /> 76 </div> 77 <div class="photo2"> 78 <ul> 79 <li><a><img src="img/img01.jpg"/></a></li> 80 <li><a><img src="img/img02.jpg"/></a></li> 81 <li><a><img src="img/img03.jpg"/></a></li> 82 <li><a><img src="img/img04.jpg"/></a></li> 83 </ul> 84 </div> 85 </div> 86 </div> 87 <!--//left结束--> 88 89 <!--right开始--> 90 <div class="right"></div> 91 <!--//right结束--> 92 93 <div class="clear"></div> 94 </div> 95 <!--//box结束--> 96 97 <!--底部开始--> 98 <div class="footer"></div> 99 <!--//底部开始--> 100 </body> 101 </html>
CSS:
@charset "utf-8"; body,ul,li,h2,h4,a,p,img{ margin:0; padding:0; } body{ font-size:12px; color:#444; background:url(../img/bg-body.gif) repeat-x left top; } /*box------------------------------------------------------------------------------------------------------------------------*/ .box{ width:973px; margin:0 auto; border:1px solid #111; } /*header--top-----------------------------------*/ .header{ height:196px ; border:1px solid #222; } .header .top{ height:27px; line-height:27px; } .header .top .divL{ color:#0174C7; float:left; } .header .top .divR{ color:#0174C7; float:right; } .header .top .divR a{ border-right:1px dashed #000; text-decoration:none; padding: 0 10px; } .header .top .divR .noline{ border:none; } .header .top .divR a3{ } .header .top .divR a:link,.header .top .divR a:visited{ color:#515151; text-decoration: none; } .header .top .divR a:hover{ color:#f00; } /*a后面接a1,a2时不能有空格 */ .header .top .divR a.a1:link,.header .top .divR a.a1:visited{ color:#00f; } .header .top .divR a.a2:link,.header .top .divR a.a2:visited{ color:#B22222; } /*header--logo-----------------------------------*/ /*挡住了一部分body的背景*/ .logo{ height:122px; background:url(../img/bg-logo.jpg) no-repeat right bottom ; } .logo .divL{ width:210px; height:99px; float:left; padding-top:23px; } .logo .divC{ width:395px; height:87px; float:left; padding-top:35px; } .logo .divR{ width:306px; height:106px; float:left; padding-top:16px; } .logo .divC h2{ height:40px; line-height:40px; color:#0473c4; font-size:24px; font-weight:bold; } .logo .divC li{ background:url(../img/li01.png) no-repeat; list-style:none; float:left; width:68px; height:20px; line-height:20px; margin-right:15px; padding-left:10px; } /*header--nav----------------------------------*/ /*.header .nav { border:1px solid #000; height:47px; line-height:47px; } .header .nav ul{ } .header .nav li{ height:47px; float:left; } .header a{ }*/ .header .nav{ height:47px;line-height:47px; } .header .nav ul{ list-style:none ; } .header .nav li{ height:47px; float:left; margin-right:5px; text-align:center; font-size:12px; font-weight:bold; } .header .nav a:link,.header .nav a:visited{ width:73px; height:47px; color:#FFFFFF; display:block; text-decoration:none; } .header .nav a:hover{ background:url(../img/menu2.gif) no-repeat; } .header .nav a.a2:link,.header .nav a.a2:visited{ color:#FFFFFF; width:85px; height:47px; } .header .nav a.a2:hover{ background:url(../img/menu1.gif) no-repeat; } .header .nav a.current{ color:#FFFFFF;background:url(../img/menu2.gif) no-repeat; } /*//header---------------------------------*/ /*left-开学啦----------------------------------------*/ .left{ width:660px; height:500px; border:1px solid #333; float:left; } .left1 .title{ border:1px solid #000; height:39px; background:url(../img/jiantou.jpg) no-repeat center right; line-height:39px; } .left .title .span1{ border:1px solid #000; color:#0473C4; font-size:20px; font-weight:bold; } .left .title .span2{ border:1px solid #000; font-size:12px; font-weight:bold; } /*//left*/ /*right-*/ .right{ width:295px; height:500px; border:1px solid #444; float:right; } /*//box----------------------------------------------------------------------------------------------------------------------*/ .footer{ width:100%; height:200px; border:1px solid #555; } /*公共属性*/ /*清除浮动*/ .clear{ clear:both; } /*伪类元素设置超链接*/ a:link,a:visited{ text-decoration:none; color:#000; }
标签：order 网页设计 href 平面设计 学院 style 免费 php培训 display
原文地址：http://www.cnblogs.com/jiangyujing/p/6124172.html
