首页 > 代码库 > 2016.12.01

2016.12.01

2024-08-24 15:31:48   221人阅读

传智官网

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;
}

 

2016.12.01


联系
我们