cover

好趣艺术设计部落网页制作案例

好趣艺术实战JS:

狗剩呀

12433人浏览 · 2022-06-07 21:34:12

狗剩呀 · 2022-06-07 21:34:12 发布

内容来自《HTML+CSS+JavaScript网页制作案例教程（第2版）》

内容分类：html、css、js实战

书籍作者：黑马程序员

文章目录

效果图
代码

html
css
js

文件下载

零、效果图

一、代码

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="设计、艺术、摄影、动画" />
<meta name="description" content="国内最大的艺术设计摄影交流平台">
<title>好趣首页</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript/index.js"></script>
</head> 
<body>
<!--top begin-->
<div class="top">
 		<div class="logo"><img src="images/logo.jpg" /></div>
 		<div class="pic01"><img src="images/pic01.gif" /></div>
 		<div class="options">
 			<div id="test" class="home">
 				<span></span>
 					<a href="#">我的关注</a>
 				<em></em>
 				<div id="list">
 					<a href="#">收藏的牛人</a>
 					<a href="#">收藏的作品</a>
 				</div>
 			</div>
 			<div id="lx" class="fav">
 				<span></span>
 				<a href="#">联系客服</a>
 			</div>
 		</div>
 	</div> 
<!--top end-->
<!--nav begin-->
<div class="nav">
 		<div class="nav_con">
            <ul>
                <li>
                    <a href="#" class="no1 choose">首页</a>
                    <a href="#" class="no2">首页</a>
                </li>
                <li>
                    <a class="no1">艺术摄影</a>
                    <a class="no2">艺术摄影</a>
                </li>
                <li>
                    <a class="no1">短片拍摄</a>
                    <a class="no2">短片拍摄</a>
                </li>
                <li>
                    <a class="no1">炫酷P图</a>
                    <a class="no2">炫酷P图</a>
                </li>
                <li>
                    <a class="no1">嗨表情包</a>
                    <a class="no2">嗨表情包</a>
                </li>
                <li>
                    <a class="no1">搞笑动画</a>
                    <a class="no2">搞笑动画</a>
                </li>
            </ul>
        </div>
 	</div> 
<!--nav end-->
<!--banner begin-->
<div class="banner">
	<div class="banner_pic" id="banner_pic">
		<div class="current"><img src="images/01.jpg" alt="" /></div>
		<div class="pic"><img src="images/02.jpg" alt="" /></div>
		<div class="pic"><img src="images/03.jpg" alt="" /></div>
		<div class="pic"><img src="images/04.jpg" alt="" /></div>
	</div>
	<ol id="button">
		<li class="current"></li>
		<li class="but"></li>
		<li class="but"></li>
		<li class="but"></li>
	</ol>
</div>
<!--banner end-->
<!--stages begin-->
<div class="stages">
	<div class="stages_title">通知公告</div>
	<div class="stages_con">
		<marquee>
			<ul>
				<li><a href="#">【活动资讯】2020年创作大赛北京赛区报名开始</a></li>
				<li><a href="#">【奖品公告】2019年获奖名单点击查看！！！</a></li>
			</ul>
		</marquee>
	</div>
