php首页 

 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 }

 

posted @ 2016-11-29 23:58  佳平  阅读(218)  评论(1)    收藏  举报