1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>传智官网首页</title>
6 <link rel="stylesheet" type="text/css" href="css/index.css"/>
7 </head>
8 <body>
9 <!--div开始-->
10 <div class="box">
11 <!--header开始-->
12 <div class="header">
13 <!--top开始-->
14 <div class="top">专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构
15 <span class='floatR'><a href='#'>网站首页</a><a href='#' class='blue'>免费公开课</a><a href='#' class='blue'>校园生活</a><a href='#' class='red'>传智特刊</a><a href='#'>人才服务</a><a href='#'>招贤纳士</a><a href='#' class='noline'>联系我们</a>
16 </span>
17 </div>
18 <!--top结束-->
19 <!--header结束-->
20 </div>
21 <!--logo开始-->
22 <div class="logo">
23 <!--logo左开始-->
24 <div class="logoL floatL">
25 <img src="img/logo.gif"/>
26 </div>
27 <!--logo左结束-->
28 <!--logo中开始-->
29 <div class="logoC floatL">
30 <h1>PHP学院</h1>
31 <ul>
32 <li class="floatL">北京校区</li>
33 <li class="floatL">上海校区</li>
34 <li class="floatL">广州校区</li>
35 <li class="floatL">深圳校区</li>
36 </ul>
37 </div>
38 <!--logo中结束-->
39 <!--logo右开始-->
40 <div class="logoR">
41 <img src="img/topword.gif"/>
42 </div>
43 <!--logo右结束-->
44 </div>
45 <!--logo结束-->
46 <!--nav开始-->
47 <div class="nav">
48 <ul>
49 <li>首页</li>
50 <li>PHP培训课程</li>
51 <li>PHP视频下载</li>
52 <li>人才服务</li>
53 <li>校园生活</li>
54 <li>师资力量</li>
55 <li>就业信息</li>
56 <li>报名流程</li>
57 <li>原创教程</li>
58 <li>常见问题</li>
59 <li>来校路线</li>
60 <li>技术论坛</li>
61 </ul>
62 </div>
63 <!--nav结束-->
64 <!--left开始-->
65 <div class="left"></div>
66 <!--left结束-->
67 <!--right开始-->
68 <div class="right"></div>
69 <!--right结束-->
70 </div>
71 <!--box结束-->
72 </body>
73 </html>
/*全局样式*/
body,ul,li,span,a,img,h1{
margin:0;
padding:0;
}
body{
background: url(../img/bg-body.gif) repeat-x;
font-size: 13px;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
ul li{
list-style: none;
}
/*超链接样式*/
a:link,a:visited{
text-decoration: none;
color: #444;
}
.box .header .top a:hover{
color: #f00;
}
/*box层样式*/
.box{
width:973px;
margin:0 auto;
}
/*top层样式*/
.box .header .top{
height: 27px;
line-height: 27px;
}
.box .header .top{
color:#0174C7;
}
.box .header .top a{
color:#515151;
padding:0 8px;
border-right:1px dotted #444;
}
.box .header .top .blue{
color:#00f;
}
.box .header .top .red{
color:#f00;
}
.noline{
border-right: none !important;
}
/*logo层样式*/
.box .logo{
height: 122px;
background: url(../img/bg-logo.jpg) no-repeat right bottom;
}
.box .logo .logoC{
padding-top:20px;
}
.box .logo .logoC h1{
padding-top:10px;
padding-bottom: 10px;
color:#0473C4;
}
.box .logo .logoC ul li{
width:68px;
height: 20px;
line-height: 20px;
background-image: url(../img/li01.png);
color: #fff;
margin-right:10px;
padding-left: 10px;
}
.box .logo .logoL{
padding:23px 10px;
}
.box .logo .logoR{
padding-top:20px;
}
/*nav导航栏样式*/
