传智播客设计学院网页制作案例

做这个案例的方法有很多种，我这个只是上课做的，办法简单粗暴，仅供参考！！！！！

效果图

本人英文不是很好，标签命名就很随意，见笑了！

html

<div id="hear"><!-- 大盒子 -->
   <!-- 头部logo部分 -->
    <div id="W1">
    <div id="W2">
    <a href="#"><img src="images/logo.gif" alt="" id="logo"></a>
    <a href="#"><img src="images/pic01.gif" alt="" id="A"></a>
    </div>
    <!-- 首页行 -->
    <a href="#" id="W3"><img src="../qimoanli/images/star.png" height="14" width="16" alt="">加入收藏</a>
    <a href="#"><div id="W4">
    </div></a>
    <a href="#" id="W5"><img src="../qimoanli/images/house.png" height="14" width="17" alt="">设为首页</a>
    <a href="#"><div id="W6">
    </div></a>
    </div>
    <div id="L1"><!-- 导航栏 -->
    <ul>
            <li><a href="#">
            首页&nbsp;&nbsp;</a></li>
            <li><a href="#">课程介绍&nbsp;&nbsp;</a></li>
            <li><a href="#">教程下载&nbsp;&nbsp;</a></li>
            <li><a href="#">师资力量&nbsp;&nbsp;</a></li>
            <li><a href="#">就业信息&nbsp;&nbsp;</a></li>
            <li><a href="#">学员作品&nbsp;&nbsp;</a></li>
            <li><a href="#">校园生活&nbsp;&nbsp;</a></li>
            <li><a href="#">报名流程&nbsp;&nbsp;</a></li>
            <li><a href="#">常见问题&nbsp;&nbsp;</a></li>
            <li><a href="#">来校路线&nbsp;&nbsp;</a></li>
            <li><a href="#">关于我们&nbsp;&nbsp;</a></li>
          </ul>
    </div>
    </div>
    <div id="Z1">
    <div id="Z2">
    <div id="Z3"></div>
    <div id="Z4"><img src="../qimoanli/images/arrow.png" height="15" width="17" alt="">您目前所在的位置：<a href="#" id="Z5">网站首页</a>><a href="#" id="Z5">课程介绍</a>
    </div>
    </div>
   
    <div id="Z6">
    <a href="#"><img src="images/course_info_r5_c2.gif" alt="" id="Z7"></a>
    <!-- 课程介绍详细页面中部上方背景内右方文字 -->
    <div id="Z8">
    <a href="#" style="text-decoration:none;">
    <h2 id="ps">Photoshop基础</h2>
    <pre  style="font-size:14px;font-weight:bolder;color:red">
    设计学院又送豪礼啦!即日起,报名就业班即送PS基础
    &AI基础课程,快来报名吧!
     <div>
     </div>
    <span style="color:#808080;"><del>原价：￥960.00</del></span>
     
    现价：免费送啦
    </pre>
    </a>
    <div id="Z9">
    <a href="#" style="text-decoration:none;">
        <img src="images/course_info_r6_c4.gif" alt="" style="width:130px;height:42px;">
        <div id="Z10"><span style="color:black;">(2月16日开课)</span></div>
    </a>
    </div>
    </div>
    </div>
    </div>
    <!-- 课程介绍详细页面尾部综合栏 -->
    <div id="D1">
   <div class="top">
    <div><a href="#"><img src="../qimoanli/images/top_btn.gif" height="10" width="20" alt=""></a></div>
   <div><a href="#" id="DTOP">Top</a></div>
    </div>
    <a href="#" style="text-decoration:none;">
    </a>
    <div id="D2">
    <a href="#" style="text-decoration:none;color: white;">
    <span>传智播客-专业java培训、.net培训、 php培训、iOS培训、C+ +培训、网页设计、平面设计培训机构</span>
    <br>
    <span>版权所有2006 - 2014北京传智播客教育科技有限公司</span>
    <br>
    <span>地址: 北京市昌平区建材城西路金燕龙办公楼层邮编: 100096
    </span>
    <br>
    <span>电话:010-82935150/60/70传真: 010-82935100邮箱: zhanghj+itcast.cn
    </span>
    <br>
    <span>
    京CP备08001421号京公网安备110108007702
    </span>
    </a>
    </div>
    </div>

css样式

body{
    margin:0px;
}
body{
    margin:0px;
}

#logo{
    float:left;
}
#A{
    float:left;
}
#W1{
    width:1155px;
    height:81px;
    margin:0 auto;
    margin-top:20px;
}
#W2{
    float: left;
}
#W3{
    text-decoration:none;
    font-size:18px;
    color:#BABABA;
    float:right;
    margin-top:51px;
}
#W4{
    background-image:url(../images/icon_bg.gif);
    width:30px;
    height:30px;
    display:block;
    background-position:0px -30px;
    margin-top:53px;
        float:right;
        margin-right:-10px;
}
#W5{
    text-decoration:none;
    font-size:18px;
    color:#BABABA;
        float:right;
            margin-top:51px;
            margin-right:20px;
}

#W6{
    background-image:url(../images/icon_bg.gif);
    width:30px;
    height:30px;
    display:block;
    margin-top:54px;
        float:right;
        margin-right:-10px;
}


/* 首页头部导航栏 */
#L1{
    margin-top:20px
}
#L1 ul{
    height:43px;
background-image: url(../qimoanli/images/module_title.png);
        text-align:center;
}
#L1 li{
    display:inline-block;
    line-height:47px;
    margin-left:-20px;
    margin-right:30px;
}
#L1 a{
    display:block;
    text-decoration:none;
    color:white;
    font-weight:bolder;
    width:96px;
    margin-top:-4px;
    text-align:center;
}


#Z1{
    width:1150px;
    height:500px;
    margin:0 auto;
    margin-top:60px;
}
/* 课程介绍详细页面中部目标栏 */
#Z2{
    margin-top:-20px;
}
#Z3{
    background-image: url(../images/icon_bg.gif);
    width:30px;
    height:30px;
    background-position:-30px -120px;
}
#Z4{
    color:#909090;
    margin-top:14px;
    margin-left:20px;
}
#Z5{
    text-decoration:none;
    color:black;
}

#Z6{
    width:1200px;
    height:393px;
    background-color:white;
    margin-top:20px;
    border-bottom:2px solid;
    border-bottom-color:#eaeaea;
    border-top:1px solid;
    border-top-color:#eaeaea;
    border-left:1px solid;
    border-left-color:#eaeaea;
    border-right:1px solid;
    border-right-color:#eaeaea;
}
#Z7{
    width:730px;
    height:393px;
    float: left;
}
/* 课程介绍详细页面中部上方背景内右方文字  */
#Z8{
    padding-top:25px;
    margin-left:760px;
}
#Z9{
    margin-top:20px;
}
#Z10{
    margin-top:-35px;
    margin-left:140px;
}
#D1{

    height:220px;
    background-color:#2f2f2f;

}
#DTOP, .top{
    text-decoration:none;
    color:white;
}
.top{
      margin-left:300px;
}

#D2{
    font-size:14px;
    color:white;
    text-align:center;
    margin-top:10px;
}
#ps{
    color:black
}
.D1{
    margin: 0px auto;
    width: 906px;
    text-align: left;
    padding-left: 94px;
}