网页制作练习

html

	
	
	


	

		
传智播客旗下品牌：  黑马程序员  |  博学谷
		
改变中国IT教育，我们正在行动     全国咨询热线：400-618-4000
	
	

		
 
		
 免费学习资源
		
 课程中心
		
 学科指南
		
 学员故事
		
 传智社区
		
 在线课堂
	
	

		

			    

					
JavaEE培训  >  
					
Android培训  >  
					
PHP培训  >  
					
人工智能  >  
					
UI设计培训  >  
					
iOS培训  >  
					
前端与移动开发培训  >  
					
C/C++培训  >  
					
网络营销培训  >  
					
Python培训  >  
					
云计算之大数据培训  >  
				
		
		
 
		

			
信息港
			

				

					
2016年传智各学科学费价格表
					
轻松了解传智播客十大学科
					
这个暑假，足不出户拿万元高薪！

					
暑期钜惠0元上课30天，火力开抢！

					
5个月，带你学透C/C++全栈开发
					
紧随WWDC，iOS4.0课程震撼出炉
					
UI设计打造会代码的全能设计师
					
PHP助你快速入门，就业冲击10k+
					
10月18日，前端学科入驻西安城
				
			
		
	
	

		
学习资源
		

			

				公开课
			
			
视频库
			
好毕设
		
	
	

		

		    

		    	2016年07月26日开课
		    
		    

		    	

		    史上最最难就业季生存对策（全能UI设计师--代码篇)
		    	
		    	

		    		
已有277人报名
		    		

		    			
		    		
		    	
		    
		

		

			

				 2016年07月27日开课
			
			

		    	

		    暑期在家，学点技术赚点钱吧？
		    	
		    	

		    		
已有235人报名
		    		

		    			
		    		
		    	
		    
		
        

			

				 2016年07月28日开课
			
			

		    	

		    黑帽SEO泛目录批量优化网站排名
		    	
		    	

		    		
已有263人报名
		    		

		    			
		    		
		    	
		    
		
        
        

			

				 2016年07月29日开课
			
			

		    	

		    洞察Nginx高性能反向代理服务器
		    	
		    	

		    		
已有242人报名
		    		

		    			
		    		
		    	
		    
		
        
        

			

				 2016年08月01日开课
			
			

		    	

		    Android Wear开发尝鲜 - 两小时站在科技最前沿
		    	
		    	

		    		
已有96人报名
		    		

		    			
		    		
		    	
		    
		

	

    

		
传智故事
		

			

				学员故事
			
			
科技喵喵喵
		
	

	

		

			
			

			小网管逆袭工资翻9倍
		    
		

		

			
			

			高考结束，放弃大学，依然月薪过万！
		    
		

		

			
			

			《对不起》系列微电影，史上最爆笑致歉没有之一
		    
		

		

			
			

			不迷茫的毕业季，青春勇敢前行
		    
		
	

	

		

			社区本周精华
		
		

			

				开班报道
			
			

				学员故事
			
			

				活动专区
			
		
	

	

		

			
			

			于是，我们来了！——北京传智JavaEE基础23
		    
		

		

			
			

			大雨洗礼过的太阳会更加灿烂——传智JavaEE
		    
		

		

			
			

			“暴雨前夕”北京传智播客UI设计基础63期开
		    
		

		

			
			

			在追求梦想的道路上我们风雨无阻！！
		    
		
	

	


	

		

			

				免费分享教程
			
		

		

		    

		    	每年更新课程体系
		    
		

		

		    

		    	定期举办技术沙龙
		    
		

		

		    

		    	就业薪资全部公开
		    
		

		

		    

		    	7*24小时职业规划
		    
		
	

	

		

			

				关于我们
			
			

				传智简介
			
			

				加入传智
			
		

		

			

				旗下品牌
			
			

				黑马程序员
			
			

				博学谷
			
		

		

			

				校区攻略
			
			

				校园环境
			
			

				住宿攻略
			
			

				来校路线
			
		

		

			

				学习资源
			
			

				视频库
			
			

				公开课
			
			

				云课堂
			
		

		

			

				传智故事
			
			

				学员故事
			
			

				科技喵喵喵
			
		
	

	

		

			友情链接
		
		

			

				
黑马程序员
				
博学谷
				
首席营销官
				
