首页 > 代码库 > css(二)

css(二)

重新排传智的首页!头部和左边的部分完成了!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <title>传智首页-专业的IT培训机构</title>
</head>
<body>
    <!--box开始-->
    <div class="box">
        <!--header开始-->
        <div class="header">
            <!--top开始-->
            <div class="top">
                专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构
                <span>
                    <a href="#">网站首页</a></li><a href="#" class="blue">免费公开课</a></li><a href="#" class="blue">校园生活</a></li><a href="#" class="red">传智特刊</a></li><a href="#">人才服务</a></li><a href="#">招贤纳士</a></li><a href="#" class="noline">联系我们</a></li>
                </span>    
            </div>
            <!--top结束-->
            <!--logo开始-->
            <div class="logo">
                <div class="logoL">
                    <a href="#"><img src="images/logo.gif"></a>
                </div>
                <div class="logoM">
                    <h2>PHP学院</h2>
                    <ul>
                        <li>北京校区</li>
                        <li>上海校区</li>
                        <li>广州校区</li>
                        <li>深圳校区</li>
                    </ul>
                </div>
                <div class="logoR">
                    <img src="images/topword.gif">
                </div>
            </div>
            <!--logo结束-->
            <!--导航栏开始-->
            <div class="menu">
                <ul>
                    <li><a class="current" href="#">首 页</a></li>
                    <li><a class="a2" href="#">PHP培训课程</a></li>
                    <li><a class="a2" href="#">PHP视频下载</a></li>
                    <li><a href="#">人才服务</a></li>
                    <li><a href="#">校园生活</a></li>
                    <li><a href="#">师资力量</a></li>
                    <li><a href="#">就业信息</a></li>
                    <li><a href="#">报名流程</a></li>
                    <li><a href="#">原创教材</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">来校路线</a></li>
                    <li><a href="#">技术论坛</a></li>
                </ul>
            </div>
            <!--导航栏结束-->
        <!--header结束-->
        <!--分享栏开始-->
        <div class="share">
            <div class="floatL">
                <img src="images/share.jpg" usemap="#Map">
                <map name="Map"><area shape="rect" coords="331,4,401,31" href="#"><area shape="rect" coords="261,4,331,31" href="#"><area shape="rect" coords="191,4,261,31" href="#"><area shape="rect" coords="132,4,191,32" href="#">
                  <area shape="rect" coords="73,4,132,32" href="#">
                </map>
            </div>
            <div class="qita floatR">
                <span>其它学院入口:</span><a href="#">.php学院</a><a href="#">.net学院</a><a href="#">ios学院</a><a href="#">c/c++学院</a><a href="#">网页平面设计学院</a>
            </div>
            <div class="clear"></div>
        </div>
        <!--分享栏结束-->
        <!--left开始-->
        <div class="left">
            <!--开学开始-->
            <div class="kaixue">
                <div class="title">
                    <span class="span1">我们开学啦</span>今天我终于来到了心中向往已久的神圣学府--传智播客,开始了改变命运的征途
                </div>
                <div class="lunbo floatL">
                    <img src="images/ppt1.jpg">
                </div>
                <div class="shipin floatR">
                    <ul>
                        <li><a href="#"><img src="images/img01.jpg"></a><br>陈建利专题-我有我原则</li>
                        <li><a href="#"><img src="images/img02.jpg"></a><br>张巍专题-我为创业狂</li>
                        <li><a href="#"><img src="images/img03.jpg"></a><br>小林催人泪下经历</li>
                        <li><a href="#"><img src="images/img04.jpg"></a><br>曹伟-玩酷我的程序人生</li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!--开学结束-->
            <!--学院消息开始-->
            <div class="info">
                <div class="title">
                    <img src="images/college.jpg">
                </div>
                <div class="content">
                    <ul class="overflow">
                        <li><a href="#"><b class="red">2013年限时钜惠,PHP基础班免费学!</b></a><img src="images/hot.gif"></li>
                        <li><a href="#">ci电子商城-开发速度最快的PHP框架!</a></li>
                        <li><a href="#"><b class="blue">2013年传智播客PHP课程最新升级</b></a></li>
                        <li><a href="#">国内首家推出企业急需六大核心技术!!</a></li>
                        <li><a href="#"><b class="blue">学PHP编程,不做孬种程序员!</b></a></li>
                        <li><a href="#">新年开门红,俩学员毕业入职月薪过万!</a></li>
                        <li><a href="#">PHP学院年薪20-40万招聘讲师</a></li>
                        <li><a href="#">传智播客PHP视频教程配套笔记,更新到第114讲</a></li>
                        <li><a href="#">拒绝"上半天,自学半天"的教学培训</a></li>
                        <li><a href="#">中关村大型IT人才招聘会 上千岗位任选!</a></li>
                    </ul>
                </div>
                <div class="more">
                    <img src="images/more01.gif">
                </div>
                <div class="clear"></div>
            </div>
            <!--学院消息结束-->
            <!--一段分割线开始-->
            <div class="space"></div>
            <!--一段分割线结束-->
            <!--校园动态开始-->
            <div class="dongtai">
                <div class="title"><span>校园</span>动态</div>
                <div class="img floatL">
                    <img src="images/img06.jpg"><br>
                    开拓视野,展现自我,,“非你莫属”我们来啦!
                </div>
                <div class="huodong floatR">
                    <h2>班级活动</h2>
                    <ul>
                        <li><a href="#">PHP学院IT专场招聘会成功举办!</a></li>
                        <li><a href="#">PHP学院学员参与录制,“非你莫属”我们来啦!</a></li>
                        <li><a href="#">PHP学院5.07班学员登百望山有氧运动</a></li>
                        <li><a href="#">PHP学院2.28班海奥森“HAPPY”徒步之旅</a></li>
                        <li><a href="#">PHP学院3.30班学员香山一日游</a></li>
                        <li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
                        <li><a href="#">PHP学院3.30班学员香山一日游</a></li>
                        <li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
                        <li><a href="#">PHP学院讲师百望山徒步之旅</a></li>
                        <li><a href="#">PHP学院12.29元旦晚会—不做孬种程序员</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="more"></div>
            </div>
            <!--校园动态结束-->
            <div class="space"></div>
            <!--论坛热帖开始-->
            <div class="retie">
                <div class="title"><span>论坛</span>热帖</div>
                <div class="content">
                    <ul class="overflow">
                        <li><a href="#">金秋十月,传智1016PHP就业班开班啦</a></li>
                        <li><a href="#">2013 年国内 IT 行业薪资一览</a></li>
                        <li><a href="#">热烈祝贺第一期同学刘新创办长青科技</a></li>
                        <li><a href="#">1212 赢金币,PHP基础测试,参与得金币!</a></li>
                        <li><a href="#">关于韩顺平老师坦克大战的一个问题</a></li>
                        <li><a href="#">关于韩顺平老师坦克大战的问题</a></li>
                        <li><a href="#">一些资深的老程序员谈用哪种方法学习PHP最</a></li>
                        <li><a href="#">求一份正则表达式的教程</a></li>
                        <li><a href="#">smarty模板目录和路径文件问题</a></li>
                        <li><a href="#">PHP程序局域网不能实现上传??</a></li>
                        <li><a href="#">新人求韩顺平老师的smarty教程部门留言板的</a></li>
                        <li><a href="#"> 求助:php升级之后,网站显示空白</a></li>
                    </ul>
                </div>
            </div>
            <!--论坛热帖结束-->
            <div class="space"></div>
            <!--PHP培训学员呐喊开始-->
            <div class="nahan">
                <div class="title"><span>PHP培训学员</span>呐喊</div>
                <div class="img floatL">
                    <img src="images/img07.jpg"><br>
                    传智播客PHP学院就业明星-张巍
                </div>
                <div class="jiuye floatL">
                    <h2>就业信息</h2>
                    <ul>
                        <li><a href="#">贾** 2013.11.26  六*广告有限公司  5000</a></li>
                        <li><a href="#">郝** 2013.11.24  宁波土*有限公司  5000</a></li>
                        <li><a href="#">耿  * 2013.11.21  中*百文有限公司  4500</a></li>
                        <li><a href="#">鲍** 2013.11.19  佰*科技有限公司  5000</a></li>
                        <li><a href="#">鲍** 2013.11.19  佰*科技有限公司  5000</a></li>
                        <li><a href="#">崔** 2013.11.18  天津达*分校  4750</a></li>
                        <li><a href="#">高** 2013.11.17  中*腾达科技公司  4000</a></li>
                        <li><a href="#">鲍** 2013.11.19  佰*科技有限公司  5000</a></li>
                        <li><a href="#">韩  * 2013.11.15  吉*商科技有限公司  4500</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!--PHP培训学员呐喊结束-->
            <div class="space"></div>
            <!--学员感言开始-->
            <div class="ganyan">
                <div class="title">
                    <span class="span1">学员</span>感言
                    <span class="span2"><a href="#">+More</a></span>
                </div>
                <div class="content floatL">
                    <img src="images/img08.jpg" />
                    <p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
                    <div class="clear"></div>
                    <ul>
                        <li><a href="#"><span class="red">[php学员]</span>杜宏海:同学到其它机构学完..</a></li>
                        <li><a href="#"><span class="red">[php学员]</span>杨*斌:一个小学生的奋斗史..</a></li>
                        <li><a href="#"><span class="red">[php学员]</span>黄超:传智播客,让我月薪增长到..</a></li>
                        <li><a href="#"><span class="red">[php学员]</span>刘传华:传智,我人生中的转折点..</a></li>
                    </ul>
                </div>
                <div class="content floatR">
                    <img src="images/img09.jpg" />
                    <p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</li></p>
                    <div class="clear"></div>
                    <ul>
                        <li><a href="#"><span class="red">[php学员]</span>吴思阳:传智之旅-真正的升华..</a></li>
                        <li><a href="#"><span class="red">[php学员]</span>郝建设:短暂时光的改变..</a></li>
                        <li><a href="#"><span class="red">[php学员]</span>李玉宝:零基础学员,刚毕业就拿..</a></li>
                        <li><a href="#"><span class="red bold">查看更多学员感言</span></a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!--学员感言结束-->
            <div class="space"></div>
            <!--PHP培训名师答疑开始-->
            <div class="dayi">
                <div class="title">
                    <span class="span1">PHP培训</span>名师答疑
                    <span class="span2"><a href="#">+More</a></span>
                </div>
                <div class="img floatL">
                    <img src="images/img10.jpg">
                </div>
                <div class="content floatR">
                    <ul>
                        <li><a href="#">PHP应该学什么,如何学好PHP(三)</a></li>
                        <li><a href="#">PHP应该学什么,如何学好PHP(二)</a></li>
                        <li><a href="#">一个渴求学习但不知如何下手学生咨询</a></li>
                        <li><a href="#">印度哥们咨询tomcat配置问题</a></li>
                        <li><a href="#">请教先学习PHP还是JAVA的问题</a></li>
                        <li><a href="#">怎么设置自己做好的自定义404错误页面</a></li>
                        <li><a href="#">传智播客PHP视频教程手册大全</a></li>
                        <li><a href="#">韩老师回答大一学生如何选择专业问题</a></li>
                        <li><a href="#">传智PHP视频的几点问题,请韩老师回复</a></li>
                        <li><a href="#">韩老师,能把PHP课程笔记发给我吗?</a></li>
                        <li><a href="#">一位农民工流动人员给韩老师一封信</a></li>
                        <li><a href="#">查看更多答疑信息</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <!--PHP培训名师答疑结束-->
        </div>
        <!--left结束-->
        <!--right开始-->
        <div class="right"></div>
        <!--right结束-->
    </div>
    <!--box结束-->
    <!--footer开始-->
    <div class="footer"></div>
    <!--footer结束-->
