学生网

于 2018-04-08 22:33:03 发布
阅读量440 收藏
点赞数
分类专栏： css 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Xl4277/article/details/79859294
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		padding: 0;
		margin: 0;
	}
	body {
		background-color: #F3F5F7;
	}
	ul {
		list-style: none;
	}
	input {
		outline: 0;
	}
	h4 {
		color: #4E4E4E;
		font-size: 16px;
		font-weight: normal;
	}
	p {
		font-size: 12px;
		color: #898989;
	}
	a {
		text-decoration: none;
		font-family: "楷体";
		color: #666666;
	}
/*通栏*/
	.tonglan {
		height: 100px;
		background-color: #F3F5F7;
	}
	.nav {
		width: 1200px;
		height: 100px;
		/*background-color: blue;*/
		margin: 0 auto;
		overflow: hidden;
	}
	.nav img {
		margin: 30px 54px 30px 0;
		float: left;
	}
	.nav .ul1 li:hover {
		color: #00A4FF;
		border-bottom: 2px solid #00A4FF;
	}
	.nav .ul1 li {
		float: left;
		padding: 10px ;
		margin-top: 32px;
	}
	.nav .ul1 li:nth-child(1) {
		border-bottom: 2px solid #00A3FF;
	}
	.nav div:nth-child(2) {
		float: right;
		w
	}
	.nav div {
		width: 410px;
		height: 38px;
		background-color: blue;
		float: left;
		margin: 30px 30px;
	}
	.nav input[type=text] {
		width: 345px;
		height: 38px;
		border: 1px solid #00A3FF;
		float: left;
		padding-left: 15px;
	}
	.nav input[type=submit] {
		width: 48px;
		height: 40px;
		background: url(search_06.png) no-repeat center #00A3FF;
		float: left;
		border: 1px solid #00A3FF;
	}
	.nav .ul li img {
		margin: 0;
		vertical-align: middle; /*图片和文字对其*/
	}
	.nav .ul li {
		float: right;
		margin-left: 43px;
		margin-top: 30px;
	}
/*版心*/
	.lanban {
		width: 100%;
		height: 420px;
		background-color: #1B036B;
	}
	.banxin {
		width: 1200px;
		height: 420px;
		margin: 0 auto ;
		background:  url(banner_03.png) 0 0 no-repeat;
	}
	.banxin .banxin-l {
		height: 420px;
		width: 190px;
		background: rgba(0, 0, 0,0.2);
		float: left;
	}
	.banxin dl {
		width: 228px;
		height: 300px;
		background-color: #fff;
		float: right;
		margin-top: 50px;
		text-align: center;
	}
	.banxin ul li {
		padding: 10px 0 15px 20px
	}
	.banxin ul li:hover {
		background-color: #0000;
		border-radius: 15px;
		box-shadow: 0 0 20px 2px #fff;
	}
	.banxin ul li a {
		color: #fff;
	}
	.banxin ul li span {
		float: right;
		margin-right: 20px;
	}
	.banxin dl {
		text-align: center;
	}
	.banxin dl dt {
		width: 228px;
		height: 48px;
		background-color: #9BCEEA;
		color: #FFFFFF;
		line-height: 48px;
	}
	.banxin dl dd {
		width: 228px;
		height: 50px;
		margin-top: 16px;
		border-bottom: 1px solid #EFEFEF;
	}
	.banxin dl dd:last-child:hover {
		background-color: #22B0FF;
		color: #fff;
	}
	.banxin dl dd:nth-child(4) h4,
	.banxin dl dd:nth-child(4) p {
		color: #00A4FF;	
	}
	.banxin dl dd:last-child {
		border: 1px solid #22B0FF;
		margin: 0 auto;
		padding: 5px;
		width: 198px;
		height: 38px;
		color: #22B0FF;
		box-sizing: border-box;
	}
/*精品推荐 */
	.jingpin {
		width: 1200px;
		height: 60px;
		background-color: #FFFFFF;
		margin: 8px auto;
	}
	.jingpin ul li:hover {
		color: #00A4FF;
	}
	.jingpin ul li {
		float: left; 
		padding: 12px 34px;
		border-right: 1px solid #BFBFBF;
		background-color: #FFFFFF;
	}	
	.jingpin ul li:first-child {
		color: #00A4FF;
	}
	.jingpin ul li:last-child {
		float: right;
		border: 0;
		color: #00A4FF;
		font-size: 14px;
	}