</div>
<!--stages end-->
<!--content 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>优秀短片展示
                            <a href="#" class="tittle_mark">more»</a>
                        </div>
                        <div class="title_bottom"></div>
                    </div>
                    <video src="video/pian.mp4" controls autoplay muted></video>
                </div>
                <div class="job">
                    <div class="job_title">
                        <span></span>招聘信息
                        <a href="#" class="tittle_mark">more»</a>
                    </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="#" >原创专区</a></li>
                            <li><a href="#">作品展示</a></li>
                        </ol>
                        <a href="#" class="tittle_mark tittle_mark1">more»</a>
				</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="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                            <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li>
                        </ul>
                        <ul class="right_ul">
                            <li><a href="#">2020/06</a></li>
                            <li><a href="#">2020/06</a></li>
                            <li><a href="#">2020/06</a></li>
                            <li><a href="#">2020/06</a></li>
                            <li><a href="#">2020/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="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                            <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                            <li><span></span><a href="#">湖国山色艺术海报，领略自然风光-吃瓜群众</a></li>
                        </ul>
                        <ul class="right_ul">
                            <li><a href="#">2020/07</a></li>
                            <li><a href="#">2020/07</a></li>
                            <li><a href="#">2020/06</a></li>
                            <li><a href="#">2020/07</a></li>
                            <li><a href="#">2020/06</a></li>
                        </ul>
                    </dd>
                 </dl>
            </div>
        </div>
        <div class="teacher">
            <div class="teacher_title">
                <span></span>作品欣赏
                <a href="#" class="tittle_mark">more»</a>
            </div>
            <div class="teacher_con">
                <ul>
                    <li>
                        <div><a href="#"><img src="images/teacher01.gif" /></a></div>
                        <div class="name"><a href="#">维托里亚的塞恩</a></div>
                    </li>
                    <li>
                        <div><a href="#"><img src="images/teacher02.gif" /></a></div>
                        <div class="name"><a href="#">维托里亚的塞恩</a></div>
                    </li>
                    <li>
                        <div><a href="#"><img src="images/teacher03.gif" /></a></div>
                        <div class="name"><a href="#">维托里亚的塞恩</a></div>
                    </li>
                    <li>
                        <div><a href="#"><img src="images/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>Tool selection</span></h3>
            <ul>
                <li><span></span><a href="#">Photoshop CC2019</a></li>
                <li class="course_2"><span></span><a href="#">数据分析专家</a></li>
                <li class="course_3"><span></span><a href="#">多屏通话1.0VS</a></li>
                <li class="course_4"><span></span><a href="#">VZB插件小助手</a></li>
                <li class="course_5"><span></span><a href="#">红绿录屏软件</a></li>
            </ul>
        </div>
        <div class="study">
            <a href="#"><img src="images/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 src="images/pic02.gif" /></a>
                <a href="#"><img src="images/pic03.gif" /></a>
                <a href="#"><img src="images/pic022.gif" /></a>
                <a href="#"><img src="images/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="images/book01.gif" /></a></div>
		  			<div class="name"><a href="#">小米：吃肉的兔子</a></div>
		  		</li>
		  		<li>
		  			<div><a href="#"><img src="images/book02.gif" /></a></div>
		  			<div class="name"><a href="#">小米：吃肉的兔子</a></div>
		  		</li>
		  		<li>
		  			<div><a href="#"><img src="images/book03.gif" /></a></div>
		  			<div class="name"><a href="#">小米：吃肉的兔子</a></div>
		  		</li>
		  		<li>
		  			<div><a href="#"><img src="images/book04.gif" /></a></div>
		  			<div class="name"><a href="#">小米：吃肉的兔子</a></div>
		  		</li>
		  		<li>
		  			<div><a href="#"><img src="images/book05.gif" /></a></div>
		  			<div class="name"><a href="#">小米：吃肉的兔子</a></div>
		  		</li>
		  	</ul>
		</div>
	</div>
<!-- book end -->
	</div>
</div>
<!--content end-->
<!--footer begin-->
<div class="footer">
    <div class="btn">
        <div><a href="#"><img src="images/top_btn.gif" /></a></div>
        <div><a href="#">Top</a></div>
    </div>
    <div class="footer_con">
        <p>版权所有 2006 - 2013 好趣科技有限公司</p>
        <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096</p>
        <p>电话：010-8222222222/60/70 传真：010-829322222邮箱: haiqu@it.com</p>
    </div>
</div> 
<!--footer begin-->
</body>
</html>

CSS:

