css层叠样式表基础学习笔记--第十二章 我要自学网首页实战

于 2020-11-29 21:21:02 发布
阅读量299 收藏
点赞数
分类专栏： css层叠样式表基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumisu666/article/details/110353312
版权

第十二章 我要自学网首页实战

12-01 页面分析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面分析</title>
	</head>
	<body>
		页面分析：
		1.页面分区块
		2.找出相同和不同
		3.确定页面宽度
		4.确定字体大小，背景颜色
		5.下载页面中的图片
		
	</body>
</html>

12-02 工作准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>工作准备</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<!--logo,搜索,用户信息开始-->

		<!--logo,搜索,用户信息结束-->
		
		<!--导航开始-->
		
		<!--导航结束-->
		
	</body>
</html>

12-03 搜索区块页面结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索区块页面结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form action="" method="post">
	           	  	<input type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			
			<!--导航结束-->			
			
		</header>
	</body>
</html>

12-04 导航条布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航条布局</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			
			
			<!--导航结束-->			
			
		</header>

		
	</body>
</html>

12-05 幻灯片布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>幻灯片布局</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始-->
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
		</header>

		
	</body>
</html>

12-06 公告栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>公告栏布局</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
		</header>

		
	</body>
</html>

12-07 远程培训班布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>远程培训班布局</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			
			
			<!--远程培训班结束-->			
			
		</header>

		
	</body>
</html>

12-08 最新课程区块结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>最新课程区块结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			
			
			
			<!--最新课程区块结束-->
			
			
		</header>

		
	</body>
</html>

12-09 热门推荐结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>热门推荐结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    

			
		</header>

		
	</body>
</html>

12-10 课程分类结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>课程分类结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    
		    <!--课程分类区块开始-->
			<div class="kcfl content-box">
				<h3 class="m-title">课程分类</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
				    
		    

				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>


				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
		    </div>	
		    <!--课程分类区块结束-->
			
			
		</header>

		
	</body>
</html>

12-11 名师简介区块结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>名师简介结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    
		    <!--课程分类区块开始-->
			<div class="kcfl content-box">
				<h3 class="m-title">课程分类</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
				    
		    

				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>


				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
		    </div>	
		    <!--课程分类区块结束-->
			
			<!--名师简介开始-->
			<div style="background: #FFFFFF;">
				<div class="msjj content-box">
					<h3 class="m-title">名师简介</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
					<p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p>
					<div class="ms-box clearfix">
						<a href="#">
							<img src="img/t_lijiang.jpg" />
							<p class="p1">小朱老师</p>
							<p class="p2">尤其擅长传授吃货的修养</p>
						</a>
						<a href="#">
							<img src="img/t_huangjianbi.jpg" />
							<p class="p1">左老师</p>
							<p class="p2">擅长各种技能</p>
						</a>
						<a href="#">
							<img src="img/t_tanying.jpg" />
							<p class="p1">高老师</p>
							<p class="p2">大家都这样称呼</p>
						</a>
						<a href="#">
							<img src="img/t_xieling.jpg" />
							<p class="p1">喻老师</p>
							<p class="p2">江湖人称飒姐姐</p>
						</a>
					</div>
				</div>
			</div>
			<!--名师简介结束-->
			

			
		</header>

		
	</body>
</html>