/*精品推荐*/ 
	.tuijian {
		width: 1200px;
		height: 596px;
		/*background-color: pink;*/
		margin: 0 auto ;
	}
	.tuijian-t {
		height: 40px;
		width: 1200px;
		/*background-color: red;*/
	}
	.tuijian-t h3 {
		float: left;
	}
	.tuijian-t p {
		float: right;
		color: #A5A5A5;
		margin-right: 30px;
		font-size: 14px;
	}
	.tuijian-b {
		width: 1200px;
		height: 556px;
		background-color: #F3F5F7;
	}
	.tuijian-b ul li h4 {
		margin: 25px 0 0 24px;
		font-size: 14px;
		color: #000000;
	}
	.tuijian-b ul li p {
		margin: 21px 0 0 24px;

	}
	.tuijian-b span {
		color: #FF7C2D;
	}
	.tuijian-b ul li {
		width: 228px;
		height: 270px;
		background-color: #FFFFFF;
		float: left;
		margin-right: 15px;
		overflow: hidden;
	}
	.tuijian-b ul li:nth-child(5n) {
		margin-right: 0;
	}
	.tuijian-b ul:last-child li {
		margin-top: 15px;
	}
/*编程入门 数据分析师*/
	.biancheng {
		width: 1200px;
		height: 434px;
		background-color: #F3F5F7;
		margin: 42px auto 0;
	}
	.biancheng-t {
		width: 1200px;
		height: 42px;
		/*background-color: red;*/
		text-align: center;
	}
	.biancheng-t h3 {
		float: left;
	}
	.biancheng ul {
		display: inline-block;
	}
	.biancheng-t li {
		/*float: left;*/
		display: inline-block;
		padding: 0 35px;
	}
	.biancheng-t li:first-child {
		color: #61C4FC;
	}
	.biancheng-t p {
		float: right;
	}
	.biancheng-b {
		height: 392px;
		width: 1200px;
		overflow: hidden;
		/*background-color: red;*/
	}
	.biancheng-b div:first-child {
		float: left;
		width: 228px;
		height: 392px;
	}
	.biancheng-b div:last-child {
		float: right;
		width: 957px;
		height: 392px;
	}
	.biancheng-b div:last-child li h4 {
		padding: 20px 0 20px 22px;
		float: left;
	}
	.biancheng-b div:last-child li p {
		padding-left: 22px;
		color: #999999;
	}
	.biancheng-b div:last-child li p span {
		color: #FF7C2D;
	}
	.biancheng-b div:last-child img {
		float: left;
	}
	.biancheng-b div:last-child li {
		float: left;
		margin: 22px 14px 0 0 ;
		width: 228px;
		height: 269px;
		background-color: #FFFFFF;
		}
	.biancheng-b div:last-child .li {
		margin-right: 0;
	}
/*机器工程师*/
	.jiqi {
		width: 1200px;
		height: 310px;
		background-color: #F3F5F7;
		margin: 42px auto 0;
	}
	.jiqi-t {
		height: 40px;
		width: 1200px;
		/*background-color: red;*/
		text-align: center;
	}
	.jiqi-t li:first-child {
		color: #61C4FC;
	}
	.jiqi-t li {
		display: inline-block;
		padding: 0 35px;
	}
	.jiqi-t ul {
		display: inline-block;
	}
	.jiqi-t h3 {
		float: left;
	}
	.jiqi-t p {
		float: right;
	}
	.jiqi-b {
		width: 1200px;
		height: 270px;
		/*background-color: red;*/
	}
	.jiqi-b ul li {
		width: 227px;
		height: 270px;
		background-color: #FFFFFF;
		float: left;
		margin-right: 16px;
		overflow: hidden;
	}
	.jiqi-b ul li:last-child {
		margin-right: 0;
	}
	.jiqi-b ul li h4 {
		padding: 20px 0 20px 22px;
		float: left;
	}
	.jiqi-b ul li p {
		padding-left: 22px;
		color: #999999;
	}
	.jiqi-b ul li p span {
		color: #FF7C2D;
	}
/*牛人推荐*/
	.niuren {
		width: 1200px;
		height: 712px;
		/*background-color: pink;*/
		margin: 40px auto 0;
	}
	.niuren-t {
		width: 1200px;
		height: 40px;
		/*background-color: red;*/
	}
	.niuren-m {
		width: 1200px;
		height: 320px;
		/*background-color: blue;*/
	}
	.niuren-m ul li {
		width: 228px;
		height: 320px;
		/*background-color: blue;*/
		float: left;
		margin-right: 15px;
		overflow: hidden;
	}
	.niuren-m ul li:last-child {
		margin-right: 0;
	}
	.niuren-b {
		width: 1200px;
		height: 320px;
		/*background-color: blue;*/
		margin: 30px auto 0;
	}
	.niuren-b div {
		width: 471px;
		height: 320px;
		background-color: blue;
		float: left;
		margin-right: 15px;
	}
	.niuren-b ul li {
		height: 320px;
		width: 228px;
		/*background-color: blue;*/
		float: left;
		margin-right: 15px;
		overflow: hidden;
	}
	.niuren-b ul li:last-child {
		margin-right: 0;
	}
