2-10编程练习

来源：2-10 编程练习

慕标4519152

2018-12-22 00:13:47

<!DOCTYPE html>
<html>
<head>
	<title>两列布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0;padding: 0;}
		ul{list-style: none;}
		a{text-decoration: none;}
		.container{
			width: 1200px;
			height: 700px;
			margin: 0 auto;
		}
		.header{
			width: 100%;
			height: 100px;
			margin: 0 auto;
			background: #313131;
			overflow: hidden;
			zoom:1;
		}
		.header .logo{
			width: 200px;
			height: 80px;
			float: left;
		}
		.header .nav{
			float: right;
			overflow: hidden;
			zoom:1;
		}
		.header .nav li{
			margin: 0 30px;
			float: left;
		}
		.header .nav li a{
			height: 80px;
			line-height: 80px;
			display: block;
			color: white;
			font-family: "微软雅黑";
			font-size: 16px;
		}
		.header .nav li a:hover{color: gray;}
		.con{
			width: 100%;
			height: 500px;
			background: #3a91f2;
			overflow: hidden;
			zoom:1;
		}
		.con .left{
			width: 50%;
			height: 500px;
			float: left;
			position: relative;
			left: 200px;
			top:80px;
		}
		.con .right{
			width: 50%;
			height: 500px;
			float: left;
			text-align: left;
			position: relative;
			left: 150px;
			top:80px;
		}
		.con .left table{
			width: 70%;
			line-height:2em;
		}
		.con .left table .td1{
			background: pink;
			text-align: center;
		}
		.con .right table{
			width: 40%;
			line-height:2em;
			
		}
		.footer{
			width: 100%;
			height: 100px;
			background: #313131;
			
		}
		.footer .footer_li{
			overflow: hidden;
			zoom:1;
			margin: 0 200px;
					}
		.footer .footer_li li{
			float: left;
			height: 80px;
			line-height: 100px;
			
		}
		.footer .footer_li li a{
			color: white;
			margin: 0 30px;
			font-family: "微软雅黑";
			font-size: 16px;
		}
		.footer .footer_li li a:hover{
			color: gray;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="logo">
				<a><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
			</div>
			<ul class="nav">
				<li><a href="#">课程</a></li>
				<li><a href="#">职业路径</a></li>
				<li><a href="#">实战</a></li>
				<li><a href="#">猿问</a></li>
				<li><a href="#">手记</a></li>
			</ul>
		</div>
		<div class="con">
			<div class="left">
				<h3>课程推荐</h3>
				<table>
					<tr>
						<td class="td1">职业路径</td>
						<td>HTML与CSS3实现动态网页</td>
					</tr>
					<tr>
						<td class="td1">职业路径</td>
						<td>零基础入门Android语法与界面</td>
					</tr>
					<tr>
						<td class="td1">职业路径</td>
						<td>IOS基础语法与常用控件</td>
					</tr>
					<tr>
						<td class="td1">职业路径</td>
						<td>PHP入门开发</td>
					</tr>
					<tr>
						<td class="td1">职业路径</td>
						<td>JAVA入门开发</td>
					</tr>
				</table>
			</div>
			<div class="right">
				<table>
					<h3>相关课程</h3>
					<tr>
						<td>HTML</td>
						<td>CSS</td>
						<td>JavaScript</td>
					</tr>
					<tr>
						<td>HTML</td>
						<td>CSS</td>
						<td>Jquery</td>
					</tr>
					<tr>
						<td colspan="2">移动端基础</td>
						<td>移动端APP开发</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="footer">
			<ul class="footer_li">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">企业合作</a></li>
				<li><a href="#">人才招聘</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">常见问题</a></li>
				<li><a href="#">友情链接</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

写回答

1回答