12-12 页面尾部区块结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面尾部结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    
		    <!--课程分类区块开始-->
			<div class="kcfl content-box">
				<h3 class="m-title">课程分类</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
				    
		    

				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>


				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
		    </div>	
		    <!--课程分类区块结束-->
			
			<!--名师简介开始-->
			<div style="background: #FFFFFF;">
				<div class="msjj content-box">
					<h3 class="m-title">名师简介</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
					<p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p>
					<div class="ms-box clearfix">
						<a href="#">
							<img src="img/t_lijiang.jpg" />
							<p class="p1">小朱老师</p>
							<p class="p2">尤其擅长传授吃货的修养</p>
						</a>
						<a href="#">
							<img src="img/t_huangjianbi.jpg" />
							<p class="p1">左老师</p>
							<p class="p2">擅长各种技能</p>
						</a>
						<a href="#">
							<img src="img/t_tanying.jpg" />
							<p class="p1">高老师</p>
							<p class="p2">大家都这样称呼</p>
						</a>
						<a href="#">
							<img src="img/t_xieling.jpg" />
							<p class="p1">喻老师</p>
							<p class="p2">江湖人称飒姐姐</p>
						</a>
					</div>
				</div>
			</div>
			<!--名师简介结束-->
			
			<!--页面尾部开始-->
			<footer class="content-box">
				<p class="f-p1">
					<b>网站信息</b>
					<span>建站时间：124124</span>
					<span>教程数量：53253</span>
					<span>注册人数：4235325253</span>
				</p>
				<p class="f-p2">
					<b>友情链接</b>
					<a href="#"> <img src="img/baidu.png"/> </a>
					<a href="#"> <img src="img/360.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/baidu.png"/> </a>
				</p>
				<p class="f-p3">					
					<a href="#">大耳朵英语</a>
					<a href="#">高分网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">高分网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
				</p>
				<p class="f-p4">					
					<a href="#">关于网站</a>
					<a href="#">关于我们</a>
					<a href="#">网站地图</a>
					<a href="#">购买教程</a>
					<a href="#">在线咨询</a>
					<a href="#">业务合作</a>
					<a href="#">建议留言</a>
				</p>
				
				<p class="f-p5">	
					<span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程不得转载法律顾问：刘炜律师</span>	
					<img src="img/pic.gif"/>
				</p>
				
				<p class="f-p6">	
					<a href="#"><img src="img/footPic1.png"/></a>
					<a href="#"><img src="img/footPic2.png"/></a>
				</p>
			</footer>
			
			<!--页面尾部结束-->
			
		</header>

		
	</body>
</html>

12-13 左侧快速跳转区块结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左侧快速跳转结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    
		    <!--课程分类区块开始-->
			<div class="kcfl content-box">
				<h3 class="m-title">课程分类</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
				    
		    

				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>


				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
		    </div>	
		    <!--课程分类区块结束-->
			
			<!--名师简介开始-->
			<div style="background: #FFFFFF;">
				<div class="msjj content-box">
					<h3 class="m-title">名师简介</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
					<p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p>
					<div class="ms-box clearfix">
						<a href="#">
							<img src="img/t_lijiang.jpg" />
							<p class="p1">小朱老师</p>
							<p class="p2">尤其擅长传授吃货的修养</p>
						</a>
						<a href="#">
							<img src="img/t_huangjianbi.jpg" />
							<p class="p1">左老师</p>
							<p class="p2">擅长各种技能</p>
						</a>
						<a href="#">
							<img src="img/t_tanying.jpg" />
							<p class="p1">高老师</p>
							<p class="p2">大家都这样称呼</p>
						</a>
						<a href="#">
							<img src="img/t_xieling.jpg" />
							<p class="p1">喻老师</p>
							<p class="p2">江湖人称飒姐姐</p>
						</a>
					</div>
				</div>
			</div>
			<!--名师简介结束-->
			
			<!--页面尾部开始-->
			<footer class="content-box">
				<p class="f-p1">
					<b>网站信息</b>
					<span>建站时间：124124</span>
					<span>教程数量：53253</span>
					<span>注册人数：4235325253</span>
				</p>
				<p class="f-p2">
					<b>友情链接</b>
					<a href="#"> <img src="img/baidu.png"/> </a>
					<a href="#"> <img src="img/360.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/baidu.png"/> </a>
				</p>
				<p class="f-p3">					
					<a href="#">大耳朵英语</a>
					<a href="#">高分网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">高分网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
				</p>
				<p class="f-p4">					
					<a href="#">关于网站</a>
					<a href="#">关于我们</a>
					<a href="#">网站地图</a>
					<a href="#">购买教程</a>
					<a href="#">在线咨询</a>
					<a href="#">业务合作</a>
					<a href="#">建议留言</a>
				</p>
				
				<p class="f-p5">	
					<span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程不得转载法律顾问：刘炜律师</span>	
					<img src="img/pic.gif"/>
				</p>
				
				<p class="f-p6">	
					<a href="#"><img src="img/footPic1.png"/></a>
					<a href="#"><img src="img/footPic2.png"/></a>
				</p>
			</footer>
			
			<!--页面尾部结束-->
			
			<!--左侧快速跳转开始-->
			 <div class="kstz">
			 	<h4>快速跳转</h4>
			 	<a href="#">最新<br />课程</a>
			 	<a href="#">热门<br />推荐</a>
			 	<a href="#">课程<br />分类</a>
			 	<a href="#">热门<br />职业</a>
			 	<a href="#">名师<br />简介</a>
			 </div>			 
			<!--左侧快速跳转结束-->
			
		</header>

		
	</body>
