网页制作练习_练习网页设计-CSDN博客

本文链接：https://blog.csdn.net/weixin_46176911/article/details/104396154

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>传智播客</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="header">
		<div class="header1">传智播客旗下品牌：  <a href="http://www.itheima.com/special/brandzly/index.html?jingjiahmpz-pz-pc-biaoti">黑马程序员</a>  |  <a href="https://www.boxuegu.com/?utm_source=bxg_baidu&utm_medium=search%5Fcpc&utm_term=%E5%8D%9A%E8%B0%B7%E5%AD%A6&utm_campaign=%E5%93%81%E7%89%8C%E8%AF%8D%2DPC&utm_content=%E5%93%81%E7%89%8C%E8%AF%8D%2D%E9%94%99%E5%AD%97">博学谷</a></div>
		<div class="header2">改变中国IT教育，我们正在行动     全国咨询热线：400-618-4000</div>
	</div>
	<div class="box1">
		<div class="box1-1"> <img src="images/logo1.png" alt=""></div>
		<div class="box1-2"> <a href="https://www.boxuegu.com/subject/gather/indexhm.html?a=4zsgiB&utm_source=chuanzhi">免费学习资源</a></div>
		<div class="box1-3"> <a href="http://stu.ityxb.com/index.html#/Classroom/Reading/1">课程中心</a></div>
		<div class="box1-4"> <a href="http://bbs.itheima.com/thread-342271-1-1.html">学科指南</a></div>
		<div class="box1-5"> <a href="http://bbs.itheima.com/thread-342271-1-1.html">学员故事</a></div>
		<div class="box1-6"> <a href="http://bbs.itheima.com/forum.php">传智社区</a></div>
		<div class="box1-7"> <a href="https://www.boxuegu.com/subject/gather/indexhm.html?a=4zsgiB&utm_source=chuanzhi">在线课堂</a></div>
	</div>
	<div class="box2">
		<div class="box2-1">
			    <ul>
					<li><a href="http://www.itcast.cn/subject/javaeezly/index.shtml" class="p">JavaEE培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/linuxzly/index.html">Android培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/phpzly/index.shtml">PHP培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/robotzly/index.html">人工智能 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/uizly/index.shtml">UI设计培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/movieszly/index.html">iOS培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/webzly/index.shtml">前端与移动开发培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/czly/index.shtml">C/C++培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/xmtzly/index.html">网络营销培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/pythonzly/index.shtml">Python培训 <span> > </span> </a></li>
					<li><a href="http://www.itcast.cn/subject/cloudzly/index.shtml">云计算之大数据培训 <span> > </span> </a></li>
				</ul>
		</div>
		<div class="box2-2"> <a href="http://www.itheima.com/special/hd190726/index.html?jingjiaczpz-PC-1"><img src="images/A.png" alt=""></div></a>
		<div class="box2-3">
			<div class="box2-4">信息港</div>
			<div class="box2-5">
				<ul class="box2-6">
					<li><a href="http://www.itcast.cn/news/20170103/17414023367.shtml" class="e">2016年传智各学科学费价格表</a></li>
					<li><a href="http://www.itcast.cn/subject/about/index.html" class="q">轻松了解传智播客十大学科</a></li>
					<li><a href="http://www.itcast.cn/subject/zhaopin/index.shtml" class="q">这个暑假，足不出户拿万元高薪！</li>
					<li><a href="http://www.itcast.cn/channel/flow.shtml" class="q">暑期钜惠0元上课30天，火力开抢！</li>
					<li><a href="http://c.itcast.cn/" class="e">5个月，带你学透C/C++全栈开发</a></li>
					<li><a href="http://bbs.itheima.com/forum-561-1.html" class="e">紧随WWDC，iOS4.0课程震撼出炉</a></li>
					<li><a href="http://ui.itcast.cn/" class="e">UI设计打造会代码的全能设计师</a></li>
					<li><a href="http://php.itcast.cn/" class="e">PHP助你快速入门，就业冲击10k+</a></li>
					<li><a href="http://web.itcast.cn/" class="e">10月18日，前端学科入驻西安城</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="box3">
		<div class="box3-1">学习资源</div>
		<div class="box3-2">
			<div class="box3-3">
				<a href="http://yun.itheima.com/open">公开课</a>
			</div>
			<div class="box3-4"><a href="">视频库</a></div>
			<div class="box3-5"><a href="">好毕设</a></div>
		</div>
	</div>
	<div class="box4">
		<div class="box4-1">
		    <div class="box4-2">
		    	2016年07月26日开课
		    </div>
		    <div class="box4-3">
		    	<div class="box4-4">
		    史上最最难就业季生存对策（全能UI设计师--代码篇)
		    	</div>
		    	<div class="box4-5">
		    		<div class="box4-6">已有277人报名</div>
		    		<div class="box4-7">
		    			<a href="http://www.itcast.cn/channel/flow.shtml?jingjiaczpz-PC-1"><input class="box4-8" type="button" value="立即报名"></a>
		    		</div>
		    	</div>
		    </div>
		</div>

		<div class="box4-9">
			<div class="box4-10">
				 2016年07月27日开课
			</div>
			<div class="box4-11">
		    	<div class="box4-12">
		    暑期在家，学点技术赚点钱吧？
		    	</div>
		    	<div class="box4-13">
		    		<div class="box4-14">已有235人报名</div>
		    		<div class="box4-15">
		    			<a href="http://www.itcast.cn/channel/flow.shtml"><input class="box4-16" type="button" value="立即报名"></a>
		    		</div>
		    	</div>
		    </div>
		</div>
        <div class="box4-17">
			<div class="box4-18">
				 2016年07月28日开课
			</div>
			<div class="box4-19">
		    	<div class="box4-20">
		    黑帽SEO泛目录批量优化网站排名
		    	</div>
		    	<div class="box4-21">
		    		<div class="box4-22">已有263人报名</div>
		    		<div class="box4-23">
		    			<a href="http://www.itcast.cn/channel/flow.shtml?jingjiaczpz-PC-1"><input class="box4-24" type="button" value="立即报名"></a>
		    		</div>
		    	</div>
		    </div>
		</div>
        
        <div class="box4-25">
			<div class="box4-26">
				 2016年07月29日开课
			</div>
			<div class="box4-27">
		    	<div class="box4-28">
		    洞察Nginx高性能反向代理服务器
		    	</div>
		    	<div class="box4-29">
		    		<div class="box4-30">已有242人报名</div>
		    		<div class="box4-31">
		    			<a href="http://www.itcast.cn/channel/flow.shtml?jingjiaczpz-PC-1"><input class="box4-32" type="button" value="立即报名"></a>
		    		</div>
		    	</div>
		    </div>
		</div>
        
        <div class="box4-33">
			<div class="box4-34">
				 2016年08月01日开课
			</div>
			<div class="box4-35">
		    	<div class="box4-36">
		    Android Wear开发尝鲜 - 两小时站在科技最前沿
		    	</div>
		    	<div class="box4-37">
		    		<div class="box4-38">已有96人报名</div>
		    		<div class="box4-39">
		    			<a href="http://www.itcast.cn/channel/flow.shtml?jingjiaczpz-PC-1"><input class="box4-40" type="button" value="立即报名"></a>
		    		</div>
		    	</div>
		    </div>
		</div>

	</div>

    <div class="box5">
		<div class="box5-1">传智故事</div>
		<div class="box5-2">
			<div class="box5-3">
				<a href="http://bbs.itheima.com/thread-342271-1-1.html">学员故事</a>
			</div>
			<div class="box5-4"><a href="">科技喵喵喵</a></div>
		</div>
	</div>

	<div class="box6">
		<div class="box6-1">
			<a href="" title="点击图片查看详情"><img src="images/第一个人.jpg"></a>
			<div class="box6-2">
			小网管逆袭工资翻9倍
		    </div>
		</div>

		<div class="box6-3">
			<a href="" title="点击图片查看详情"><img src="images/第二个人.jpg"></a>
			<div class="box6-4">
			高考结束，放弃大学，依然月薪过万！
		    </div>
		</div>

		<div class="box6-5">
			<a href="" title="点击图片查看详情"><img src="images/第三个人.png"></a>
			<div class="box6-6">
			《对不起》系列微电影，史上最爆笑致歉没有之一
		    </div>
		</div>

		<div class="box6-7">
			<a href="" title="点击图片查看详情"><img src="images/第四个人.jpg"></a>
			<div class="box6-8">
			不迷茫的毕业季，青春勇敢前行
		    </div>
		</div>
	</div>

	<div class="box7">
		<div class="box7-1">
			社区本周精华
		</div>
		<div class="box7-2">
			<div class="box7-3">
				<a href="">开班报道</a>
			</div>
			<div class="box7-4">
				<a href="">学员故事</a>
			</div>
			<div class="box7-5">
				<a href="">活动专区</a>
			</div>
		</div>
	</div>

	<div class="box8">
		<div class="box8-1">
			<a href="" title="点击图片查看详情"><img src="images/第一.jpg"></a>
			<div class="box8-2">
			于是，我们来了！——北京传智JavaEE基础23
		    </div>
		</div>

		<div class="box8-3">
			<a href="" title="点击图片查看详情"><img src="images/第二.jpg"></a>
			<div class="box8-4">
			大雨洗礼过的太阳会更加灿烂——传智JavaEE
		    </div>
		</div>

		<div class="box8-5">
			<a href="" title="点击图片查看详情"><img src="images/第三.jpg"></a>
			<div class="box8-6">
			“暴雨前夕”北京传智播客UI设计基础63期开
		    </div>
		</div>

		<div class="box8-7">
			<a href="" title="点击图片查看详情"><img src="images/第四.jpg"></a>
			<div class="box8-8">
			在追求梦想的道路上我们风雨无阻！！
		    </div>
		</div>
	</div>

	<div class="l"></div>

	<div class="box9">
		<div class="box9-1">
			<div class="box9-2">
				<a href="">免费分享教程</a>
			</div>
		</div>

		<div class="box9-3">
		    <div class="box9-4">
		    	<a href="">每年更新课程体系</a>
		    </div>
		</div>

		<div class="box9-5">
		    <div class="box9-6">
		    	<a href="">定期举办技术沙龙</a>
		    </div>
		</div>

		<div class="box9-7">
		    <div class="box9-8">
		    	<a href="">就业薪资全部公开</a>
		    </div>
		</div>

		<div class="box9-9">
		    <div class="box9-10">
		    	<a href="">7*24小时职业规划</a>
		    </div>
		</div>
	</div>

	<div class="box10">
		<div class="box10-1">
			<div class="box10-2">
				关于我们
			</div>
			<div class="box10-3">
				<a href="">传智简介</a>
			</div>
			<div class="box10-4">
				<a href="">加入传智</a>
			</div>
		</div>

		<div class="box10-5">
			<div class="box10-6">
				旗下品牌
			</div>
			<div class="box10-7">
				<a href="">黑马程序员</a>
			</div>
			<div class="box10-8">
				<a href="">博学谷</a>
			</div>
		</div>

		<div class="box10-9">
			<div class="box10-10">
				校区攻略
			</div>
			<div class="box10-11">
				<a href="">校园环境</a>
			</div>
			<div class="box10-12">
				<a href="">住宿攻略</a>
			</div>
			<div class="box10-13">
				<a href="">来校路线</a>
			</div>
		</div>

		<div class="box10-14">
			<div class="box10-15">
				学习资源
			</div>
			<div class="box10-16">
				<a href="">视频库</a>
			</div>
			<div class="box10-17">
				<a href="">公开课</a>
			</div>
			<div class="box10-18">
				<a href="">云课堂</a>
			</div>
		</div>

		<div class="box10-19">
			<div class="box10-20">
				传智故事
			</div>
			<div class="box10-21">
				<a href="">学员故事</a>
			</div>
			<div class="box10-22">
				<a href="">科技喵喵喵</a>
			</div>
		</div>
	</div>

	<div class="box11">
		<div class="box11-1">
			友情链接
		</div>
		<div class="box11-2">
			<ul>
				<li><a href="">黑马程序员</a></li>
				<li><a href="">博学谷</a></li>
				<li><a href="">首席营销官</a></li>
				<li><a href="">雅思</a></li>
				<li><a href="">ThinkPHP框架</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="">PPT模板</a></li>
				<li><a href="">求职信</a></li>
				<li><a href="">CCNA</a></li>
				<li><a href="">我爱IT技术网</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="">123标志设计网</a></li>
				<li><a href="">新东方小语种</a></li>
				<li><a href="">java1234培训师</a></li>
				<li><a href="">酷素材</a></li>
				<li><a href="">3d模型下载</a></li>
				<li><a href="">u盘启动盘制作工具</a></li>
				<li><a href="">申请传智播客友链</a></li>
			</ul>
		</div>
	</div>
	<div class="box12">
		<div class="box12-1">
			<div class="box12-2">
				<img src="images/logo1.png">
			</div>
		</div>
		<div class="box12-3">
			<ul>
				<li>传智播客版权所有 2006 - 2016 北京传智播客教育科技有限公司</li>
				<li>地址：北京市昌平区建材城西路金燕龙办公楼一层</li>
				<li>邮编：100096</li>
				<li>电话：010-82935150/60/70</li>
				<li>邮箱: zhanghj@itcast.cn</li>
				<li>京ICP备08001421号</li>
				<li>京公网安备110108007702</li>
			</ul>
		</div>
	</div>
</body>
</html>

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;
}