/*收尾*/
	.shouwei {
		margin-top: 100px;
		height: 273px;
		background-color: #fff;
	}
	.shouwei-0 {
		width: 1200px;
		height: 273px;
		/*background-color: pink;*/
		margin: 0 auto;
	}
	.shouwei-r {
		width: 745px;
		height: 273px;
		float: right;
	}
	.shouwei-l {
		width: 455px;
		height: 273px;
		float: left;box-sizing: border-box;

	}
	.shouwei-l img {
		margin: 33px 0 28px 20px;
		float: left;
	}
	.shouwei-l p {
		float: left;
		margin-left: 20px;
	}
	.shouwei-l h4 {
		width: 118px;
		height: 34px;
		border: 1px solid #00A4FF;
		color: #00A4FF;
		float: left;
		text-align: center;
		line-height: 34px;
		margin: 17px 0 0 19px;
	}
	.shouwei-l h4:hover {
		background-color: #00A4FF;
		color: #FFFFFF;
	}
	.shouwei-r dl {
		float: right;
		width: 86px;
		height: 130px;
		margin: 34px 62px;
	}
	.shouwei-r dl dt {
		color: #696969;
		margin-bottom: 16px;
	}
	.shouwei-r dl dd {
		color: #333333;
		font-size: 12px;

	}
	</style>
</head>
<body>
<!-- 通栏 -->
	<div class="tonglan">
		<div class="nav">
			<img src="logo-s.png" alt="">
			<ul class="ul1">
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
			<div>
				<input type="text" placeholder="输入关键字">
				<input type="submit" value="">
			</div>
			<ul class="ul">
				<li><a href="#"><img src="tou_03.png" alt="">熊小露</a></li>
				<li><img src="ling_06.png" alt=""></li>
				<li><a href="#">个人中心</a></li>
			</ul>		
		</div>
	</div>
<!-- 版心 -->
	<div class="lanban">
		 <div class="banxin">
		 	<div class="banxin-l">
		 		<ul>
		 			<li><a href="#">前端开发<span>></span></a></li>
		 			<li><a href="#">后端开发<span>></span></a></li>
		 			<li><a href="#">移动开发<span>></span></a></li>
		 			<li><a href="#">人工智能<span>></span></a></li>
		 			<li><a href="#">商业预测<span>></span></a></li>
		 			<li><a href="#">云计算&大数据<span>></span></a></li>
		 			<li><a href="#">运维&从测试<span>></span></a></li>
		 			<li><a href="#">UI设计<span>></span></a></li>
		 			<li><a href="#">产品<span>></span></a></li>
		 		</ul>
		 	</div>
		 	<dl>
		 		<dt>我的课程表</dt>
		 		<dd>
		 			<h4>继续学习 程序语言设计</h4>
		 			<p>正在学习-使用对象</p>
		 		</dd>
		 		<dd>
		 			<h4>继续学习 程序语言设计</h4>
		 			<p>正在学习-使用对象</p>
		 		</dd>
				<dd>
		 			<h4>继续学习 程序语言设计</h4>
		 			<p>正在学习-使用对象</p>
		 		</dd>
				<dd>全部课程</dd>
		 	</dl>
		 </div>
	</div>
<!-- 精品推荐 -->
	<div class="jingpin">
		<ul>
			<li>精品推荐</li>
			<li>JQucry</li>
			<li>Spark</li>
			<li>MySQL</li>
			<li>javaWob</li>
			<li>MySQL</li>
			<li>JavaWob</li>
			<li>修改兴趣</li>
		</ul>
	</div>
<!-- 精品推荐 -->
	<div class="tuijian">
		<div class="tuijian-t">
			<h3>精品推荐</h3>
			<p><a href="#">查看全部</a></p>
		</div>
		<div class="tuijian-b">
			<ul>
				<li>
					<img src="icon1.png" alt="">
					<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon2.png" alt="">
					<h4>Android 网络图片加载框架详<br />解</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon3.png" alt="">
					<h4>Angular 2 最新框架+主流技<br />术+项目实战</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon4.png" alt="">
					<h4>Android Hybrid APP开发实<br />战H5+原生！</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon4.png" alt="">
					<h4>Android Hybrid APP开发实<br />战H5+原生！</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
			</ul>
			<ul>
				<li>
					<img src="icon1.png" alt="">
					<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon2.png" alt="">
					<h4>Android 网络图片加载框架详<br />解</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon3.png" alt="">
					<h4>Angular 2 最新框架+主流技<br />术+项目实战</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon4.png" alt="">
					<h4>Android Hybrid APP开发实<br />战H5+原生！</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
				<li>
					<img src="icon4.png" alt="">
					<h4>Android Hybrid APP开发实<br />战H5+原生！</h4>
					<p><span>高级</span>·1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