</html>

12-14 右侧微信区块结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>右侧微信区块结构</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
	</head>
	<body>
		<header>
			<!--logo,搜索,用户信息开始-->
	           <div class="content-box h-top">
	           	  <a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a>
	           	  <form class="search" action="" method="post">
	           	  	<input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" />
	           	  	<input class="inp-r fr" type="submit" value="搜索"/>
	           	  </form>
	           	  <div class="user">
	           	  	<a href="#">帮助中心</a>
	           	  	<a href="#">登录/注册</a>
	           	  </div>
	           </div>
			<!--logo,搜索,用户信息结束-->
			
			<!--导航开始-->
			<nav>
				<div class="content-box nav-box">
					<div class="nav-l fl">
						<a href="#">电脑办公</a>
						<a href="#">平面设计</a>
						<a href="#">室内设计</a>
						<a href="#">室外设计</a>
						<a href="#">影视动画</a>
						<a href="#">机械设计</a>
						<a href="#">工业自动</a>
						<a href="#">程序设计</a>
						<a href="#">网页设计</a>
						<a href="#">会计设计</a>
					</div>
					<div class="nav-r fr">
						<a href="#">首页</a>
						<a href="#">商城</a>
						<a href="#">论坛</a>
					</div>
					
				</div>
			</nav>
			<!--导航结束-->	
			
			<!--幻灯片开始--> 
			   <div class="hdp">
			   	 <div class="content-box">
			   		 <div class="hdp-img clearfix" >
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910101012295811.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910151003395231.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 	<a href="" class="fl">
			   		 		<img src="img/201910301022055219.jpg"  width="100%" height="100%"/>
			   		 	</a>
			   		 </div>
			   		 
			   		 <div class="wzgg"> <!--公告栏布局，相当于把幻灯片的兄弟元素，因为此要相对于content-box类进行绝对定位-->
			   		 	<!--一开始这个公告栏没显示出来,是因为它的兄弟幻灯片样式使用了绝对定位,
			   		 		完全脱离文档流,所以此公告栏会自动补位,跑到幻灯片下面去了.
			   		 		解决办法:把公告栏也设置绝对定位,它也会浮起来
			   		 	-->
			   		 	<h3>网站公告</h3>
			   		 	<ul>
			   		 		<li> <a href="">新版页面更新使用</a> </li>
			   		 	</ul>
			   		 </div>
			   		 
			   	 </div>
			   </div>
			
			<!--幻灯片结束-->
			
			<!--远程培训班开始-->
			  <div class="ycpxb content-box">
			  	<a href="#" class="a1">
                    <span>远程培训班</span>  <!--设置span元素的目的在51zxw.css文件中-->
			  	</a>
			  	<a href="#" class="a2">
                    <span class="span2">[与您同行] <br/> 校园活动 </span>
			  	</a>
			  	<a href="#" class="a3">
                    <span>学习规划</span>
			  	</a>
			  	<a href="#" class="a4">
                    <span>应聘讲师</span>
			  	</a>
			  	<a href="#" class="a5">
                    <span>问答系统</span>
			  	</a>
			  	
			  </div>
			<!--远程培训班结束-->		
			
			<!--最新课程区块开始-->
			<div class="zxkc content-box">
				<h3 class="m-title">最新课程</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				<div class="m-list zx-box clearfix">
					<a href="#">
						<img src="img/782.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/781.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/780.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/779.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/778.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/777.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/776.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/775.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
			<!--最新课程区块结束-->
			
			<!--热门推荐开始-->
			<div class="rmtj content-box">
				<h3 class="m-title">热门推荐</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="rm-nav clearfix">  <!--热心推荐导航栏-->
					<a class="rm-a" href="#">电脑办公</a>
					<a class="rm-b" href="#">平面设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>
					<a class="rm-b" href="#">室内设计</a>					
				</div>
				
				<div class="m-list rm-box clearfix">
					<a href="#">
						<img src="img/354.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
			</div>
		    <!--热门推荐结束-->
		    
		    <!--课程分类区块开始-->
			<div class="kcfl content-box">
				<h3 class="m-title">课程分类</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
				
				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
				    
		    

				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>


				<div class="kc-nav clearfix">  <!--课程分类导航栏-->					 
					<a class="kc-nav-a" href="#">WordExcel基础</a>
					<a class="kc-nav-a" href="#">PPT</a>
					<a class="kc-nav-a" href="#">WPS</a>
					<a class="kc-nav-a" href="#">iebook</a>
					<a class="kc-nav-a" href="#">五笔输入法86版</a>
					<a class="kc-nav-a" href="#">电脑入门</a>
					<a class="kc-nav-a" href="#">PDF文档</a>
					<a class="kc-nav-a" href="#">visio</a>
					<a class="kc-nav-a" href="#">Windows</a>
					<a class="kc-nav-a" href="#">Acrobat</a>
					<a class="kc-nav-a" href="#">计算机等级考试</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-a" href="#">Excel 进阶</a>
					<a class="kc-nav-b" href="#">更多>></a>					
				</div>
				
				<div class="m-list kc-box clearfix">
					<a class="kc-a" href="#">
						<img src="img/class1.jpg"/>
						<p>C#入门教程</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/649.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/752.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/676.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
					<a class="kc-b" href="#">
						<img src="img/626.jpg"/>
						<p>Excel VBA编程宝典1---初战篇</p>
					</a>
				</div>
		    </div>	
		    <!--课程分类区块结束-->
			
			<!--名师简介开始-->
			<div style="background: #FFFFFF;">
				<div class="msjj content-box">
					<h3 class="m-title">名师简介</h3>  <!--m-title是一个公共样式,和content-box放在一起-->
					<p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p>
					<div class="ms-box clearfix">
						<a href="#">
							<img src="img/t_lijiang.jpg" />
							<p class="p1">小朱老师</p>
							<p class="p2">尤其擅长传授吃货的修养</p>
						</a>
						<a href="#">
							<img src="img/t_huangjianbi.jpg" />
							<p class="p1">左老师</p>
							<p class="p2">擅长各种技能</p>
						</a>
						<a href="#">
							<img src="img/t_tanying.jpg" />
							<p class="p1">高老师</p>
							<p class="p2">大家都这样称呼</p>
						</a>
						<a href="#">
							<img src="img/t_xieling.jpg" />
							<p class="p1">喻老师</p>
							<p class="p2">江湖人称飒姐姐</p>
						</a>
					</div>
				</div>
			</div>
			<!--名师简介结束-->
			
			<!--页面尾部开始-->
			<footer class="content-box">
				<p class="f-p1">
					<b>网站信息</b>
					<span>建站时间：124124</span>
					<span>教程数量：53253</span>
					<span>注册人数：4235325253</span>
				</p>
				<p class="f-p2">
					<b>友情链接</b>
					<a href="#"> <img src="img/baidu.png"/> </a>
					<a href="#"> <img src="img/360.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/rising_51.png"/> </a>
					<a href="#"> <img src="img/baidu.png"/> </a>
				</p>
				<p class="f-p3">					
					<a href="#">大耳朵英语</a>
					<a href="#">高分网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">大耳朵英语</a>
					<a href="#">精英家教网</a>
					<a href="#">高分网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
					<a href="#">精英家教网</a>
					<a href="#">上学吧</a>
				</p>
				<p class="f-p4">					
					<a href="#">关于网站</a>
					<a href="#">关于我们</a>
					<a href="#">网站地图</a>
					<a href="#">购买教程</a>
					<a href="#">在线咨询</a>
					<a href="#">业务合作</a>
					<a href="#">建议留言</a>
				</p>
				
				<p class="f-p5">	
					<span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程不得转载法律顾问：刘炜律师</span>	
					<img src="img/pic.gif"/>
				</p>
				
				<p class="f-p6">	
					<a href="#"><img src="img/footPic1.png"/></a>
					<a href="#"><img src="img/footPic2.png"/></a>
				</p>
			</footer>
			
			<!--页面尾部结束-->
			
			<!--左侧快速跳转开始-->
			 <div class="kstz">
			 	<h4>快速跳转</h4>
			 	<a href="#" class="active">最新<br />课程</a>
			 	<a href="#">热门<br />推荐</a>
			 	<a href="#">课程<br />分类</a>
			 	<a href="#">热门<br />职业</a>
			 	<a href="#">名师<br />简介</a>
			 </div>			 
			<!--左侧快速跳转结束-->
			
			<!--右侧微信区块开始-->
			<div class="ycwx">
				<a href="#" class="wx">
					<span>官方<br />微信</span>
					<img src="img/wx.png"/>
				</a>
				<a href="#" class="qq">
					<span>官方<br />QQ</span>
				</a>
				<a href="#" class="app">
					<span>APP<br />下载</span>
				</a>
				<a href="#" class="top">
					<span>返回<br />顶部</span>
				</a>				
			</div>
			
			
			
			<!--右侧微信区块结束-->
		</header>

		
	</body>
