首页 > 代码库 > 传智网页制作

传智网页制作

2024-08-24 21:14:10   220人阅读

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>传智播客</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/cz.css">
    <script type="text/javascript"></script>
</head>
<body>
    <!--box开始-->
    <div class="box">
    <!--box开始-->
    <!--haeder开始-->
        <div class="haeder">
            <div class="top">
                专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构
                <span class="a1 float_r">
                        <a href="http://www.mamicode.com/#">网站首页</a>
                        <a class="aa1" href="http://www.mamicode.com/#">免费公开课</a>
                        <a class="aa1" href="http://www.mamicode.com/#">校园生活</a>
                        <a class="aa2" href="http://www.mamicode.com/#">传智特刊</a>
                        <a href="http://www.mamicode.com/#">人才服务</a>
                        <a href="http://www.mamicode.com/#">招贤纳士</a>
                        <a class="a2" href="http://www.mamicode.com/#">联系我们</a>
                </span>
            </div>
            <div class="czbk_">    
                <div class="logo_ float_L">
                    <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/logo.gif"></a>    
                </div>
                <div class="xq_">
                    <h1 class="h1_">PHP学院</h1>
                    <ul>
                        <li><a href="">北京校区</a></li>
                        <li><a href="">成都校区</a></li>
                        <li><a href="">广州校区</a></li>
                        <li><a href="">上海校区</a></li>
                    </ul>        
                </div>
                <div class="it">
                    <img src="http://www.mamicode.com/images/topword.gif">    
                </div>
            </div>
            <div class="daohang">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a class="a22" href="">PHP培训课程</a></li>
                    <li><a class="a22" 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>
                </ul>
            </div>
        </div>    
    <!--haeder开始-->
    <!--left_开始-->    
        <div class="left float_L">
            <div class="kaixue">
                <div class="title">
                    <span class="title_1">我们开学啦今天</span><span class="title_2">今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途</span>
                </div>
                <div class="imgL float_L">
                    <img src="http://www.mamicode.com/images/ppt1.jpg">
                </div>
                <div class="imgR float_r">
                    <ul>
                        <li><a href="http://www.mamicode.com/#"></a><img src="http://www.mamicode.com/images/img01.jpg"><br>陈建利专题-我有我原则张</li>
                        <li><a href="http://www.mamicode.com/#"></a><img src="http://www.mamicode.com/images/img02.jpg"><br>张巍专题-我为创业狂</li>
                        <li><a href="http://www.mamicode.com/#"></a><img src="http://www.mamicode.com/images/img03.jpg"><br>小林催人泪下经历</li>
                        <li><a href="http://www.mamicode.com/#"></a><img src="http://www.mamicode.com/images/img04.jpg"><br>曹伟-玩酷我的程序人生</li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <div class="info">
                <div class="title"><img src="http://www.mamicode.com/images/college.jpg"></div>
                <div class="content">
                    <ul>
                        <li><a href="http://www.mamicode.com/#"><b class="red">2013年限时钜惠,PHP基础班免费学!</b></a><img src="http://www.mamicode.com/images/hot.gif"></li>
                        <li><a href="http://www.mamicode.com/#">ci电子商城-开发速度最快的PHP框架!</a></li>
                        <li><a href="http://www.mamicode.com/#"><b class="blue">2013年传智播客PHP课程最新升级</b></a></li>
                        <li><a href="http://www.mamicode.com/#">国内首家推出企业急需六大核心技术!!</a></li>
                        <li><a href="http://www.mamicode.com/#"><b class="blue">学PHP编程，不做孬种程序员！</b></a></li>
                        <li><a href="http://www.mamicode.com/#">新年开门红,俩学员毕业入职月薪过万！</a></li>
                        <li><a href="http://www.mamicode.com/#">PHP学院年薪20-40万招聘讲师</a></li>
                        <li><a href="http://www.mamicode.com/#">传智播客PHP视频教程配套笔记，更新到第114讲</a></li>
                        <li><a href="http://www.mamicode.com/#">拒绝"上半天，自学半天"的教学培训</a></li>
                        <li><a href="http://www.mamicode.com/#">中关村大型IT人才招聘会 上千岗位任选！</a></li>
                    </ul>    
                </div>
            <div class="img float_r"><img src="http://www.mamicode.com/images/more01.gif"></div>
            <div class="clear"></div>
        </div>
        </div>
    <!--left_开始-->
    
    <!--right_开始-->    
        <div class="right_ float_r">
            <div class="peixun">
                <div class="xinxi">
                    PHP培训开班信息
                </div>
                    <div class="content">
                        <h4>PHP基础班</h4>    
                        <ul>
                            <li><a href="">北京--11月12号</a><span>爆满以开班</span></li>
                            <li><a href="">北京--12月22号</a><span>预约报名</span></li>
                        </ul>
                        <h4>PHP就业班</h4>
                        <ul>
                            <li><a href="">北京--11月16号</a><span>爆满以开班</span></li>
                            <li><a href="">北京--12月20号</a><span>预约报名</span></li>
                        </ul>
                        <h4>PHP远程班</h4>
                        <ul>    
                            <li><a href="">基础班--12月20号</a><span>预约报名</span></li>
                            <li><a href="">就业班--12月22号</a><span>预约报名</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    <!--right_结束-->
        <div class="clear"></div>
    </div>
    <!--footer开始-->
    <div class="footer "></div>
    <!--footer开始-->