<!-- 变成入门 -->
	<div class="biancheng">
		<div class="biancheng-t">
			<h3>编程热门</h3>
			<ul>
				<li>热门</li>
				<li>初级</li>
				<li>中级</li>
				<li>高级</li>
			</ul>
			<p>查看全部</p>
		</div>
		<div class="biancheng-b">
			<div>
				<img src="intro1.png" alt="">
			</div>
			<div>
				<img src="intro2.png" alt="">
				<ul>
					<li><img src="intro3.png" alt="">
					<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li><img src="intro4.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li><img src="intro5.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li class="li"><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
				</ul>
			</div>
		</div>
	</div>
<!-- 数据分析师 -->
	<div class="biancheng">
		<div class="biancheng-t">
			<h3>数据分析师</h3>
			<ul>
				<li>热门</li>
				<li>初级</li>
				<li>中级</li>
				<li>高级</li>
			</ul>
			<p>查看全部</p>
		</div>
		<div class="biancheng-b">
			<div>
				<img src="data1.png" alt="">
			</div>
			<div>
				<img src="data2.png" alt="">
				<ul>
					<li><img src="intro4.png" alt="">
					<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li><img src="intro3.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
					<li class="li"><img src="intro5.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
					<p><span>高级</span>·1125人在学习</p></li>
				</ul>
			</div>
		</div>
	</div>
<!-- 机器学习工程师 -->
	<div class="jiqi">
		<div class="jiqi-t">
			<h3>机器学习工程师</h3>
			<ul>
				<li>热门</li>
				<li>初级</li>
				<li>中级</li>
				<li>高级</li>
			</ul>
			<p>查看全部</p>
		</div>
		<div class="jiqi-b">
			<ul>
				<li><img src="intro4.png" alt="">
				<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li><img src="intro3.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li class="li"><img src="intro5.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li class="li"><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
			</ul>
		</div>
	</div>
<!-- 前端开发工程师 -->
	<div class="jiqi">
		<div class="jiqi-t">
			<h3>机器学习工程师</h3>
			<ul>
				<li>热门</li>
				<li>初级</li>
				<li>中级</li>
				<li>高级</li>
			</ul>
			<p>查看全部</p>
		</div>
		<div class="jiqi-b">
			<ul>
				<li><img src="intro3.png" alt="">
				<h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li><img src="intro4.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li><img src="intro5.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li class="li"><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
				<li class="li"><img src="intro6.png" alt=""><h4>Think PHP 5.0博客系统实战<br />项目演练</h4>
				<p><span>高级</span>·1125人在学习</p></li>
			</ul>
		</div>
	</div>
<!-- 牛人推荐 -->
	<div class="niuren">
		<div class="niuren-t">
			<h3>牛人推荐</h3>
		</div>
		<div class="niuren-m">
			<ul>
				<li><img src="nr1.png" alt=""></li>
				<li><img src="nr2.png" alt=""></li>
				<li><img src="nr3.png" alt=""></li>
				<li><img src="nr4.png" alt=""></li>
				<li><img src="nr5.png" alt=""></li>
			</ul>
		</div>
		<div class="niuren-b">
			<div>
				<img src="nr6.png" alt="">
			</div>
			<ul>
				<li><img src="nr7.png" alt=""></li>
				<li><img src="nr8.png" alt=""></li>
				<li><img src="nr9.png" alt=""></li>
			</ul>
		</div>
	</div>
<!-- 收尾 -->
	<div class="shouwei">
		<div class="shouwei-0">
			<div class="shouwei-l">
				<img src="logo-s.png">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />@ 2017年XTCG Inc 保留所有权利。-泸ICP15025210号</p>
				<h4>下载APP</h4>
			</div>
			<div class="shouwei-r">
			<dl>
				<dt>合作伙伴</dt>
				<dd>合作机构</dd>
				<dd>合作导师</dd>
			</dl>
			<dl>
				<dt>新手指南</dt>
				<dd>如何注册</dd>
				<dd>如何选课</dd>
				<dd>如何拿到毕业证</dd>
				<dd>学分是什么</dd>
				<dd>考试未通过怎么办</dd>
			</dl>
			<dl>
				<dt>关于学成网</dt>
				<dd>关于</dd>
				<dd>管理团队</dd>
				<dd>工作机会</dd>
				<dd>客户服务</dd>
				<dd>帮助</dd>
			</dl>
			
			
			</div>
		</div>
	</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值