</html>

51zxw.css

body{
	background: #f3f3f3;
	font-size: 14px;
}

/*公共样式*/
.content-box{
	width: 1200px;margin: 0 auto;
}
.m-title{ /*标题模块:如最新课程*/
	width: 100%;height: 80px;line-height: 80px;text-align: center;font-size: 30px;
	font-weight: 400;background: url(../img/redline.png) no-repeat center;	
}
.m-list a{
	float: left;display: block;border-radius: 10px;overflow: hidden;
	box-shadow: 0 0 10px #CCCCCC;
}
.m-list a img{
	width: 100%; /*和父级a标签保持一致*/
	-webkit-filter: opacity(85%);
	filter: opacity(85%);
}
.m-list a:hover img{
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
}
.m-list a:hover p{
	color: #0000FF;
}
.m-list a p{ /*课程名:如Excel VBA编程宝典1---初战篇*/
	width: 100%;height: 30px;line-height: 30px;
	padding: 0 10px;overflow: hidden;
}

/*公共样式*/

/*logo,搜索,用户信息开始*/
.h-top{ /*logo,搜索,用户信息总盒子*/
	height: 88px;position: relative;
}
.h-top .logo{
	width: 214px; height: 58px;
	display: block; /*转化成块级元素*/
	position: absolute; /*绝对定位*/
	left: 0;
	top: 15px; /*(88px-58px)/2=15px 上部和下部的间距各15px*/
}
.h-top .search{ /*search表单 总盒子*/
	width: 330px;height: 36px;border: 1px solid #CCCCCC;
	border-radius: 18px; /*圆角边框*/ 
	overflow: hidden;/*必须要加上overflow才会显示出圆角，因为设置了圆角后，前直角放不下溢出了，必须处理才能正常显示圆角*/	
	background: #FFFFFF;
	position: absolute;
    left: 50%; margin-left: -150px;
    top: 26px; /*(88px-36px)/2=26px 上部和下部的间距各26px*/
}
.h-top .search .inp-l{ /*左边输入框input*/
	width: 260px;height: 36px;border: none;	
	padding: 0 20px;
}

