HTML+CSS+JavaScript制作简单页面

一        效果图

二        相关代码

2.1        index.html

	
		
		
		
	
	
		

		
		
		

		
		
		

			

				
Engish| 
				
软件下载| 
				
香港公司 
			
		
		

			

				
服务热线:
				
400-8888-90
			
		
	
		

			

				

				

				
首页
				
研究中心
				
资产管理
				
期权世界
				
南华指数
				
衍生品
				
智创分析
				
客服中心
				
投资者源地
				
金融期货
				
走进南华
				
营业部之家
				

			
		

		

			

				

			
		
		

			

				

			
		
		

			
		
		

			

				

				

				

				

				

				

				

			
		
		

			

				

				
				
				

				
				

					
南华期货(香港)
					
主要从事商品期货经济、金融期货经济、期货投资咨询等相关的工作
					查看详细>>
					
			
		
		

			

			  

			    
12月30日
			    
指数点
			    
变化
			  
			  

			    
南华商品指数
			    
1007.89
			    
16.55
			  
			  

			    
南华商品指数
			    
1429.92
			    
32.95
			  
			  

			    
南华商品指数
			    
781.37
			    
16.55
			  
			  

			    
南华商品指数
			    
1777.25
			    
27.89
			  
			  

			    
南华商品指数
			    
1007.89
			    
16.55
			  
			  

			    
南华商品指数
			    
1007.89
			    
25.77
			  
			
			

				

			
			

				

			
		
		

			

				
财经导航
				
监管部门交易所
				
农林 工业品
				
南华博客
				
南华专栏
				
南华微博
			
		
		

			

				
中国证券报
				
期货日报
				
上海证券
				
证券时报
				
21世纪财经
				
新浪-财经新闻
				
第一财经
				
金融界
				
和讯网
				
东方财富网

				
期货中国
				
经济参考
				
南华证券网
				
凤凰财经
			
		
		

股指期货投资者教育专栏（浙江期货行业协会宣）

版权所有2004-2014未经南华期货股份有限公司同意请勿转载
浙ICP备05036925号
COPYRIGHT 2009.NANHUA FUTURES CO,LTD,CHINA ALL RIGHT RESERVED

关注我们：

• 
• 
• 
• 

• Q Q
• 微信
• 微博
• 收藏网站

• 全国统一客服热线:


• 400-8888-910

• 客服邮箱:


• [email protected]

2.2         轮播图.html

	
		
		
		
	
	
		
		

		    
		 
		    
		   
		    

		    
		   

		
		    
		    
 < 
 
		    
 > 
		
		
	

2.3        南华期货.html

	
		
		
		
	
	
		
欢迎来到南华期货
		
主要从事商品期货经济、金融期货经济、期货投资咨询等相关的工作
	

2.4         shouye.html

/* 导航条 CSS样式 */
body,ul,li{
	margin:0;
	padding:0;
	list-style: none;
}

body{/* ..是退出css文件夹在img文件夹里寻找到bodybg这张图片 */
	font-family: '微软雅黑';
}
 
.a{
	white-space: nowrap;
}

#nav{
	position: absolute;
	top: 0%;
	left: 75%;
	width:100px;
	height:6px;
	font-size: 12px;
	background:white;
}

#nav a{
	text-decoration: none;/* 去掉下划线 */
	color: gray;/* 字体颜色为黑色 */
	text-align: center;
	line-height: 32px;/*行高*/
	font-size: 12px;
}

#nav a:hover{
	color: orange;
}

#nav ul{
	width:200px;
	margin: 0 auto;/* 水平居中 */
}
#nav ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:60px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#nav>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

#navb{
	position: absolute;
	top: 0%;
	left: 73%;
	width:100px;
	height:10px;
	font-size: 12px;
	background:white;
	color: grey;
	line-height: 32px;
}

#navb ul{
	width:220px;
	margin: 0 auto;/* 水平居中 */
}
#navb ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:100px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navb>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}


#navbar{
	position: absolute;
	top: 10%;
	width:1550px;
	height:32px;
	background:rgb(28, 75, 169);
}
#navbar ul{
	background:rgb(28, 75, 169);
	width:1400px;
	margin: 0 auto;/* 水平居中 */
}
#navbar ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:90px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
/* #navbar>ul>li{
	 /* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	/* float:left; */
	/* 浮动:让元素依次水平 */
/* } */
#navbar a{
	text-decoration: none;/* 去掉下划线 */
	color: #f9f9f9;/* 字体颜色为白色 */
	text-align: center;
	line-height: 32px;/*行高*/
	font-size: 12px;
}

#navbar a:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: none;
	color:#72ff59;
	line-height: 10px;/*行高*/
	font-size: 10px;
}

.zer{
	position: absolute;
	top: 5%;
	left: 72%;
}

.zero{
	position: absolute;
	top: 1%;
	left: 86.5%;
}

.one{
	position: absolute;
	top: -180%;
	left: 88%;
}

.to{
	position: absolute;
	top: -135%;
	left: 16.5%;
}

.two{
	position: absolute;
	top: -245%;
	left: 1%;
}

.three{
	position: absolute;
	top: 10%;
	left: 16%;
}

.four{
	position: absolute;
	top: 10%;
	left: 45%;
}

.five{
	position: absolute;
	top: 0%;
	left: 68%;
	background-color:white;
	width:220px;
	height:200px;
}

.five1{
	position: absolute;
	top:110%;
	left: 70%;
}

	
.five1:hover img{
	transform: scale(1.2); 
}
.six{
	position:absolute;
	top:110%;
	left:40%;
}

