南京网站制作公司

当前位置： 网站首页 - 新闻动态 - 安优观点 -

HTML+CSS+JavaScript网页制作案例教程（第二版）好趣艺术部落网页实现（期末作业）

发布时间：2024-08-30

来源：

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

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

一、效果图

二、HTML文件







好趣首页


 




 		
 		

 		

 			
 			
 		

 	
 




 		

            
        

 	
 







	
通知公告

	

		
			
		
	







    


    

                

                    

                        

                        

                            优秀短片展示
                            more»
                        

                        

                    

                    
                

                

                    

                        招聘信息
                        more»
                    

                    

                        
                    

                

    



    

        

                

                        
    
                            
  1. 原创专区
    2. 
                            
  2. 作品展示
    3. 
                        

                        more»
				
	
            
        

        

            

                作品欣赏
                more»
            

            

                
            

        

    



	

        

            
工具选择Tool selection

            
        

        

            
        

	

 
 	

	


	

        
数据统计

        

            

                
                
                
                
			

        

	



	

		
创作达人

		

			
		

	


	







    

        

        
    

    

        
版权所有 2006 - 2013 好趣科技有限公司

        
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096

        
电话：010-8222222222/60/70 传真：010-829322222邮箱: haiqu@it.com

三、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*/

四、JavaScript（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

五、文件列表

六、完整项目文件下载链接

链接：https://pan.baidu.com/s/1LDtS4LuJPOGv75wclCIxJA?pwd=my11
提取码：my11

上一篇：

网页制作工具按其制作方式可分为

返回列表

下一篇：常用的网页制作工具有什么功能

随机文章

联系安优网络

定制您的专属网站建设方案吧

400-8793-956

策略思维与细节的完美结合，有效帮您减少试错成本

策略思维与细节的完美结合，有效帮您减少试错成本

立即与安优联系，开启网站设计全新体验

立即与安优联系，开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

联系我们

24小时咨询热线：

18651623366

服务热线：

400-8793-956

微信咨询

邮箱：

地址：建邺区新城科技园嘉陵江东街18号2层

© 2012-2024 南京安优网络科技有限公司 All rights reserved. 苏ICP备12071769号-1 网站地图 XML TXT

友情链接: 南京网站建设 南京网站制作 南京网站建设公司 南京网站制作公司

在线咨询

拨打电话

返回顶部

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线

400-8793-956

在线咨询