.h-top .search .inp-r{ /*右边提交框input*/
	width: 58px;height: 34px;border: none;
	border-radius: 18px;
	background: #acce22;
}

.h-top .user{ /*帮助中心  注册/登录的总盒子 */
	width: 180px;height: 28px;line-height: 28px;
	position: absolute;right: 0;top: 30px;
}

.h-top .user a{ /*帮助中心  注册/登录 */
	display: inline-block; width: 76px;height: 28px;
	text-align: center;font-size: 16px;color: #000000;
}
/*logo,搜索,用户信息结束*/


/*导航开始*/
nav{
	background: #363636;
}
nav .nav-box{
	height: 44px;line-height: 44px;text-align: center;
}
.nav-box .nav-l{
	width: 800px;
}
.nav-box a{
	display: block;width: 80px;height: 44px;float: left;color: #FFFFFF;
}
.nav-box .nav-r{
	width: 240px;
}
.nav-box .nav-r a{
	font-size: 16px;
}

.nav-box .nav-l a:hover{
	font-size: 16px;
	color: #00AEFF;
}

.nav-box .nav-r a:hover{
	background: #CA3333;
}
/*导航结束*/

/*幻灯片开始*/
.hdp{ /*最外面的div*/
	background: #FF9000;
}
.hdp .content-box{ /*装内容的div*/  
	/*height: 330px; 如果相对定位的父级不设定高度的话，使用绝对定位的子级是完全脱离文档流的，会导致看不到子级内容*/
	height: 330px;overflow: hidden;position: relative;
}
.hdp-img { /*装图片的div*/
	width: 3600px;position: absolute;left: 0px; /*通过js可以控制left值，实现幻灯片轮播，即-1200(第二张图)，-2400(第三张图)*/
}
.hdp-img a{
	display: block;width: 1200px;height: 330px;
}