/* CSS Document */
/*重置浏览器的默认样式*/
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0; 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:#ee3350;}  
/*top*/
.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;
}
.pic01{ 
	width:289px; 
	height:68px; 
	float:left; 
	margin:4px 0px 0px 20px;
}
.options{ 
	float:right; 
	margin:48px 0px 0px 0px;
}
.home{ 
	float:left;
	width:95px;
	height:33px;
	margin:0 10px;
	border:1px solid #fff;
	position:relative;
}
.fav{
	float:left;
	width:80px;
	height:33px;
	border:1px solid #fff;
	margin:0 10px; 
}
.home span{ 
	background:url(../images/icon_bg.gif) no-repeat 0 -30px; 
	float:left; 
	width:17px; 
	height:17px; 
	margin:9px 6px 0; 
}
.home .span2{background:url(../images/icon_bg.gif) no-repeat -60px -60px;}
.home em{ 
	background:url(../images/icon_bg.gif) no-repeat -60px -120px; 
	float:left; 
	width:6px; 
	height:5px;
	margin:15px 6px 0 6px;
	display:inline;
}
.home #list{
	width:95px;
	height:50px;
	border:1px solid #E5E5E5;
	position:absolute;
	left:-1px;
	top:33px;
	background:#fff;
	display:none;
	z-index:9999;
}
.home #list a{
	text-align:center;
	height:25px;
	width:95px;
	line-height:25px;
	margin:0;
	display:inline-block;
}
.home #list a:hover{background:#E5E5E5;}
.fav span{ 
	background:url(../images/icon_bg.gif) no-repeat -60px -90px; 
	float:left; 
	width:17px; 
	height:17px; 
	margin:11px 6px 0;
	display:inline;
}
.fav .span3{background:url(../images/icon_bg.gif) no-repeat -60px -150px;}
.home a,.fav a{ 
	color:#9b9b9b; 
	float:left;
	margin-top:9px;
}
 /*top*/
/*nav*/
.nav{ 
 	margin:9px 0px 0px 0px; 
 	padding:0px; 
 	width:100%; 
 	height:40px; 
 	line-height:40px; 
 	background:url(../images/nav_bg.gif); 
 	vertical-align:middle; 
 	text-align:left;
 }
.nav_con{ 
 	margin:0px auto; 
 	padding:0px; 
 	width:1000px;
 }