</body>
</html>
/*先设置网页头*/
body,ul,li,p,img,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}

body
{
    color:#444;
    font-size:12px;
    background: #f1f1f1 url(../images/bg-body.gif)repeat-x; 
}
.box
{
    width:973px;
    margin:0 auto;
    
}
.haeder
{    
    height:196px;
    

}
/*这是头部*/
.haeder .top
{
    height: 27px;
    line-height: 27px;
    color: #0174C7;
}

.haeder .top span a
{
    border-right:1px dotted;
        padding-right:10px;    
}
.haeder .top .a2
{
    border-right: none;
}
.haeder .top .aa1
{
    color: #00f;
}
.haeder .top .aa2
{
    color: #B22222;
}
.haeder img
{
    padding-top: 22px;
}
.haeder    .logo_
{
    margin-right: 10px;
}
.haeder .xq_ ul li
{
    list-style-type: none;
    float: left;
    background-image: url(../images/li01.png);
    width: 68px;
    height: 20px;
    line-height: 20px;
    margin-right:10px;
    padding-left: 10px;
    margin-top:5px; 
    
}
.haeder .xq_ ul li a
{
    color: #fff;
}
.haeder .h1_
{    font-family: sans-serif;
    padding-top: 38px;
}
.haeder h1
{
    font-size: 26px;
    color:#0473C4;
}
.haeder .it
{    
    width: 350px;
    height: 90px;
    float: right;
    margin-top: -80px;
}
.haeder .czbk_
{    
    height: 120px;
    background: url(../images/bg-logo.jpg) no-repeat right bottom; 
}    
.haeder .daohang ul li
{
    list-style-type: none;
    height: 47px;
    line-height: 47px;
    float: left;
    padding-right:13px; 
}
.haeder .daohang ul li a
{
    
}
/*这是头部*/
/*这是左边*/
.left
{
    width:660px;
    height:500px;
    background-color:#ccc;
}
.left .kaixue
{
    background-color: #fff;
    padding: 0px 15px; 
}
.left .kaixue .title
{
    height:40px;
    line-height: 40px;
    border-bottom: 1px solid #E0E0E0;
    background:url(../images/jiantou.jpg)no-repeat right 13px; 
    margin-bottom: 15px;
}
.left .kaixue .title .title_1
{
    font-size: 22px;
    font-family:"黑体";
    color: #0174c9;
}
.left .kaixue .title .title_1
{
    font-size: 14px;
    font-family:"黑体";
    margin-left: 10px;

}
.left .kaixue .imgL
{
    width: 300px;
}
.left .kaixue .imgR 
{

    width: 310px;
}
.left .kaixue .imgR img
{
    width: 142px;
    height: 88px;
    margin-bottom: 3px;
}

.left .kaixue .imgR ul li
{    
    list-style-type: none;
    float: left;
    text-align: center;
    margin-left: 10px
}
.left .info
{
    padding:15px 15px 10px;
    background-color: #fff; 
}
.left .info .content ul li 
{
    list-style-type: none;
    height: 20px;
    line-height: 20px;
    background: url(../images/li03.jpg)no-repeat left center;
    padding-left: 15px;
    float:left;
    width: 300px;
}



/*这是左边*/
/*这是右边*/
.right_
{
    width:295px;
    height:500px;
    background-color:skyblue;
}
.right_    .peixun
{    background-color: #f8f8f8;

}
.right_    .peixun .xinxi
{
    height: 35px;
    line-height: 35px;
    background-image: url(../images/righttitle.gif);
    font-size: 16px;
    color: #00f;
    padding-left: 40px;
}
.right_    .peixun .content
{
    padding: 10px;
}
.right_    .peixun .content h4
{
    
    height: 30px;
    line-height: 30px;
    

}

.right_    .peixun ul li
{
    list-style-type: none;
    height:20px; 
    line-height:20px;
    border-bottom: 1px dashed #ccc;
}
.right_    .peixun .content span
{
    float: right;
}

.right_    .peixun .content a:link,.right_    .peixun .content a:visited
{
    color: #0174DC;
}
.right_    .peixun .content a:hover
{
    color: #f00;
}






/*这是右边*/
/*这是下边*/
.footer
{
    width: 100%;
    height: 150px;
    background-color: #000
}
/*这是下边*/
/*设置浮动全局样式*/
.float_L
{
    float: left;    
}
.float_r
{
    float: right;
}
/*设置清除浮动全局样式*/
.clear
{
    clear: both;
}
/*清除下划线*/
.qingchu
{     
    text-decoration: underline;    
}
a:link,a:visited
{
    text-decoration: none;color: #515151;
}/*去掉下线线;改变颜色*/
a:hover{color:#f00;} /*改变颜色*/
.haeder .daohang a
{    
    display: block;    
    height: 47px;
    width: 73px;    
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.haeder .daohang a:hover
{    
    background: url(../images/menu2.gif) 
}  

.haeder .daohang .a22
{
    width: 85px;
}
.haeder .daohang .a22:hover
{    
    background: url(../images/menu1.gif) 
}

 

传智网页制作


联系
我们