Page production renderings
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>传智播客设计学院</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<script src="js/index.js" type="text/javascript"></script>
<header class="top">
<div class="logo"><img src="img/logo.jpg"></div>
<div class="pic1"><img src="img/pic01.gif"></div>
<div class="options">
<div class="myhome">
<span></span>
<a href="#" class="home">我的收藏</a>
<em></em>
<div id="list">
<a href="#">收藏的图书</a>
<a href="#">收藏的视频</a>
</div>
</div>
<div class="fav" id="lx">
<span></span>
<a href="#" class="favs">联系客服</a>
</div>
</div>
</header>
<!-- 导航栏 -->
<div class="nav">
<ul>
<li class="li1"><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>
<!--banner begin焦点图-->
<div class="banner">
<div class="banner_pic" id="banner_pic">
<div class="current"><img src="img/01.jpg" alt="" /></div>
<div class="pic"><img src="img/02.jpg" alt="" /></div>
<div class="pic"><img src="img/03.jpg" alt="" /></div>
<div class="pic"><img src="img/04.jpg" alt="" /></div>
</div>
<ol id="button">
<li class="current">1</li>
<li class="but">2</li>
<li class="but">3</li>
<li class="but">4</li>
</ol>
</div>
<!--banner end-->
<!--stages begin-->
<div class="stages">
<div class="stages_title">通知公告</div>
<div class="stages_con">
<marquee>
<ul>
<li><a href="#">【广州喜讯】报名网页平面UI就业班喜送基础班</a></li>
<li><a href="#">史上最难就业年，怎么办？到传智免费学PS吧！</a></li>
</ul>
</marquee>
</div>
</div>
<!--stages end-->
<!--contect begin-->
<div class="content">
<div class="line1">
<!--left begin-->
<div class="left">
<div class="module">
<div class="title">
<div class="title_left"></div>
<div class="title_right"><span></span>示范专业建设模块</div>
<div class="title_bottom"></div>
</div>
<div class="module_con">
<ul>
<li><span></span><a href="#">人才培养</a></li>
<li><span></span><a href="#">课程体系</a></li>
<li><span></span><a href="#">教学改革</a></li>
<li><span></span><a href="#">实习实训</a></li>
<li><span></span><a href="#">师资队伍</a></li>
<li><span></span><a href="#">校企互联</a></li>
<li><span></span><a href="#">示范效应</a></li>
<li><span></span><a href="#">more</a></li>
</ul>
</div>
</div>
<div class="job">
<div class="job_title"><span></span>招聘信息</div>
<div class="job_con">
<ul>
<li><span></span><a href="#">北京石和信息科技招聘UI设计</a></li>
<li><span></span><a href="#">上海微网络科技招聘前端工程师</a></li>
<li><span></span><a href="#">永特互动网络公司招聘前端工程师</a></li>
<li><span></span><a href="#">北京兰彩虹科技招聘UI设计实习生</a></li>
<li><span></span><a href="#">上海易网络科技招聘JS前端工程师</a></li>
</ul>
</div>
</div>
</div>
<!--left end-->
<!--center begin-->
<div class="center">
<div class="message">
<div class="message_title">
<ol id="m_essage">
<li class="current"><a href="#"><span>专业动态</span></a></li>
<li class="current1"><a href="#"><span>行业动态</span></a></li>
</ol>
<div class="more"><a href="#"><img src="img/more.gif" align="middle" /></a></div>
</div>
<div id="message_con">
<dl class="current">
<dt class="message_left"></dt>
<dd class="message_right">
<ul class="left_ul">
<li><span></span><a href="#">网页平面设计学院七期班香山游</a></li>
<li><span></span><a href="#">传智播客网页平面六期久违的体育课</a></li>
<li><span></span><a href="#">网页平面设计学院四期班奥林匹克公园一日游</a></li>
<li><span></span><a href="#">网页平面设计学院三期班798艺术区一日游</a></li>
<li><span></span><a href="#">网页平面设计学院二期班自助烧烤</a></li>
</ul>
<ul class="right_ul">
<li><a href="#">2013/06</a></li>
<li><a href="#">2013/06</a></li>
<li><a href="#">2013/06</a></li>
<li><a href="#">2013/06</a></li>
<li><a href="#">2013/07</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="message_left1"></dt>
<dd class="message_right">
<ul class="left_ul">
<li><span></span><a href="#">学网络营销拿项目实战奖金，学习赚钱两不误！</a></li>
<li><span></span><a href="#">第一季“中国好毕设,找传智播客”活动盛大启动</a></li>
<li><span></span><a href="#">政府扶持良心教育企业,郑州校区学费再减1000元</a></li>
<li><span></span><a href="#">PHP学院落户上海滩，让你一年多赚10万元</a></li>
<li><span></span><a href="#">游戏开发学院震撼开启，基础班全免费！</a></li>
</ul>
<ul class="right_ul">
<li><a href="#">2013/07</a></li>
<li><a href="#">2013/07</a></li>
<li><a href="#">2013/06</a></li>
<li><a href="#">2013/07</a></li>
<li><a href="#">2013/06</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="teacher">
<div class="teacher_title"><span></span>师资力量<a href="#"><img src="img/more.gif" /></a></div>
<div class="teacher_con">
<ul>
<li>
<div><a href="#"><img src="img/teacher01.gif" /></a></div>
<div class="name"><a href="#">网页主讲张老师</a></div>
</li>
<li>
<div><a href="#"><img src="img/teacher02.gif" /></a></div>
<div class="name"><a href="#">网页主讲刘老师</a></div>
</li>
<li>
<div><a href="#"><img src="img/teacher03.gif" /></a></div>
<div class="name"><a href="#">网页主讲韩老师</a></div>
</li>
<li>
<div><a href="#"><img src="img/teacher04.gif" /></a></div>
<div class="name"><a href="#">网页主讲邵老师</a></div>
</li>
</ul>
</div>
</div>
</div>
<!--center end-->
<!--right begin-->
<div class="right">
<div class="course">
<h3>精品课程<span>Courses</span></h3>
<ul>
<li><span></span><a href="#">Photoshop图像处理</a></li>
<li class="course_2"><span></span><a href="#">网页平面设计</a></li>
<li class="course_3"><span></span><a href="#">UI设计</a></li>
<li class="course_4"><span></span><a href="#">HTML+CSS网页制作</a></li>
<li class="course_5"><span></span><a href="#">JavaScript制作网页特效</a></li>
</ul>
</div>
<div class="study">
<a href="#"><img src="img/study.gif" /></a>
</div>
</div>
<!--right end-->
</div>
<div class="line2">
<!--data begin-->
<div class="data">
<div class="data_title"><span></span>数据统计</div>
<div class="data_con">
<div class="con_border">
<a href="#"><img width=100 src="img/pic02.gif" /></a>
<a href="#"><img width=100 src="img/pic03.gif" /></a>
<a href="#"><img width=100 src="img/pic022.gif" /></a>
<a href="#"><img width=100 src="img/pic033.gif" /></a>
</div>
</div>
</div>
<!--data end-->
<!--book begin-->
<div class="book">
<div class="book_title"><span></span>原创图书</div>
<div class="book_con">
<ul>
<li>
<div><a href="#"><img src="img/book01.gif" /></a></div>
<div class="name"><a href="#">网页设计与制作<br />(HTML+CSS)</a></div>
</li>
<li>
<div><a href="#"><img src="img/book02.gif" /></a></div>
<div class="name"><a href="#">Photoshop CS6图像设计<br />案例教程</a></div>
</li>
<li>
<div><a href="#"><img src="img/book03.gif" /></a></div>
<div class="name"><a href="#">Java基础入门</a></div>
</li>
<li>
<div><a href="#"><img src="img/book04.gif" /></a></div>
<div class="name"><a href="#">C语言开发入门教程</a></div>
</li>
<li>
<div><a href="#"><img src="img/book05.gif" /></a></div>
<div class="name"><a href="#">Objective-C入门教程</a></div>
</li>
</ul>
</div>
<!--book end-->
</div>
</div>
<!--content end-->
<!--footer begin-->
<div class="footer">
<div class="btn">
<div><a href="#"><img src="img/top_btn.gif" /></a></div>
<div><a href="#">Top</a></div>
</div>
<div class="footer_con">
<ul class="pic">
<li class="pic_con"><span>友情链接</span></li>
<li><a href="#"><img src="img/mhzxxls.jpg" /></a></li>
<li><a href="#"><img src="img/link2.jpg" /></a></li>
<li><a href="#"><img src="img/link3.jpg" /></a></li>
<li><a href="#"><img src="img/link4.jpg" /></a></li>
</ul>
<p>传播智客-专业java培训、.net培训、php培训 、iOS培训、C++培训、网页设计、平面设计培训机构</p>
<p>版权所有 2006-2013 北京传智播客教育科技有限公司</p>
<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096</p>
<p>电话：010-82935150/60/70 传真：010-82935100 邮箱：zhanghj+itcast.cn</p>
<p>京ICP备08001421号 京公网安备110108007702</p>
</div>
</div>
<!--footer end-->
</body>
</html>
CSS code:
* {
margin: 0px;
padding: 0;
border: 0;
list-style: none;
}
body {
font-family: "arial, helvetica, sans-serif";
font-size: 12px;
}
a:link,
a:visited {
color: #222;
text-decoration: none;
}
a:hover {
color: #fd4913;
}
.top {
margin: 5px auto 0px auto;
padding: 0px;
width: 1000px;
height: 83px;
text-align: left;
}
.logo {
width: 307px;
height: 61px;
float: left;
margin-top: 10px;
}
.pic1 {
width: 289px;
height: 68px;
float: left;
margin: 4px 0px 0px 20px;
}
.options {
float: right;
margin: 48px 0px 0px 0px;
}
.myhome {
float: left;
width: 95px;
height: 33px;
margin: 0 10px;
border: 1px solid #fff;
position: relative;
}
.fav {
float: left;
width: 80px;
height: 35px;
margin: 0 10px;
}
.myhome span {
background: url(../img/icon_bg.gif) no-repeat 0 -30px;
float: left;
width: 17px;
height: 14px;
margin: 9px 6px;
}
.myhome:hover #list {
display: block;
}
.myhome:hover span {
background: url(../img/icon_bg.gif) no-repeat -60px -60px;
}
.myhome em {
background: url(../img/icon_bg.gif) no-repeat -60px -120px;
float: left;
width: 6px;
height: 5px;
margin: 15px 6px 0 6px;
display: inline;
}
.myhome #list {
width: 95px;
height: 50px;
border: 1px solid #E5E5E5;
position: absolute;
left: -1px;
top: 33px;
background: #fff;
display: none;
}
.myhome #list a {
text-align: center;
height: 25px;
width: 95px;
line-height: 25px;
margin: 0;
display: inline-block;
}
.myhome:hover .home {
color: #FD4913;
}
.myhome #list a:hover {
background: #E5E5E5;
}
.fav span {
background: url(../img/icon_bg.gif) no-repeat -60px -90px;
float: left;
width: 16px;
height: 14px;
margin: 9px 6px 0 6px;
display: inline;
}
.fav:hover span {
background: url(../img/icon_bg.gif)no-repeat -60px -150px;
}
.myhome a,
.fav a {
color: #9b9b9b;
float: left;
margin-top: 9px;
}
.fav:hover .favs {
color: #FD4913;
}
/* 首页头部导航栏 */
.nav {
margin-top: 180px border:#222222 solid 2px
}
.nav ul {
height: 43px;
text-align: center;
background-color: #222222;
}
.nav .li1 {
width: 75px;
background-image: url(../img/right.png);
background-size: 75px 45px;
}
.nav li {
display: inline-block;
line-height: 47px;
margin-left: -20px;
margin-right: 30px;
background-size: 80px 45px;
}
.nav li:hover {
background-image: url(../img/right.png);
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bolder;
font-size: 13px;
width: 80px;
margin-top: -4px;
text-align: center;
}
/*焦点图*/
.banner {
width: 1000px;
height: 285px;
margin: 13px auto 15px auto;
position: relative;
overflow: hidden;
}
.banner .banner_pic .pic {
display: none;
}
.banner .banner_pic .current {
display: block;
}
.banner ol {
position: absolute;
left: 566px;
bottom: 26px;
}
.banner ol .but {
float: left;
width: 26px;
height: 22px;
border: 1px solid #FF7101;
margin-right: 12px;
text-align: center;
line-height: 22px;
background: #fff;
color: #FF7101;
font-size: 14px;
font-weight: bold;
}
.banner ol li {
cursor: pointer;
}
.banner ol .current {
color: #fff;
background: #FF7101;
float: left;
width: 26px;
height: 22px;
border: 1px solid #FF7101;
margin-right: 12px;
text-align: center;
line-height: 22px;
font-size: 14px;
font-weight: bold;
}
/*stages通知公告*/
.stages {
margin: 0px auto;
padding: 0px;
border: 1px solid #c4c4c4;
height: 30px;
width: 998px;
line-height: 30px;
vertical-align: middle;
text-align: left;
overflow: hidden;
}
.stages_title {
width: 96px;
text-align: center;
border-right: 1px solid #c4c4c4;
float: left;
font-weight: bold;
}
.stages_con {
width: 900px;
float: left;
}
.stages_con ul li {
float: left;
}
.stages_con ul li a {
background: url(../img/icon6.gif) no-repeat left center;
padding: 0px 0px 0px 8px;
margin: 0px 40px 0px 0px;
width: 3px;
height: 5px;
line-height: 30px;
vertical-align: middle;
color: #212121;
}
/*stagr left*/
.content {
margin: 15px auto 0px auto;
padding-bottom: 15px;
width: 1000px;
}
.line1 {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.line1 .left {
margin: 0px;
padding: 0px;
width: 233px;
float: left;
}
.line1 .left .module {
margin: 0px;
padding: 0px;
width: 233px;
height: 210px;
background: url(../img/bg_tw.png);
overflow: hidden;
}
.module .title {
margin: 0px;
padding: 0px;
width: 233px;
height: 35px;
}
.module .title_left {
margin: 0px;
padding: 0px;
float: left;
width: 5px;
height: 35px;
background: #fd4a13;
}
.module .title_right {
margin: 0px;
padding: 0px;
float: left;
width: 228px;
height: 35px;
background: url(../img/module_title.png) repeat-x;
text-align: left;
line-height: 35px;
color: #FFF;
font-family: "黑体";
font-weight: bold;
font-size: 12px;
overflow: hidden;
background-color: black;
}
.module .title_right span {
background: url(../img/icon_bg.gif) no-repeat 0 -60px;
width: 11px;
height: 11px;
float: left;
margin: 12px 7px 0px 13px;
}
.module .title_bottom {
clear: both;
background: url(../img/icon8.gif) no-repeat 51px 0;
width: 233px;
height: 233px;
}
.module .module_con {
margin: 0px;
padding: 24px 11px;
overflow: hidden;
background-image: url(../img/course_bg.png);
}
.module .module_con ul li {
width: 97px;
height: 24px;
margin: 4px;
background: #e4e4e4;
float: left;
display: inline;
}
.module .module_con ul li span {
float: left;
background: url(../img/icon_bg.gif) no-repeat 0 -90px;
width: 6px;
height: 6px;
display: inline;
margin: 4px 0 0 4px;
}
.module .module_con ul li a {
line-height: 24px;
margin-left: 15px;
}
.job {
margin: 15px 0px;
padding: 0px;
}
.job_title {
background: url(../img/title_bg.gif) repeat-x;
width: 231px;
height: 30px;
line-height: 30px;
text-align: left;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #808080;
color: #393939;
font-family: "宋体";
font-size: 12px;
font-weight: bold;
}
.job_title span {
background: url(../img/icon_bg.gif) no-repeat 0 -150px;
float: left;
width: 16px;
height: 14px;
display: inline;
margin: 8px 7px 0 11px;
}
.job_con {
margin: 0px;
padding: 16px 0px 16px 15px;
text-align: left;
}
.job_con ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.job_con ul li {
margin: 10px 0px;
padding: 0px;
}
.job_con ul li span {
background: url(../img/icon_bg.gif) no-repeat -60px -30px;
width: 10px;
height: 13px;
float: left;
display: inline;
margin-right: 13px;
}
/*left*/
/*center*/
.line1 .center {
margin: 0px 0px 0px 12px;
padding: 0px;
float: left;
text-align: left;
width: 510px;
overflow: hidden;
}
.line1 .center .message {
margin: 0px;
padding: 0px;
}
.message_title {
margin: 0px;
padding: 0px 0px 0px 10px;
width: 498px;
height: 33px;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #fd4a13;
overflow: hidden;
}
.message_title ol li {
float: left;
}
.message_title ol a {
color: #393939;
font-weight: bold;
line-height: 34px;
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 13px;
}
.message_title ol span {
padding: 0px 25px 0px 0px;
}
.message_title ol .current a {
background: url(../img/left_message.png) no-repeat left top;
float: left;
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 13px;
color: #FFF;
}
.message_title ol .current span {
background: url(../img/right_message.png) no-repeat right top;
float: left;
padding: 0px 25px 0px 0px;
}
.message_title .more a {
width: 40px;
height: 15px;
display: block;
float: right;
margin: 10px 10px 0px 0px;
padding: 0px;
}
#message_con {
margin: 0px;
padding: 30px 0px 0px 17px;
overflow: hidden;
height: 160px;
}
#message_con dl {
display: none;
}
#message_con dl.current {
display: block;
}
.message_left {
background: url(../img/pic1.jpg) no-repeat left top;
width: 115px;
height: 125px;
text-align: center;
padding: 4px 0px;
float: left;
}
.message_left1 {
background: url(../img/pic2.jpg) no-repeat left top;
width: 115px;
height: 125px;
text-align: center;
float: left;
}
.message_right {
float: left;
margin: 0px 0px 0px 14px;
padding: 0px 13px 0px 0px;
width: 350px;
}
.message_right ul.left_ul {
float: left;
}
.message_right ul.left_ul li,
.message_right ul.right_ul li {
line-height: 26px;
}
.message_right ul.left_ul li span {
background: url(../img/icon_bg.gif) no-repeat 0 -120px;
width: 3px;
height: 3px;
float: left;
margin: 10px 7px 0 0;
}
.message_right ul.right_ul li a {
color: #aaaaaa;
}
.message_right ul.right_ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
.teacher {
padding: 0px;
width: 510px;
clear: both;
}
.teacher_title {
background: url(../img/title_bg.gif) repeat-x;
width: 508px;
height: 24px;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #808080;
color: #393939;
font-family: "宋体";
font-size: 12px;
font-weight: bold;
padding: 6px 0px 0px 0px;
position: relative;
overflow: hidden;
}
.teacher_title span {
background: url(../img/icon_bg.gif) no-repeat 0 -180px;
width: 17px;
height: 15px;
float: left;
margin: 0px 10px 0 9px;
}
.teacher_title img {
float: right;
display: inline;
}
.teacher_title a {
margin: 0px 0px 0px 0px;
float: right;
position: relative;
right: 10px;
top: 0;
}
.teacher_con {
width: 510px;
margin: 0px;
padding: 18px 0px 15px 17px;
overflow: hidden;
}
.teacher_con ul li {
margin: 3px 13px 0px 13px;
padding: 0px;
float: left;
text-align: center;
}
.teacher_con ul li .name {
margin: 10px 0px 0px 0px;
}
#pi1 {
left: auto;
}
/*center*/
/*right*/
.line1 .right {
margin: 0px;
padding: 0px;
width: 233px;
float: right;
}
.course {
width: 220px;
height: 303px;
background-image: url(../img/course_bg.png);
padding: 27px 0 0 13px;
margin: 0px;
text-align: left;
}
.course h3 {
font-size: 12px;
color: #393939;
height: 40px;
}
.course h3 span {
font-weight: normal;
padding-left: 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.course ul li {
width: 203px;
height: 40px;
border: 1px solid #e8e8e8;
margin-bottom: 10px;
background: #FFF;
}
.course ul li span {
background: url(../img/icon_bg.gif) no-repeat -30px -30px;
width: 30px;
height: 30px;
float: right;
margin: 7px 8px 0 0;
}
.course .course_2 span {
background-position: 0 -270px;
}
.course .course_3 span {
background-position: 0 -210px;
}
.course .course_4 span {
background-position: -30px 0px;
}
.course .course_5 span {
background-position: 0 -240px;
}
.course ul li a {
display: block;
height: 19px;
border-left: 4px solid #0080db;
margin-top: 10px;
line-height: 19px;
padding-left: 15px;
margin-left: -1px;
}
.course .course_2 a {
border-left: 4px solid #61a301;
}
.course .course_3 a {
border-left: 4px solid #f50149;
}
.course .course_4 a {
border-left: 4px solid #995f91;
}
.course .course_5 a {
border-left: 4px solid #ffb409;
}
.study {
margin-top: 15px;
}
/*right*/
/*line2*/
.line2 {
margin: 0px;
padding: 0px;
clear: both;
text-align: left;
overflow: hidden;
}
.data {
margin: 0px;
padding: 0px;
width: 233px;
float: left;
}
.data_title {
margin: 0px;
padding: 0px;
width: 231px;
height: 30px;
line-height: 30px;
background: url(../img/title_bg.gif) repeat-x;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #808080;
color: #393939;
font-weight: bold;
}
.data_title span {
background: url(../img/icon_bg.gif) no-repeat -30px -60px;
width: 22px;
height: 18px;
float: left;
margin: 8px 5px 0 10px;
}
.data_con {
margin: 0px;
padding: 0px;
background: #f7f7f7;
}
.con_border {
border: 1px solid #ebebeb;
border-top: none;
margin: 0px;
height: 210px;
padding: 33px 8px 23px 8px;
}
.data_con a {
display: block;
width: 87px;
height: 87px;
float: left;
margin: 0 10px 18px;
}
.book {
float: left;
margin: 0px 0px 0px 12px;
padding: 0px;
width: 755px;
display: inline;
overflow: hidden;
}
.book_title {
margin: 0px;
padding: 0px;
width: 753px;
height: 30px;
line-height: 30px;
font-weight: bold;
color: #393939;
background: url(../img/title_bg.gif) repeat-x;
border: 1px solid #d6d6d6;
border-bottom: 1px solid #808080;
vertical-align: middle;
overflow: hidden;
}
.book_title span {
background: url(../img/icon_bg.gif) no-repeat -30px -90px;
width: 16px;
height: 12px;
float: left;
margin: 8px 7px 0px 13px;
}
.book_con {
border: 1px solid #ebebeb;
border-top: none;
margin: 0px;
height: 265px;
background: #f7f7f7;
width: 755px;
overflow: hidden;
}
.book_con ul {
margin: 20px 0 0 24px;
overflow: hidden;
}
.book_con ul li {
float: left;
text-align: center;
margin: 0px 14px 13px 0;
}
.book_con ul li .name {
margin: 15px 0px 0px 0px;
line-height: 20px;
}
/*footer*/
.footer {
width: 100%;
background: #303030;
clear: both;
padding-bottom: 25px;
}
.footer .btn {
margin: 0px auto;
width: 906px;
text-align: left;
padding-left: 94px;
}
.footer .btn a {
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
letter-spacing: 1px;
}
.footer_con p {
line-height: 22px;
text-align: center;
color: #909090;
font-family: "微软雅黑";
}
.footer_con .pic {
width: 870px;
height: 60px;
padding-left: 130px;
margin: 0 auto;
}
.footer_con .pic li {
margin-left: 20px;
float: left;
}
.footer_con .pic .pic_con {
color: #FFF;
font-size: 14px;
padding-top: 20px;
}
/*footer*/
JS code:
window.onload = function() {
//实现轮播效果
//保存当前焦点元素的索引
var current_index = 0;
//5000表示调用周期，以毫秒为单位，5000毫秒就是5秒
var timer = window.setInterval(autoChange, 5000);
//获取所有轮播按钮
var button_li = document.getElementById("button").getElementsByTagName("li");
//获取所有banner图
var pic_div = document.getElementById("banner_pic").getElementsByTagName("div");
//遍历元素
for (var i = 0; i < button_li.length; i++) {
//添加鼠标滑过事件
button_li[i].onmouseover = function() {
//定时器存在时清除定时器
if (timer) {
clearInterval(timer);
}
//遍历元素
for (var j = 0; j < pic_div.length; j++) {
//将当前索引对应的元素设为显示
if (button_li[j] == this) {
current_index = j; //从当前索引位置开始
button_li[j].className = "current";
pic_div[j].className = "current";
} else {
//将所有元素改变样式
pic_div[j].className = "pic";
button_li[j].className = "but";
}
}
}
//鼠标移出事件
button_li[i].onmouseout = function() {
//启动定时器，恢复自动切换
timer = setInterval(autoChange, 5000);
}
}
function autoChange() {
//自增索引
++current_index;
//当索引自增达到上限时，索引归0
if (current_index == button_li.length) {
current_index = 0;
}
for (var i = 0; i < button_li.length; i++) {
if (i == current_index) {
button_li[i].className = "current";
pic_div[i].className = "current";
} else {
button_li[i].className = "but";
pic_div[i].className = "pic";
}
}
}
//实现tab栏切换
//获取所有tab栏按钮
var m_essage_li = document.getElementById("m_essage").getElementsByTagName("li");
//获取所有tab栏内容
var message_con_dl = document.getElementById("message_con").getElementsByTagName("dl");
//遍历元素
for (var c = 0; c < m_essage_li.length; c++) {
//添加鼠标滑过事件
m_essage_li[c].onmouseover = function() {
//遍历元素
for (var b = 0; b < message_con_dl.length; b++) {
//将当前索引对应的元素设为显示
if (m_essage_li[b] == this) {
m_essage_li[b].className = "current";
message_con_dl[b].className = "current";
} else {
//将所有元素改变样式
m_essage_li[b].className = "";
message_con_dl[b].className = "";
}
}
}
}
}
The picture is in the file. . .
As a blogger, my main focus is dedication. My files are shared with everyone for free and without points. The address of Lan Zouyun is below. If you think it is helpful, please like and bookmark to support the blogger.
Chuanzhi Podcasting School of Design homepage learning project complete download address