学成网只做了一部分，后面再做-CSDN博客

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/102511258
学成网只做了一部分，后面再做
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成网</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0; /*清除内外边距，方便计算宽高*/
	}
	input {
		border: 0px;　/*所有有表单边框为０*/
		box-sizing: border-box; /*CSS3盒子模型*/
	}

	body {
		background-color: #f4f5f9;
	}
	.header{
		width: 1330px;
		height: 102px;
		overflow: hidden;
	}
	nav {
		height: 42px;
		line-height: 42px;
		margin: 30px auto;
	}
	.logo {
		float: left;
	}
	.navbar {
		margin-left: 52px;
		float: left;
	}
	.navbar ul li {
		float: left; /*导航栏在一行显示*/
		list-style: none;
	}
	a {
		/*color: #050586;*/
		text-decoration: none; /*取消下划线*/
	}
	.navbar ul li a {
		padding: 0px 8px;
		display: block; /*行内元素如果需要给高,则需要转化为块元素*/
		height: 42px;
	}
	.navbar ul li a:hover {
		border-bottom: 2px solid #00a4ff;	
	}
	.search {
		width: 411px; /*360+51*/
		border: 1px solid #00a4ff;
		float: right;
	}
	.search input[type = search] { /*属性选择器*/
		width: 360px;
		height: 40px;
		padding-left: 20px;
		float: left;
	}
	.search img {
		float: left;
		width: 51px;
		height: 40px;	
	}
	.search input[type = submit] {
		width: 51px;
		height: 40px;
		float: left;
		background-image: url(search.png);
	}
	.personal {
		float: right;
		height: 40px;
		/*background-color: red;*/
		margin-left: 10px;
		/*line-height: 40px;*/
	}
	.personal img {
		margin-right: 10px;
	}

	.banner {
		height: 420px;
		background-color: #1b026b;
	}
	.container {
		width: 1200px;
		margin: 0 auto;
	}
	.bannerIn {
		height: 420px;
		background-image: url(banner.png);
	}
	.slideBan {
		height: 420px;
		width: 190px;
		background: rgba(0, 0, 0, 0.3);
		float: left;
	}
	.slideBan ul li {
		list-style: none;
	}
	.slideBan li a {
		color: #fff;
		font-size: 14px;
		padding: 0 20px;
		display: block;
		height: 45px;
		line-height: 45px;
	}
	.slideBan a span {
		float: right;
		font-family: arial; /*一般情况下，符号都用这个字体*/
	}
	.slideBan li a:link {

	}
	.slideBan li a:hover {
		color: #00a4ff;
	}
	.time-table {
		width: 230px;
		height: 300px;
		float: right;
		background-color: white;
		color: black;
		margin-top: 50px;
	}
	.time-table dt {
		height: 50px;
		line-height: 50px;
		background-color: #9bceeb;
		font-size: 18px;
		font-weight: 700;
		color: white;
		text-align: center;
		letter-spacing: 2px;
		margin-bottom: 10px;
	}
	.time-table dd {
		width: 193px;
		height: 60px;
		font-size: 14px;
		color: black;
		margin: 0 auto;	
		border-bottom: 1px solid #cccccc;
		padding-top: 13px;
		padding-bottom: 13px;
		box-sizing: border-box;
	}
	.time-table dd p {
		color: #a5a5ad;
	}
	.time-table dd:last-child {
		margin-top: 5px ;
		padding-top: 0;
		border: 1px solid #00a4ff;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: #00a4ff;
		text-align: center;
		font-weight: 700;
	}
	.time-table dd a{
/*		height: 40px;
		font-size: 18px;
		line-height: 40px;
		color: #00a4ff;
		text-align: center;
		
		font-weight: 700;*/
	}	
	</style>
</head>
<body>
	<div class="header">
		<nav>
			<!-- logo部分 -->
			<div class="logo">
				<img src="logo.png">
			</div>
			<!-- 导航栏 -->
			<div class="navbar">
				<ul>
					<li><a href="">首页</a></li>
					<li><a href="">课程</a></li>
					<li><a href="">职业规划</a></li>
				</ul>
			</div>
			<div class="personal">
				<a href="#">
					<img src="touxiang.png" alt="">
					我
				</a>
			</div>			
			<!-- 搜索框 -->
			<div class="search">
				<input type="search" placeholder="输入关键词">
				<!-- <img src="search.png" alt="找不到图片"> -->
				<input type="submit" value="">
			</div>
		</nav>
	</div>
	<div class="banner">
		<div class="bannerIn container">
			<!-- 左侧导航栏 -->
			<div class="slideBan">
				<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="">开发<span>></span></a></li>
					<li><a href="">开发<span>></span></a></li>
				</ul>
			</div>
			<div class= "time-table">
				<dl>
					<dt>我的课程表</dt>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd><a href="">全部课程</a>			
					</dd>
				</dl>
			</div>
		</div>
	</div>	
</body>
</html>