button{
	margin:10px;
	background-color:rgb(8, 57, 173);
	color:white;
}

.she1{
	margin:10px;
}

.she2 {
  margin:10px;
  display: block;
  width: 200px; /* 设置宽度 */
  height:50px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}


#navba{
	position: absolute;
	top: 60%;
	width:1550px;
	height:32px;
	background:rgb(28, 75, 169);
}
#navba ul{
	background:rgb(28, 75, 169);
	width:1300px;
	margin: 0 auto;/* 水平居中 */
}
#navba ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:110px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navba>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
} 

#navbb{
	position: absolute;
	top: 64%;
	width:1550px;
	height:70px;
	background:#e3e3e3;
}
#navbb ul{
	background:#e3e3e3;
	width:1300px;
	margin: 0 auto;/* 水平居中 */
}
#navbb ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:110px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navbb>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
} 

#foot img{
	width: 100px;
	height:63px;
}

#foot{
	position: absolute;
	top: 61%;
	left: 17%;
}

#foot ul{
	width: 800px;
}

#foot ul li{
	margin:5px;
	display: inline-block;
}

#foot li:active{
	opacity: 0.5;
}

#foo{
	position: absolute;
	top: 78%;
	width: 1550px;
	height: 200px;
	background-color: #e3e3e3;
}


table{
	position: absolute;
	top: 110%;
	left:15%;
	width: 300px;
}

table, th, td {
     border: 1px solid rgb(214, 214, 214);
     border-collapse: collapse;
}
th, td {
     padding: 15px;
}

th,td:hover{
	background-color:rgb(217, 217, 217);
}

.color1{
	color:white;
	background-color:rgb(46, 175, 255);
}

.color2{
	color:red;
	text-align:right;
}

.color3{
	color:rgb(16, 16, 255);
	text-align:right;
}

#foooo{
	background-color:rgb(212, 215, 221);
	position: absolute;
	top: 170%;
	width:1550px;
	height:35px;
	color:black;
}

#foooo ul{
	width:1300px;
	margin: 0 auto;/* 水平居中 */
}

#foooo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:100px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
	color:black;
}

#foooo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

#foooo a{
	text-decoration: none;/* 去掉下划线 */
	/* text-decoration: underline; 下划线*/
	/* text-decoration: overline;线在上面 */
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 32px;/*行高*/
	font-size: 12px;
}

#foooo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: none;
	color:white;
	background-color:rgb(33, 44, 255);
	line-height: 32px;/*行高*/
	font-size: 12px;
}


#fooooo {
	background-color:rgb(212, 215, 221);
	position: absolute;
	top: 174%;
	width:1550px;
	height:65px;
	color:black;
}
#fooooo ul{
	width:1400px;
	margin: 0 auto;/* 水平居中 */
}

#fooooo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:100px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
	color:rgb(253, 253, 253);
}

#fooooo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

#fooooo a{
	text-decoration: none;/* 去掉下划线 *//
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 32px;/*行高*/
	font-size: 12px;
}

#fooooo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: none;
	color:white;
	background-color:rgb(99, 99, 99);
	line-height: 32px;/*行高*/
	font-size: 12px;
}


#footer{
	width:1550px;
	color:rgb(255,255,255);
	position:absolute;
	top:183.5%;
	background-color:rgb(40, 40, 40);
}
#foter{
	background-color:rgb(40, 40, 40);
	color:rgb(255,255,255);
	position:relative;
	top:183.5%;
	left:9%;
}

.eight{
	font-size:15px;
	font-weight:bold;
	padding:5px;
}

.nine{
	font-size:12px;
	padding:5px;
}

.ten{
	position:absolute;
	top:183.5%;
	left:45%;
	color:white;
}


#fo{
	position: absolute;
	top: 195%;
	left:43.5%;
	width:120px;
	height:35px;
	color:black;
}

#fo ul{
	width:1000px;
}


#fo>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

#fo ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:40px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
	color:white;
}

#fo a{
	text-decoration: none;/* 去掉下划线 */
	/* text-decoration: underline; 下划线*/
	/* text-decoration: overline;线在上面 */
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 10px;/*行高*/
	font-size: 10px;
}

#fo li:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: none;
	color:white;
	line-height: 10px;/*行高*/
	font-size: 10px;
}


.twelve img{
	width:15px;
}

#f{
	position: absolute;
	top: 185%;
	left: 73%;
	width:100px;
	height:10px;
	font-size: 12px;
	color: grey;
	line-height: 32px;
}

#f ul{
	width:220px;
	margin: 0 auto;/* 水平居中 */
}
#f ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:110px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#f>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

	
.twelve{
	position: absolute;
	top: 190.5%;
	left: 72%;
}


#fot img{
	width:30px;
	height:29px;
}


#fot{
	margin:10px;
	position: absolute;
	top: 189.5%;
	left: 43%;
}

#fot ul{
	width: 800px;
}

#fot ul li{
	margin:5px;
	display: inline-block;
}

#fooot{
	position: absolute;
	top: 192%;
	left: 72%;
	width:100px;
	height:10px;
	font-size: 12px;
	color: grey;
	line-height: 32px;
}

#fooot ul{
	width:220px;
	margin: 0 auto;/* 水平居中 */
}
#fooot ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:130px;
	height:32px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#fooot>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}

#shezhi{
	position:absolute;
	top:8%;
}

三        文件相关图（玩是另一个文件)