做这个案例的方法有很多种,我这个只是上课做的,办法简单粗暴,仅供参考!!!!!
效果图
本人英文不是很好,标签命名就很随意,见笑了!
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="#">
首页 </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>
<li><a href="#">关于我们 </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培训、培训、 php培训、iOS培训、C+ +培训、网页设计、平面设计培训机构</span>
<br>
<span>版权所有2006 - 2014北京传智播客教育科技有限公司</span>
<br>
<span>地址: 北京市昌平区建材城西路金燕龙办公楼层邮编: 100096
</span>
<br>
<span>电话:010-82935150/60/70传真: 010-82935100邮箱: zhanghj+itcast
</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;
}
更多推荐
传智播客设计学院网页制作案例
发布评论