CSS6

最新推荐文章于 2024-10-04 13:34:26 发布

banyan3799

最新推荐文章于 2024-10-04 13:34:26 发布

阅读量80

点赞数

文章标签： ui php java

原文链接：http://www.cnblogs.com/781206878-qq/p/6123982.html

版权

 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导航栏样式*/