.nav ul{color:#fff;}
.nav ul li{
	width:150px; 
	height:40px;
	transition:all 0.4s ease 0s;
	float:left;
	position:relative;
	transform-style:preserve-3d;
	perspective:6000px;
	}
.nav ul li:hover{transform:rotateX(-90deg);}
.nav ul a:link,.nav ul a:visited{color:#fff;}
.nav ul a:hover{color:#fff;}
.nav ul li a{ 
	width:150px;
	height:40px;
	line-height:40px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	font-size:14px;
}
.nav ul li .no1{background:url(../images/nav_bg.gif); transform:translateZ(20px);}
.nav ul li .choose{background:url(../images/nav_bg1.gif);}
.nav ul li .no2{background:url(../images/nav_bg1.gif); transform:rotateX(90deg) translateZ(20px);}
 /*nav*/
/*banner*/
.banner{
 	width:1000px;
 	height:285px;
 	margin:13px auto 15px auto;
 	position:relative;
 	overflow:idden;
 }
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{
	position:absolute;
	left:460px;
	bottom:26px;
 }
.banner ol .but{
 	float:left;
	width:10px;
	height:10px;
	margin-right:12px;
	background:#fff;
	opacity:0.5;
	border-radius:50%;
 }
.banner ol li{cursor:pointer;}
.banner ol .current{
	color:#fff;
	background:#ee3350;
	float:left;
	width:10px;
	height:10px;
	margin-right:12px;
	text-align:center;
	line-height:22px;
	font-size:14px;
	font-weight:bold;
	border-radius:50%;
}
/*banner*/
/*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;
}
.stages_con{ 
	width:900px; 
	float:left;
}
.stages_con ul li{float:left;}
.stages_con ul li a{ 
	background:url(../images/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;
 }
 /*stages*/
/*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:#000; 
	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:#ee3350;
}
.module .title_right{ 
	margin:0px; 
	padding:0px; 
	float:left; 
	width:228px; 
	height:35px; 
	background:url(../images/nav_bg.gif); 
	text-align:left; 
	line-height:35px; 
	color:#FFF; 
	font-family:"黑体"; 
	font-weight:bold; 
	font-size:12px; 
	overflow:hidden;
} 
.module .title_bottom{ 
	clear:both; 
	background:url(../images/icon8.gif) no-repeat 51px 0; 
	width:233px; 
	height:8px;
}
.module .title_right span{ 
	background:url(../images/icon_bg.gif) no-repeat 0 -60px; 
	width:11px; 
	height:11px; 
	float:left; 
	margin:12px 7px 0px 13px;
}
.tittle_mark{
	font-size:12px; 
	float:right; 
	padding-right:10px;
	font-family:"微软雅黑";
	font-weight:400;
	}
.tittle_mark:link,.tittle_mark:visited{color:#a4a4a4;}
.tittle_mark:hover{color:#ee3350;}
video{
	margin-top:40px;
	width:233px;
	}
.job{ 
	margin:15px 0px; 
	padding:0px;
}
 .job_title{ 
	background:url(../images/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(../images/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(../images/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;
}
.message_title{ 
	margin:0px; 
	padding:0px 0px 0px 5px; 
	width:505px; 
	height:35px; 
	overflow:hidden;
	background:url(../images/nav_bg.gif);
}
.message_title ol li{float:left;}
.message_title ol a{ 
	color:#fff; 
	font-weight:bold; 
	line-height:35px;
	padding:0px 20px; 
}
.message_title ol .current a{ 
	background:url(../images/nav_bg1.gif); 
	float:left; 
	padding:0px 20px; 
}
.tittle_mark1{margin:8px 12px 0 0;}
#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(../images/pic1.jpg) no-repeat left top; 
	width:115px; 
	height:125px; 
	text-align:center; 
	padding:4px 0px; 
	float:left;
}
.message_left1{ 
	background:url(../images/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(../images/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(../images/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(../images/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;}
.teacher_con ul li .name a{color:#535353;}
/*center*/
/*right*/
.line1 .right{ 
	margin:0px; 
	padding:0px; 
	width:233px; 
	float:right;
}
.course{
	width:220px; 
	height:303px; 
	background-image:url(../images/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(../images/icon_bg.gif) no-repeat 0 -210px; 
	width:30px; 
	height:30px; 
	float:right; 
	margin:7px 8px 0 0; 
}
.course .course_2 span{background-position:0 -240px;} 
.course .course_3 span{background-position:0 -270px;} 
.course .course_4 span{background-position:-30px 0px;}
.course .course_5 span{background-position:-30px -30px;} 
.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(../images/title_bg.gif) repeat-x; 
	border:1px solid #d6d6d6; 
	border-bottom: 1px solid #808080; 
	color:#393939; 
	font-weight:bold;
}
.data_title span{ 
	background:url(../images/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(../images/title_bg.gif) repeat-x; 
	border:1px solid #d6d6d6; 
	border-bottom: 1px solid #808080; 
	vertical-align:middle; 
	overflow:hidden;
}
.book_title span{ 
	background:url(../images/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 p{margin-top:5px;}
.book_con ul li .name{ margin:15px 0px 0px 0px;}
/*line2/
/*footer*/
.footer{
	width:100%; 
	background:url(../images/nav_bg.gif); 
	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:#fff; 
	font-family:"微软雅黑";
}
/*footer*/

JS:

// JavaScript Document
window.onload=function(){
	//实现下拉菜单
	var test=document.getElementById("test");
	var list=document.getElementById("list");
	var span=test.getElementsByTagName("span")[0];
	var a=test.getElementsByTagName("a")[0];
	//鼠标移入时
	test.onmouseover=function(){
		this.style.border="1px solid #E5E5E5";
		a.style.color="#ee3350";
		span.className="span2";
		list.style.display="block";
	}
	//鼠标移出时
	test.onmouseout=function(){
		this.style.border="";
		a.style.color="";
		span.className="";
		list.style.display="";
	}
	//改变“联系客服”的CSS样式
	var lx=document.getElementById("lx");
	var span1=lx.getElementsByTagName("span")[0];
	var a1=lx.getElementsByTagName("a")[0];
	lx.onmouseover=function(){
		a1.style.color="#ee3350";
		span1.className="span3";
	}
	lx.onmouseout=function(){
		a1.style.color="";
		span1.className="";
	}
//实现轮播效果
//保存当前焦点元素的索引
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="";
			}
		}
	}
}

}

二、文件下载

HTML+CSS+JavaScript网页制作案例教程（第2版）-图书-人邮教育社区

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

华为开发者空间

cover

GaussDB技术解读——GaussDB架构介绍（四）

华为开发者空间

cover

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

所有评论(0)

查看更多评论

狗剩呀

已为社区贡献2条内容