</body>
</html>
/*index的css样式*/

/*css初始化*/
body,ul,ol,li,img,a,p,h1,h2,h3,h4,h5{margin:0px;padding:0px;}
ul,ol,li{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
body{color:#444;font-size:12px;background:#F1F1F1 url(../images/bg-body.gif) repeat-x;}
.clear{clear:both;}
.floatL{float: left;}
.floatR{float: right;}
.overflow{overflow: hidden;}

/*box*/
.box{width:975px;border:1px solid red;margin:0px auto;}
/*header开始*/
/*top部分*/
.header .top{
    height:27px;
    line-height:27px;
    padding-left:10px;
    color:#2484CA
    }

.header .top span{
    float: right;
    }

.header .top a{
    border-right:1px solid #444;
    padding:0px 10px;
}
.header .top .blue:link,.header .top .blue:visited{
    color:blue;
}
.header .top .blue:hover{
    color:red;
}
.header .top .red:link,.header .top .red:visited{
    color: #B63232
}
.header .top .noline{
    border: none;
}

/*logo部分*/
.header .logo{
    height:121px;
    background: url(../images/bg-logo.jpg) no-repeat right bottom;
}
.header .logo .logoL{
    width: 202px;
    padding-top:23px;
    float: left;
}
.header .logo .logoM{
    float:left;
    width:380px;
    padding-left:20px; 
    padding-top: 40px;
}
.header .logo .logoM h2{
    font-size:24px;
    color: #0473C4;
}
.header .logo .logoM li{
    background:url(../images/li01.png);
    width: 68px;
    height:20px;
    line-height:20px;
    float:left;
    margin-top:10px;
    margin-right:15px;
    padding-left: 10px;
    color:#fff;
}
.header .logo .logoR{
    width:360px;
    float:right;
    padding-top: 16px;
}

/*导航栏开始*/
.header .menu{
    height: 47px
}
.header .menu li{
    height:47px;
    line-height: 47px;
    float:left;
    text-align:center;
    margin-left:5px;
}
.header .menu ul a{
    display:block;
    width: 73px;
    color: #fff;
}
.header .menu ul a:hover{
    background: url(../images/menu2.gif);
}
.header .menu .a2{
    width: 85px;
}
.header .menu .a2:hover{
    background: url(../images/menu1.gif);
}
.header .menu .current{
    background: url(../images/menu2.gif);
}

/*分享栏开始*/
.share img{
    padding-left: 10px;
}
.share .qita{
    height: 35px;
    line-height: 35px;
    display:block;
}
.share .qita a{
    background: url(../images/li02.jpg) no-repeat left center;
    padding-left: 10px;
    margin-right: 5px;
}
.share .qita span{
    font-size:14px;
    font-weight: bold;
    margin-right: 5px;
}

/*网页左边部分开始*/
.left{
    width:630px;
}
/*开学开始*/
.left .kaixue{
    padding:10px;
    background-color:#fff;
}

.left .kaixue .title{
    background:url(../images/jiantou.jpg) no-repeat right bottom;
    margin-bottom: 10px;
    font-family: 黑体;
}
.left .kaixue .title .span1{
    color: #0174C9;
    font-size: 24px;
    padding-right: 48px;
}
.left .kaixue .lunbo{
    width: 300px;
    height: 216px;
}
.left .kaixue .shipin{
    width: 310px;
}
.left .kaixue .shipin img{
    width: 142px;
    height: 88px;
    margin-bottom: 5px;
}
.left .kaixue .shipin li{
    float: left;
    text-align: center;
    padding-left: 10px;
    padding-top: 5px;
}

/*学院消息开始*/
.left .info{
    background-color: #fff;
    padding: 10px;
}
.left .info .title{
}
.left .info .content li{
    line-height: 20px;
    float: left;
    width: 300px;
}
.left .info .content .red{
    color: red;
}
.left .info .content .blue{
    color:blue;
}
.left .info .more{
    float: right;
    padding-top:10px;
}
/*一段分割线*/
.left .space{
    height: 10px;
    width: 630px;
}

/*校园动态开始*/
.left .dongtai{
    background-color: #fff;
    padding:10px;
}
.left .dongtai .title{
    border-bottom: 1px dashed #ccc;
    background: url(../images/jiantou.jpg) no-repeat right center;
    height: 30px;
    line-height: 30px;
    font-size:20px;
    font-weight: bold;
    font-family: 黑体;
    margin-bottom: 10px;
}
.left .dongtai .title span{
    color: #0174C9
}
.left .dongtai .img{
    text-align: center;
}
.left .dongtai .img img{
    margin-bottom: 5px;
}
.left .dongtai .huodong{
    width: 300px;
}
.left .dongtai .huodong h2{
    color: #8F8F8F;
    margin-bottom:10px;
}
.left .dongtai .huodong li{
    height: 22px;
    line-height: 22px;
    background: url(../images/li04.jpg) no-repeat left center;
    padding-left:8px;
}
.left .dongtai .more{
    height:20px;
    background: url(../images/more01.gif) no-repeat right bottom;
}

/*论坛热帖开始*/
.left .retie{
    padding:10px;
    background-color:#fff;
}
.left .retie .title{
    height: :34px;
    line-height: 34px;
    font-size:20px;
    margin-bottom: 10px;
    background: url(../images/bg01.gif) no-repeat;
    padding-left: 20px;
}
.left .retie span{
    color: #0174C9;
}
.left .retie .content li{
    height: 22px;
    line-height: 22px;
    background: url(../images/li05.gif) no-repeat left center;
    padding-left:15px;
    float:left;
    width: 288px;
}

/*PHP学员呐喊*/
.left .nahan{
    padding:10px;
    background-color:#fff;
}
.left .nahan .title{
    height: :34px;
    line-height: 34px;
    font-size:20px;
    margin-bottom: 10px;
    background: url(../images/bg01.gif) no-repeat;
    padding-left: 20px;
}
.left .nahan .title span{
    color: #0174C9;
}
.left .nahan .img{
    text-align: center;
    margin-right: 30px;
}
.left .nahan .img img{
    margin-bottom: 5px;
}
.left .nahan .jiuye h2{
    color: #8F8F8F;
    margin-bottom:10px;
}
.left .nahan .jiuye li{
    height: 22px;
    line-height: 22px;
    background: url(../images/li04.jpg) no-repeat left center;
    padding-left:8px;
}

/*学员感言*/
.left .ganyan{
    padding:10px;
    background-color:#fff;
}
.left .ganyan .title{
    width:600px;
    height:34px;
    background:url(../images/bg01.gif) no-repeat;
    line-height:34px;
    font-size:20px;
    padding-left:20px;
}
.left .ganyan .span1{
    float:left;
    color: #0174C9;
}
.left .ganyan .span2{
    float:right;
    padding-right:10px;
}
.left .ganyan .content{
    width:300px;
    padding-top:10px;
    padding-left:5px;
}                
.left .ganyan .content img{
    float:left;
}
.left .ganyan .content p{
    float:right;
    width:180px;
    background:url(../images/li06.gif) no-repeat 0px 3px;
    padding-right:8px;
    text-indent:15px;
    height:20px;
    line-height:20px;
}
.left .ganyan .content ul{
    background:url(../images/li07.gif) no-repeat 0px 6px;
    padding-left:20px;
}
.left .ganyan .content li{
    height:29px;
    line-height:29px;
}

/*名师答疑*/
.left .dayi{
    background-color:#fff;
    padding: 10px;
}
.left .dayi .title{
    width:600px;
    height:34px;
    background:url(../images/bg01.gif) no-repeat;
    line-height:34px;
    font-size:20px;
    padding-left:20px;
    padding-bottom:10px;
}
.left .dayi .span1{
    float:left;
    color: #0174C9;
}
.left .dayi .span2{
    float:right;
    padding-right:10px;
}
.left .dayi .img{
    padding-left: 10px;
}
.left .dayi .content{
    width:498px;
}
.left .dayi .content li{
    height: 22px;
    line-height: 22px;
    background: url(../images/li03.jpg) no-repeat left center;
    padding-left:12px;
    float:left;
    width:210px;
    padding-right:27px;
}

怒敲代码600行...

css(二)