.hdp .content-box .wzgg{
	position: absolute;right: 0;top: 10px;
	height: 310px;width: 250px;background: rgba(0,0,0,0.7);
	border-radius: 10px;	
	padding: 20px;
	
}

.wzgg h3{
	text-align: center;
    color: #FFFFFF;
    padding-bottom: 10px;
}
    
.wzgg ul{
	color: #FFFFFF;
	
}
.wzgg ul li{
	list-style: inside disc; 
	/*不加inside的话,列表前的小圆点显示不出来,
	原因是wzgg类使用了绝对定位,所以完全脱离文档流.
	左浮动会使盒模型一个挨一个横向排练,列表符号的位置在盒模型之外*/
        
}
.wzgg ul li a{
	color: #FFFFFF;
	font-size: 12px;
}
/*幻灯片结束*/


/*远程培训班开始*/
.ycpxb{
	height: 160px; /*宽度就是1200px*/
	background: #FFFFFF;
	padding-top: 23px;
}
.ycpxb a{
	display: block;width: 210px;height: 114px;float: left;
	background: no-repeat 0 0/100% 100%; /*背景定位(0 0)/背景尺寸(100% 100%)*/
	margin: 0 15px;
	border-radius: 15px;overflow: hidden; /*overflow: hidden;目的是为了隐藏掉,由于span元素弄乱的圆角部分*/
	font-size: 24px;
	color: #FFFFFF;
	font-weight: 700; /*不能写700px,否则不能加粗*/
	text-align: center;
	line-height: 114px;
}
.ycpxb a:hover{
	background-size: 110% 110%;
}
.ycpxb .a1{
	background-image: url(../img/otherFun1.jpg);
}
.ycpxb .a2{
	background-image: url(../img/otherFun2.jpg);
}
.ycpxb .a3{
	background-image: url(../img/otherFun3.jpg);
}
.ycpxb .a4{
	background-image: url(../img/otherFun4.jpg);
}
.ycpxb .a5{
	background-image: url(../img/otherFun5.jpg);
}

.ycpxb a span{ /*设置span元素的目的在此: 为了让span元素变成块级元素,设置宽高,设置透明度*/
	display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.3);
	text-shadow: 4px 2px 5px #000000;
}
.ycpxb a .span2{
	line-height: normal;
	padding-top: 20px;
}
/*远程培训班结束*/


/*最新课程区块开始*/
.zx-box a{
	width: 270px;height: 240px;margin: 20px 15px;
}
.zx-box a img{
	height: 210px;
}
/*最新课程区块结束*/

/*热门推荐开始*/
.rm-box a{
	width: 210px;height: 190px;margin: 20px 15px;
}
.rm-box a img{
	width: 100%;height: 160px;
}

.rm-nav a{
	display: block;width: 70px;height: 30px;line-height: 30px;text-align: center;
	float: left;margin: 0 25px;
}
.rm-nav .rm-a{
	background: #0000FF;color: #FFFFFF;border-radius: 4px;
}
.rm-nav .rm-b:hover{
	color: #0000FF;
}
/*热门推荐结束*/


/*课程分类区块开始*/
.kc-box .kc-b{
	width: 210px;height: 190px;margin: 20px 15px;
}
.kc-box .kc-b img{
	width: 100%;height: 160px;
}

.kc-box .kc-a{
	width: 190px;height: 170px;margin: 30px 35px 0px 15px;
}
.kc-box .kc-a img{
	width: 100%;height: 170px;
}

.kcfl .kc-nav{
	padding: 50px 100px 0 15px;position: relative;word-break: keep-all;
	border-bottom: 1px solid #CCCCCC;padding-bottom: 6px;
}

.kcfl .kc-nav .kc-nav-a{
	line-height: 20px;margin-right: 10px;
}
.kc-nav .kc-nav-a:hover{
	color: #0000FF;
}
.kcfl .kc-nav .kc-nav-b{
	display: block;width: 60px;height: 20px;line-height: 20px;
	background: #00AEFF;border-radius: 4px;text-align: center;color: #FFFFFF;   
    position: absolute;right: 15px;bottom: 6px;
}
/*课程分类区块结束*/

/*名师简介开始*/
.msjj {
	padding-top: 20px;padding-bottom: 40px;
}

