标签：南京 平面设计 ott blog 培训机构 人才 tle word 公开课
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>网页标题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link href="css/public.css" rel="stylesheet" type="text/css" /> 9 </head> 10 <body> 11 <div class="box"> 12 <div class="top"> 13 <span>专业的网页设计、平面设计培训机构<img src="images/hot.gif"></span> 14 <ul> 15 <li><a href="#">网站首页</a></li> 16 <li><a href="#" id="red">免费公开课</a></li> 17 <li><a href="#" id="red">校园生活</a></li> 18 <li><a href="#" id="blue">传智特刊</a></li> 19 <li><a href="#">人才服务</a></li> 20 <li><a href="#">招贤纳士</a></li> 21 <li><a href="#">联系我们</a></li> 22 </ul> 23 </div> 24 <div class="logo"> 25 <div class="di"><img src="images/logo.gif"></div> 26 <div class="vid"><img src="images/topword.gif"></div> 27 <div class="dv"> 28 <h4>PHP学院</h4> 29 <ul> 30 <li><a href="#">北京校区</a></li> 31 <li><a href="#">上海校区</a></li> 32 <li><a href="#">广州校区</a></li> 33 <li><a href="#">武汉校区</a></li> 34 <li><a href="#">成都校区</a></li> 35 <li><a href="#">长沙校区</a></li> 36 <li><a href="#">南京校区</a></li> 37 </ul> 38 </div> 39 </div> 40 <div class="menu"> 41 <ul> 42 <li><a href="#" class="a1">首页</a></li> 43 <li><a href="#" class="a2">PHP培训课程</a></li> 44 <li><a href="#" class="a2">PHP视频下载</a></li> 45 <li><a href="#">人才服务</a></li> 46 <li><a href="#">校园生活</a></li> 47 <li><a href="#">师资力量</a></li> 48 <li><a href="#">就业信息</a></li> 49 <li><a href="#">报名流程</a></li> 50 <li><a href="#" class="a1">原创教材</a></li> 51 <li><a href="#">常见问题</a></li> 52 <li><a href="#">来校路线</a></li> 53 <li><a href="#">技术论坛</a></li> 54 </ul> 55 </div> 56 <p></p> 57 </div> 58 </body> 59 </html>
1 /*全局布置*/ 2 body,a,h4,ul,li{ 3 padding:0;margin:0; 4 } 5 ul li{ 6 list-style-type:none; 7 } 8 a:link,a:visited{ 9 color:gray;text-decoration:none; 10 } 11 a:hover{color:red;} 12 body{ 13 font-size:12px; 14 color:gray; 15 background:#ccc url(../images/bg-body.gif) repeat-x; 16 } 17 img{border:0} 18 .box{ 19 width:1000px; 20 margin:0px auto; 21 } 22 #red{color:blue;} 23 /*top层样式*/ 24 .top{ 25 height:27px; 26 line-height:27px; 27 } 28 .top span{ 29 float:left; 30 color:#0033ff; 31 padding-left:15px 32 } 33 .top ul{ 34 float:right; 35 } 36 .top ul li{ 37 float:left; 38 } 39 .top a{ 40 padding:0px 10px; 41 border-right:1px dotted gray; 42 } 43 #blue{color:cc0033;} 44 /*logo层样式*/ 45 .logo{ 46 height:122px; 47 background:url(../images/bg-logo.jpg) no-repeat right bottom; 48 } 49 .logo .di{ 50 width:210px; 51 height:99px; 52 float:left; 53 padding-top:23px; 54 } 55 .logo .dv{ 56 width:420px; 57 height:122px; 58 float:right; 59 } 60 .logo .dv h4{ 61 color:blue; 62 font-size:28px; 63 padding-left:15px; 64 } 65 .logo .dv li{ 66 width:78px; 67 height:22px; 68 line-height:22px; 69 color:white; 70 float:left; 71 margin:5px 10px; 72 padding-left:3px; 73 } 74 .logo .dv a{ 75 display:block; 76 color:white; 77 text-align:center; 78 background:url(../images/li01.png) no-repeat; 79 } 80 .logo .vid{ 81 width:360px; 82 height:106px; 83 padding-top:16px; 84 float:right; 85 } 86 /*dao层样式*/ 87 .menu{ 88 height:47px; 89 line-height:47px; 90 color:white; 91 padding-left:5px; 92 } 93 .menu li{ 94 padding-right:6px; 95 float:left; 96 } 97 .menu a{ 98 display:block; 99 color:white; 100 width:73px; 101 height:47px; 102 text-align:center; 103 } 104 .menu a:hover{ 105 background:url(../images/menu2.gif) no-repeat; 106 } 107 .menu .a2{ 108 width:85px; 109 height:47px; 110 text-align:center; 111 } 112 .menu .a2:hover{ 113 background:url(../images/menu1.gif) no-repeat; 114 } 115 .menu .a1:link,.a1:visited{ 116 background:url(../images/menu2.gif) no-repeat; 117 }
标签：南京 平面设计 ott blog 培训机构 人才 tle word 公开课
原文地址：http://www.cnblogs.com/chenjiaping/p/6115988.html