雅思
				
ThinkPHP框架
				
进销存软件
				
在职研究生
				
职称计算机考试
				
武汉房产网
				
中国教育网
				
视频教程网
				
论文查重
				
听课网
				
PPT模板
				
求职信
				
CCNA
				
我爱IT技术网
				
云计算
				
标准下载
				
图片制作
				
五笔输入法下载
				
中国在职研究生网
				
电脑主题
				
123标志设计网
				
新东方小语种
				
java1234培训师
				
酷素材
				
3d模型下载
				
u盘启动盘制作工具
				
申请传智播客友链
			
		
	
	

		

			

				
			
		
		

			

				
传智播客版权所有 2006 - 2016 北京传智播客教育科技有限公司
				
地址：北京市昌平区建材城西路金燕龙办公楼一层
				
邮编：100096
				
电话：010-82935150/60/70
				
邮箱: [email protected]
				
京ICP备08001421号
				
京公网安备110108007702
			
		
	

css

* {
	margin: 0;
	padding: 0;
}
.header {
   height: 40px;
   width: 1920px;
   background-color: #055c92;
   float: left;
}
.header1 {
	height: 16px;
	width: 226px;
	color: white;
	margin-top: 12px;
	margin-left: 357px;
	font-size: 12px;
	float: left;
}
.header1 a {
	text-decoration: none;
	color: white;
}
.header a:hover{
	border-bottom: 0.5px solid white;
}
.header2 {
	height: 16px;
	width: 345px;
	color: white;
	margin-left: 630px;
	margin-top: 12px;
	font-size: 12px;
	float: left;
}
.box1 {
	height: 140px;
	width: 1200px;
	margin-left: 357px;
}
.box1 a {
	text-decoration: none;
}
/*鼠标放上出现下划线*/
.box1 a:hover{
	border-bottom: 2px solid #00a3fa;
}
.box1-1 {
	float: left;
	margin-top: 20px;
}
.box1-2 {
	float: left;
	width: 98px;
	height: 20px;
	margin-left: 65px;
	margin-top: 34px;
}
.box1-3 {
	float: left;
	width: 65px;
	height: 20px;
	margin-left: 24px;
	margin-top: 34px;
}
.box1-4 {
	float: left;
	width: 65px;
	height: 20px;
	margin-left: 22px;
	margin-top: 34px;
}
.box1-5 {
	float: left;
	width: 65px;
	height: 20px;
	margin-left: 22px;
	margin-top: 34px;
}
.box1-6 {
	float: left;
	width: 65px;
	height: 20px;
	margin-left: 22px;
	margin-top: 34px;
}
.box1-7 {
	float: left;
	width: 65px;
	height: 20px;
	margin-left: 22px;
	margin-top: 34px;
}
.box1 a {
	color: black;
	font-size: 16px;
}
/*搜索框*/
.search .a{
	width: 360px;
	height: 38px;
	margin-top: 28px;
	margin-left: 22px;
	float: left;
	border: 1px solid #00a3fa;
	border-right: none;
	color: #ccc;
}
.search .b{
	border: 0;
	width: 50px;
	margin-top: 28px;
	height: 40px;
	float: left;
	background-image: url(images/btn.png);
}
.box2 {
	width: 1200px;
	height: 400px;
	float: left;
	margin-left: 357px;
}
.box2-1 {
	float: left;
	width: 234px;
	height: 400px;
	background-color: #53000e;
}
.box2-1 ul li a:hover {
	color: #FF0000;
}
.box2-2 {
	float: left;
	width: 728px;
	height: 400px;
	
}
.box2-3 {
	float: left;
	width: 232px;
	height: 400px;
	margin-left: 6px;
}
.box2-4 {
	float: left;
	width: 232px;
	height: 46px;
	background-color: #003C9D;
	text-align: center;
	line-height: 46px;
	color: white;
}
/*边框*/
.box2-5 {
	float: left;
	width: 232px;
	height: 354px;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.box2-6 li{
   font-size: 13px;
   margin-top: 20px;
   margin-left: 20px
}
.box2-6 li a{
   text-decoration: none;
}
.box2-6 li a:hover {
	color: #8799e9;
}
.q {
	color: red;
}
.e {
	color: black;
}
.p {
	margin-top: 20px;
}
.box2-1 ul li a {
	display: block;
	font-size: 14px;
	height: 34px;	
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
}
.box2-1 ul li {
	list-style: none;
}
.box2-1 ul li a span{
	float: right;
}
.box3 {
	width: 1200px;
	height:104px;
	margin-left: 357px;
	float: left;
}
.box3-1 {
	width: 91px;
	height: 37px;
	font-size: 22px;
	margin-top: 67px;
	float: left;
}
.box3-2 {
	width: 164px;
	height: 18px;
    float: right;
    margin-top: 67px;
}
.box3-3 {
	width: 52px;
	height: 18px;
	border-right: 1px solid #7d7d7d;
	font-size: 13px;
	float: left;
}
.box3-3 a {
	color: #57c2f3;
	text-decoration: none;
}
.box3-4 a {
	color: black;
	text-decoration: none;
}
.box3-5 a {
	color: black;
	text-decoration: none;
}
.box3-2 a:hover {
	border-bottom: 1px solid black;
}
.box3-4 {
	width: 62px;
	height: 18px;
	float: left;
	font-size: 13px;
	border-right: 1px solid #7d7d7d;
	text-align: center;
}
.box3-5 {
	width: 48px;
	height: 18px;
	font-size: 13px;
	float: left;
	text-align: center;
}
.box4 {
	width: 1250px;
	height: 200px;
	float: left;
	margin-left: 357px;
}
/*使用背景图片*/
.box4 .box4-1 {
	boder:0;
	height: 142px;
	width: 234px;
	background-image: url(images/就业难.jpg);
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
}
.box4-2 {
	height: 22px;
	width: 224px;
	font-size: 12px;
	color: white;
	line-height: 22px;
	background-color: rgba(66,58,58,0.5);
	margin-top: 120px;
	padding-left: 10px;
	float: left;
}
.box4-3 {
	width: 234px;
	height: 86px;
	background-color: white;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/*隐藏多余的字数*/
.box4-4 {
	width: 234px;
	height: 20px;
	margin-top: 15px;
	font-size:14px;
	margin-left: 10px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*鼠标放上显示全部*/
.box4-4:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box4-5 {
	width: 234px;
	height: 24px;
	margin-top: 16px;
	float: left;
}
.box4-6 {
	width: 84px;
	height: 18px;
	margin-top: 3px;
	margin-left: 10px;
	font-size: 12px;
	float: left;
}
.box4-7 {
	width: 64px;
	height: 23px;
	margin-right: 10px;
	float: right;
}
.box4-8 {
	width: 64px;
	height: 23px;
	border: 0;
	color: #ed4300;
	font-weight: 700;
	background-image: url(images/2.jpg);
	border: 1px solid #ed4300;
}
/*第二张图片复制*/
.box4 .box4-9 {
	boder:0;
	height: 142px;
	width: 234px;
	background-image: url(images/暑假狂欢.jpg);
	margin-left: 10px;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
}
.box4-10 {
	height: 22px;
	width: 224px;
	font-size: 12px;
	color: white;
	line-height: 22px;
	background-color: rgba(66,58,58,0.5);
	margin-top: 120px;
	padding-left: 10px;
	float: left;
}
.box4-11 {
	width: 234px;
	height: 86px;
	background-color: white;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/*隐藏多余的字数*/
.box4-12 {
	width: 234px;
	height: 20px;
	margin-top: 15px;
	font-size:14px;
	margin-left: 10px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*鼠标放上显示全部*/
.box4-12:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box4-13 {
	width: 234px;
	height: 24px;
	margin-top: 16px;
	float: left;
}
.box4-14 {
	width: 84px;
	height: 18px;
	margin-top: 3px;
	margin-left: 10px;
	font-size: 12px;
	float: left;
}
.box4-15 {
	width: 64px;
	height: 23px;
	margin-right: 10px;
	float: right;
}
.box4-16 {
	width: 64px;
	height: 23px;
	border: 0;
	color: #ed4300;
	font-weight: 700;
	background-image: url(images/2.jpg);
	border: 1px solid #ed4300;
}
/*第三张图片复制*/
.box4 .box4-17 {
	boder:0;
	height: 142px;
	width: 234px;
	background-image: url(images/SED.jpg);
	margin-left: 10px;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
}
.box4-18 {
	height: 22px;
	width: 224px;
	font-size: 12px;
	color: white;
	line-height: 22px;
	background-color: rgba(66,58,58,0.5);
	margin-top: 120px;
	padding-left: 10px;
	float: left;
}
.box4-19 {
	width: 234px;
	height: 86px;
	background-color: white;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/*隐藏多余的字数*/
.box4-20 {
	width: 234px;
	height: 20px;
	margin-top: 15px;
	margin-left: 10px;
	font-size:14px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*鼠标放上显示全部*/
.box4-20:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box4-21 {
	width: 234px;
	height: 24px;
	margin-top: 16px;
	float: left;
}
.box4-22 {
	width: 84px;
	height: 18px;
	margin-top: 3px;
	margin-left: 10px;
	font-size: 12px;
	float: left;
}
.box4-23 {
	width: 64px;
	height: 23px;
	margin-right: 10px;
	float: right;
}
.box4-24 {
	width: 64px;
	height: 23px;
	border: 0;
	color: #ed4300;
	font-weight: 700;
	background-image: url(images/2.jpg);
	border: 1px solid #ed4300;
}
/*第四张图片复制*/
.box4 .box4-25 {
	boder:0;
	height: 142px;
	width: 234px;
	background-image: url(images/2.jpg);
	margin-left: 10px;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
}
.box4-26 {
	height: 22px;
	width: 224px;
	font-size: 12px;
	color: white;
	line-height: 22px;
	background-color: rgba(66,58,58,0.5);
	margin-top: 120px;
	padding-left: 10px;
	float: left;
}
.box4-27 {
	width: 234px;
	height: 86px;
	background-color: white;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/*隐藏多余的字数*/
.box4-28 {
	width: 234px;
	height: 20px;
	font-size:14px;
	margin-top: 15px;
	margin-left: 10px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    
}
/*鼠标放上显示全部*/
.box4-28:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box4-29 {
	width: 234px;
	height: 24px;
	margin-top: 16px;
	float: left;
}
.box4-30 {
	width: 84px;
	height: 18px;
	margin-top: 3px;
	margin-left: 10px;
	font-size: 12px;
	float: left;
}
.box4-31 {
	width: 64px;
	height: 23px;
	margin-right: 10px;
	float: right;
}
.box4-32 {
	width: 64px;
	height: 23px;
	border: 0;
	color: #ed4300;
	font-weight: 700;
	background-image: url(images/2.jpg);
	border: 1px solid #ed4300;
}
/*第五张图片复制*/
.box4 .box4-33 {
	boder:0;
	height: 142px;
	width: 220px;
	background-image: url(images/安卓.jpg);
	margin-left: 10px;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
}
.box4-34 {
	height: 22px;
	width: 212px;
	font-size: 12px;
	color: white;
	line-height: 22px;
	background-color: rgba(66,58,58,0.5);
	margin-top: 120px;
	padding-left: 10px;
	float: left;
}
.box4-35 {
	width: 220px;
	height: 86px;
	background-color: white;
	float: left;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
/*隐藏多余的字数*/
.box4-36 {
	width: 220px;
	height: 20px;
	margin-top: 15px;
	font-size:14px;
	margin-left: 10px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*鼠标放上显示全部*/
.box4-36:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box4-37 {
	width: 220px;
	height: 24px;
	margin-top: 16px;
	float: left;
}
.box4-38 {
	width: 84px;
	height: 18px;
	margin-top: 3px;
	margin-left: 10px;
	font-size: 12px;
	float: left;
}
.box4-39 {
	width: 64px;
	height: 23px;
	margin-right: 10px;
	float: right;
}
.box4-40 {
	width: 64px;
	height: 23px;
	border: 0;
	color: #ed4300;
	font-weight: 700;
	background-image: url(images/2.jpg);
	border: 1px solid #ed4300;
}
.box5 {
	width: 1200px;
	height:104px;
	margin-left: 357px;
	float: left;
}
.box5-1 {
	width: 91px;
	height: 37px;
	font-size: 22px;
	margin-top: 67px;
	float: left;
}
.box5-2 {
	width: 148px;
	height: 18px;
    float: right;
    margin-top: 67px;
}
.box5-3 {
	width: 67px;
	height: 18px;
	border-right: 1px solid #7d7d7d;
	font-size: 13px;
	float: left;
}
.box5-3 a {
	color: #57c2f3;
	text-decoration: none;
}
.box5-2 a:hover {
	border-bottom: 1px solid black;
}
.box5-4 {
	width: 80px;
	height: 18px;
	float: left;
	font-size: 13px;
	text-align: center;
}
.box5-4 a {
	color: black;
	text-decoration: none;
}
.box6 {
	width: 1200px;
	height: 223px;
	margin-left: 357px;
	float: left;
}
.box6-1 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	float: left;
}
.box6-1:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box6-1 img {
	width: 292px;
	height: 160px;
}
.box6-2 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
    transition: all 0.6s;
}
.box6-3 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box6-3:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box6-3 img {
	width: 292px;
	height: 160px;
}
.box6-4 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
}
.box6-5 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box6-5:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box6-5 img {
	width: 292px;
	height: 160px;
}
.box6-6 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*鼠标放上显示全部*/
.box6-6:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box6-7 {
	width: 280px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box6-7:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box6-7 img {
	width: 280px;
	height: 160px;
}
.box6-8 {
	width: 280px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
}
.box7 {
	width: 1194px;
	height: 106px;
	float: left;
	margin-left: 357px;
}
.box7-1 {
	width: 133px;
	height: 28px;
	font-size: 22px;
	margin-top: 67px;
	float: left;
}
.box7-2 {
	width: 210px;
	height: 18px;
	margin-top: 64px;
	float: right;
}
.box7-3 {
	width: 66px;
	height: 18px;
	border-right:0.5px solid black;
	font-size: 13px;
	float: left;
}
.box7-3 a {
	text-decoration: none;
	color: #57c2f3;
}
.box7-2 a:hover {
	border-bottom: 1px solid black;
}
.box7-4 {
	width: 75px;
	height: 18px;
	text-align: center;
	line-height: 18px;
	border-right:0.5px solid black;
	font-size: 13px;
	float: left;
}
.box7-5 {
	width: 67px;
	height: 18px;
	text-align: center;
	line-height: 18px;
	font-size: 13px;
	float: left;
}
.box7-4 a {
	color: black;
	text-decoration: none;
}
.box7-5 a {
	color: black;
	text-decoration: none;
}
.box8 {
	width: 1200px;
	height: 223px;
	margin-left: 357px;
	float: left;
}
.box8-1 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	float: left;
}
.box8-1:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box8-1 img {
	width: 292px;
	height: 160px;
}
.box8-2 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
	float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.box8-2:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box8-3 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box8-3:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box8-3 img {
	width: 292px;
	height: 160px;
}
.box8-4 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
	float: left;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.box8-4:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box8-5 {
	width: 292px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box8-5:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box8-5 img {
	width: 292px;
	height: 160px;
}
.box8-6 {
	width: 292px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
	float: left;
    text-overflow: ellipsis;/*省略号代替*/
    overflow: hidden;/*隐藏*/
    white-space: nowrap;/*不让自动换行*/
}
/*鼠标放上显示全部*/
.box8-6:hover {
	overflow: visible;
    font-weight:'宋体';
}
.box8-7 {
	width: 280px;
	height: 222px;
	transition: all 0.6s;
	border-left: 1px solid #e0e0e0;
	border-right:1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-left: 10px;
	float: left;
}
.box8-7:hover{
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            transform: translateY(-20px);
 }
.box8-7 img {
	width: 280px;
	height: 160px;
}
.box8-8 {
	width: 280px;
	height: 62px;
	font-size: 15px;
	text-align: center;
	line-height: 62px;
}
.l {
	width: 1200px;
	height: 42px;
	margin-left: 357px;
	float: left;
}
.box9 {
	width: 1920px;
	height: 120px;
	background-color: #f3f3f3;
	float: left;
}
.box9-1 {
	width: 242px;
	height: 120px;
	margin-left: 357px;
	line-height: 120px;
	float: left;
}
.box9-2 {
	width: 150px;
	height: 34px;
	float: right;
	line-height: 34px;
	margin-top: 43px;
	border-right:1px solid #e0e0e0;
}
.box9-2 a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
}
.box9-3 {
	width: 240px;
	height: 120px;
	float: left;
}
.box9-4 {
	width: 151px;
	height: 34px;
	float: right;
	line-height: 34px;
	margin-top: 43px;
	border-right:1px solid #e0e0e0;
}
.box9-4 a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
}
.box9-5 {
	width: 240px;
	height: 120px;
	float: left;
}
.box9-6 {
	width: 151px;
	height: 34px;
	float: right;
	line-height: 34px;
	margin-top: 43px;
	border-right:1px solid #e0e0e0;
}
.box9-6 a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
}
.box9-7 {
	width: 240px;
	height: 120px;
	float: left;
}
.box9-8 {
	width: 151px;
	height: 34px;
	float: right;
	line-height: 34px;
	margin-top: 43px;
	border-right:1px solid #e0e0e0;
}
.box9-8 a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
}
.box9-9 {
	width: 240px;
	height: 120px;
	float: left;
}
.box9-10 {
	width: 151px;
	height: 34px;
	float: right;
	line-height: 34px;
	margin-top: 43px;
}
.box9-10 a {
	text-decoration: none;
	color: #333333;
	font-size: 14px;
}
.box9 a:hover{
	border-bottom:1px solid black;
}
.box10 {
	width: 1200px;
	height: 158px;
	margin-left: 357px;
	border-bottom: 1px solid #e0e0e0;
	float: left;
}
.box10-1 {
	width: 171px;
	height: 158px;
	float: left;
}
.box10-2 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box10-3 {
	width: 51px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-4 {
	width: 51px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-1 a {
	text-decoration: none;
	color: #8d8d8d;
}
.box10-1 a:hover{
	border-bottom:1px solid black;
}

.box10-5 {
	width: 171px;
	height: 158px;
	float: left;
}
.box10-6 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box10-7 {
	width: 62px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-8 {
	width: 40px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-5 a {
	text-decoration: none;
	color: #8d8d8d;
}
.box10-5 a:hover{
	border-bottom:1px solid black;
}

.box10-9 {
	width: 171px;
	height: 158px;
	float: left;
}
.box10-10 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box10-11 {
	width: 51px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-12 {
	width: 51px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-13 {
	width: 51px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-9 a {
	text-decoration: none;
	color: #8d8d8d;
}
.box10-9 a:hover{
	border-bottom:1px solid black;
}

.box10-14 {
	width: 171px;
	height: 158px;
	float: left;
}
.box10-15 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box10-16 {
	width: 39px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-17 {
	width: 39px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-18 {
	width: 39px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-14 a {
	text-decoration: none;
	color: #8d8d8d;
}
.box10-14 a:hover{
	border-bottom:1px solid black;
}

.box10-19 {
	width: 171px;
	height: 158px;
	float: left;
}
.box10-20 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box10-21 {
	width: 50px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-22 {
	width: 62px;
	height: 17px;
	margin-top: 15px;
    font-size: 12px;
}
.box10-19 a {
	text-decoration: none;
	color: #8d8d8d;
}
.box10-19 a:hover{
	border-bottom:1px solid black;
}
.box11 {
	width: 1200px;
	height: 153px;
	margin-left: 357px;
	border-bottom: 1px solid #e0e0e0;
	float: left;
}
.box11-1 {
	width: 64px;
	height: 18px;
	font-size: 16px;
	margin-top: 30px;
}
.box11-2 {
	width: 1183px;
	height: 40px;
	margin-top: 15px;
	font-size: 12px;
}
.box11-2 ul li a {
	text-decoration: none;
	color: #8d8d8d;
	list-style: none;
}
.box11-2 ul li {
	list-style: none;
	float: left;
	margin-right: 10px;
	margin-top: 13px;
}
.box11-2 ul li a:hover {
	border-bottom: 1px solid #8d8d8d;
}
.box12 {
	width: 1200px;
	height: 118px;
	float: left;
	margin-left: 357px;
}
.box12-1 {
	width: 162px;
	height: 120px;
	float: left;
}
.box12-2 {
	float: left;
	padding-top:30px; 
}
.box12-3 {
	width: 680px;
	height: 46px;
	float: left;
	margin-top: 24px;
	margin-left: 25px;
}
.box12-3 ul li {
	font-size: 12px;
	margin-top: 10px;
	margin-right: 8px;
	float: left;
	list-style: none;
}