首页 > 代码库 > 今天自习做的传智首页在铺个图....

今天自习做的传智首页在铺个图....

2024-08-24 19:02:01   219人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传智官网</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!--box开始-->
    <div class="box">
        <!--header开始-->
        <div class="header">
            <!--top开始-->
            <div class="top">
                专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构
                <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>
                </span>
            </div>
            <!--top结束-->
            <!--logo开始-->
            <div class="logo">
                <div class="logoL floatL">
                    <img src="images/logo.gif"/>
                </div>
                <div class="logoC floatC">
                    <h2>php学院</h2>
                    <ul>
                        <li>北京校区</li>
                        <li>成都校区</li>
                        <li>广州校区</li>
                        <li>上海校区</li>
                    </ul>
                </div>
                <div class="logoR floatR">
                    <img src="images/topword.gif"/>
                </div>
            </div>
            <!--logo结束-->
            <!--cdl开始-->
            <div class="cdl">
                <ul>
                    <li><a href="#" class="cdl-sy">首页</a></li>
                    <li><a href="#" class="a2">php培训课程</a></li>
                    <li><a href="#" class="a2">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>
            <!--cdl结束-->
        </div>
        <!--//header结束-->
        <!--left开始-->
        <div class="left floatL">
            <!--我们开学啦!开始-->
            <div class="kaixue">
                <!--title-1开始-->
                <div class="title-1">
                    <span class="kxblue">我们开学啦</span><span class="kxblue-1">今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途</span>
                </div>
                <!--title-1结束-->
                <!--imgL开始-->
                <div class="imgL floatL">
                    <img src="images/ppt1.jpg"/>
                </div>
                <!--imgL结束-->
                <!--imgR开始-->
                <div class="imgR floatR">
                    <ul>
                        <li><a href="#"><img src="images/img01.jpg"/><br/>陈建利专题-我有我原则</a></li>
                        <li><a href="#"><img src="images/img02.jpg"/><br/>张魏专题-我为创业狂</a></li>
                        <li><a href="#"><img src="images/img03.jpg"/><br/>小林催人泪下经历</a></li>
                        <li><a href="#"><img src="images/img04.jpg"/><br/>曹伟-玩酷我的程序人生</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <!--imgR结束-->
            </div>
            <!--我们开学啦!结束-->
        </div>
        <!--//left结束-->
        <!--right开始-->
        <div class="right floatR">
            <!--Php开班信息-->
            <div class="kaiban">
                <div class="title">php培训开班信息</div>
                <div class="content">
                    <h4>php基础班</h4>
                    <ul>
                        <li><a href="#">北京--11月12号</a><span class="kb-red">爆满已开班</span></li>
                        <li><a href="#">北京--11月12号</a><span class="kb-blue">预约报名</span></li>
                    </ul>
                    <h4>php就业班</h4>
                    <ul>
                        <li><a href="#">北京--11月16号</a><span class="kb-red">爆满已开班</span></li>
                        <li><a href="#">北京--12月20号</a><span class="kb-blue">预约报名</span></li>
                    </ul>
                    <h4>php远程班</h4>
                    <ul>
                        <li><a href="#">北京--12月20号</a><span class="kb-blue">预约报名</span></li>
                        <li><a href="#">北京--12月22号</a><span class="kb-blue">预约报名</span></li>
                    </ul>
                </div>
            </div>    
            <!--php开班信息结束-->
        </div>
        <!--//right结束-->
        <div class="clear"></div>
    </div>
    <!--//box结束-->
    <!--footer开始-->
    <div class="footer"></div>
    <!--//footer结束-->