.ms-box a{
	display: block;width: 270px;height: 310px;background: #E7E7E7;float: left;
	margin: 30px 15px;
	padding-top: 40px;
	text-align: center;
}

.ms-box a img{
	width: 150px;height: 150px;border-radius: 50%;
}
.ms-box a .p1{
	font-size: 20px;
	line-height: 40px;padding-top: 20px;
}
.ms-box a .p2{
	color: #6B6B6B;
}

/*名师简介结束*/


/*页面尾部开始*/
footer{
	padding: 20px 0;
}
footer p{
	padding: 8px 0;
}
footer .f-p1 b{ /*建站时间   这四个字*/
  display: inline-block;width: 80px;text-align: center;margin: 0 20px;
}
footer .f-p1 span{ 
  margin: 0 10px;
}

footer .f-p2 b{ /*友情链接  这四个字*/
  display: inline-block;width: 80px;text-align: center;margin: 0 20px;
}
footer .f-p2 a{ 
  margin: 0 10px;
}
footer .f-p2 a img{ 
  height: 30px;
}
footer .f-p3 {
	padding-left: 120px;padding-right: 100px;word-break: keep-all;
}
footer .f-p3 a{
	margin:0 10px;font-size: 12px;
}
footer .f-p3 a:hover{
	color: blue;
}

footer .f-p4{
	text-align: center;
}
footer .f-p4 a{
	display: inline-block;width: 70px;height: 20px;line-height: 20px;
	color: #FFFFFF;background: #3899DD;border-radius: 4px;overflow: hidden;
	margin: 0 4px;
}

footer .f-p5{
	text-align: center;font-size: 12px;
}
footer .f-p5 img{
	vertical-align: middle; /*放在父元素的中部*/
}

footer .f-p6 {
	text-align: center;
}	
/*页面尾部结束*/


/*左侧快速跳转开始*/
.kstz{
	width: 66px;text-align: center;position: fixed;top: 150px;
	left: 50%;margin-left: -686px;
}
.kstz h4{
	color: #5A98DE;
	margin-bottom: 10px;
}

.kstz a{
	display: block;width: 66px;height: 66px;
	border-radius: 50%;
	box-shadow: 0 0 8px #CCCCCC;margin-bottom: 16px;
	padding-top: 15px;
}

..active:hover{
	color: blue;
}

.active{
	background: #00AEFF;color: #FFFFFF;
}
/*左侧快速跳转结束*/

/*右侧微信区块开始*/
.ycwx{
	position: fixed;top: 275px;right: 50%;margin-right: -686px;
}

.ycwx a{
	display: block;width: 50px;height: 50px;border-radius: 4px;box-shadow: 0 0 8px #CCCCCC;
	text-align: center;margin-bottom:10px ;padding-top: 8px;
}

.ycwx a span{
	display: none;/*先隐藏掉span元素*/
}

.ycwx .wx{
	background: no-repeat url(../img/wxIcon.png) center;position: relative;
}
.ycwx .qq{
	background: no-repeat url(../img/qqIcon.png) center;
}
.ycwx .app{
	background: no-repeat url(../img/mobileIcon.png) center;
}
.ycwx .top{
	background: no-repeat url(../img/upArrowIcon.png) center;
}
.ycwx .wx img{
	display: none;
	position: absolute;left: -180px;top: -10px;
}

.ycwx a:hover span{
   display: block;
}
.ycwx a:hover{
   background: none;
}
.ycwx .wx:hover img{
	display: block;	
}
/*右侧微信区块结束*/

reset.css

*{margin: 0;padding: 0;/*重置内边距和外边距*/
-moz-box-sizing:  border-box; /*火狐浏览器老版本*/
-webkit-box-sizing: border-box; /*webkit内核浏览器*/
box-sizing:  border-box;
} 
body{font-size: 14px;font-family: "微软雅黑";color: #333333;background: #f3f3f3fon;}			
b{font-weight: normal;}
i{font-style: normal;}

a,a:hover,a:active{text-decoration: none;color: #333333;}

textarea,input,select{outline: none;}

img{border: none;vertical-align: top;} /*解决img元素和相邻元素之间下方有空隙的问题*/

li{list-style: none;}  /*把列表前面的样式圈圈去掉*/

.fl{float: left;}
.fr{float: right;}

/*使用伪元素，防止父元素高度塌陷*/
.clearfix::after{
				content: "";
				display: table;
				clear: both;}
苏米素
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值