</body>
</html>
/*这里面写的是传智官网CSS*/
/*第一件事件将HTML中的一些有默认的内填充与外边距的标签清除*/
body,ul,li,p,img,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
/*给body标签设置样式*/
body{
    color: #444;
    font-size: 12px; /*字体大小为12*/
    background:#f1f1f1 url(../images/bg-body.gif) repeat-x;
}
.box{
    width: 973px;
    margin: 0 auto;
    border:1px solid #f00;
    
}
.header{
    height: 196px;
}
.header .top{
    color:#018CD3;
    height:27px;
    line-height:27px;
}
.header .top .floatR a{
    border-right:1px dotted #444444;
    padding:0 7px;
}
.noline{border-right:none !important;}
.header .top .floatR .blue{color:#00f;}
.header .top .floatR .red{color:#B22222;}
.header .logo{
    height: 120px;
}
.header .logo .logoL{
    padding-right: 10px;
    padding-top:23px;
}
.header .logo .logoC{
    padding-top:40px;
}
.header .logo .logoC h2{
    color:#0473C4;
    font-size:24px;
    padding-bottom:5px;
}
.header .logo .logoC ul li{
    float:left;
    background-image: url(../images/li01.png);
    width: 68px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    margin-right:10px;
    padding-left:10px;
}
.header .logo .logoR{
    margin-top:-58px;
}
.header .cdl{
     height:49px;
     line-height:49px;
}
.header .cdl ul li{
    float:left;
}
.header .cdl a{
    display:block;/*将行内元素转换成块元素*/
    color:#fff;
    font-weight:bold;
    height: 47px;
    width: 73px;
    text-align:center;
    margin-right:5px;
}
.header .cdl .cdl-sy{
    background-image: url(../images/menu2.gif);
    
}
.header .cdl .a2{ width:85px;}
.header .cdl a:hover{
    background-image: url(../images/menu2.gif);
}
.header .cdl .a2:hover{
    background-image: url(../images/menu1.gif);
}
.left{
    width: 670px;
    height: 500px;
}
.left .kaixue{
    width:670px;
    background-color:#fff;
    margin:0px auto;
    
}
.left .kaixue .title-1{
    border-bottom:1px solid #E0E0E0;
    background:url(../images/jiantou.jpg) no-repeat right 13px;
    letter-spacing: 2.5px;
    margin:0px 10px;
    
}
.left .kaixue .kxblue{
    height: 40px;
    line-height: 40px;
    font-size:20px;
    color:skyblue;
    font-weight:bold;
}
.left .kaixue .kxblue-1{
    color:#0f0f0f;
    margin-left:10px;
    padding-bottom:8px;
    line-height:auto;    
}
.left .kaixue .imgL{
    width: 300px;
    margin-top:20px;
    margin-bottom:20px;
    padding-left:10px;
}
.left .kaixue .imgR{
    width:310px;
    margin-top:20px;
}
.left .kaixue .imgR img{
    width: 142px;
    height: 88px;
    margin-bottom: 3px;
}
.left .kaixue .imgR ul li{
    float: left;
    text-align: center;
    margin-right: 12px;
}
.right{
    width: 295px;
    height: 500px;
    background-color: skyblue;
}
.right .kaiban{
    background-color:#f8f8f8;
}
.right .kaiban .title{
    height:35px;
    line-height:35px;
    background-image:url(../images/righttitle.gif);
    font-size:14px;
    color:#fff;
    padding-left:40px;
}
.right .kaiban .content{
    padding:10px;
}
.right .kaiban .content h4{
    height:30px;
    line-height:30px;
    
}
.right .kaiban .content ul li{
    height:20px;
    line-height:20px;
    border-bottom:1px dashed #ccc;
}
.right .kaiban .content span{
    float:right;
}
.right .kaiban .content .kb-red{
    color:red;
    font-weight:bold;
}
.right .kaiban .content .kb-blue{
    color:blue;
    font-weight:bold;
}
.footer{
    width: 100%;
    height: 200px;
    background-color: #000;
}



/*全局的样式*/
.floatL{
    float: left; /*专用于实现左浮动*/
}
.floatR{
    float: right; /*专用于实现右浮动*/
}
.clear{
    clear: both;
}
/*使用伪类选择器对超级链接进行美化*/
a:link,a:visited{text-decoration: none;color: #444;}
a:hover{color: #f00;}
ul{list-style: none;}

技术分享

今天自习做的传智首页在铺个图....


联系
我们