搜索

一个简单页面布局

原创 2019-03-11 21:06:02 308
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小毛实验站</title> <style> body{ margin: 0; background-color: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小毛实验站</title>
	<style>
		body{
			margin: 0;
			background-color: gray;
			text-align: center;
		}
		
		#head{
			width: 980px;
			height: 80px;
			background-color: black;
			margin: 0 auto;
		}
		
		#title{
			float: left;
			width: 200px;
			height: 80px;
			text-align: center;
			color: white;
			font-size: 25px;
			line-height: 80px;
			border-right: 1px solid white;

		}
		
		#navbar{
			float: left;
			width: 779px;
			margin: 5px auto;
		}
		
		ul{
			margin-left: 100px;
			float: left;
			list-style: none;
			padding: 5px;
			}
		
		ul li{
			float: left;
			width: 150px;

		}
		a{
			text-align: center;
			font-size: 20px;
			color: white;
		}
		a:link{
			text-decoration: none;
		}
		#content{
			margin: 10px auto;
			width: 980px;
			background-color: black;
			padding-top: 30px;
		}
		#t1{
			margin-left: 50px;
			color: white;
		}
		td{
			font-size: 16px;
			}
	</style>
</head>
<body>
	<div id="head">
		<div id="title">小毛实验室</div>
		<div id="navbar">
			<ul>
				<li><a href="#">新闻</a></li>
				<li><a href="#">视频</a></li>
				<li><a href="#">文章</a></li>
				<li><a href="#">客服</a></li>
				
			</ul>
		</div>	
	</div>
	<div id="content">
		<div>
			<table id="t1">
				<caption style="font-size: 25px;border-bottom: 1px solid white; ">最新文章</caption>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td style="width:30px;"></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>
				<tr>
					<td>今晚开课今晚开课今晚开课</td>
					<td></td>
					<td>2019-03-11</td>
				</tr>				
			</table>
		</div>
		<div></div>		
	</div>
	
</body>
</html>


批改老师:韦小宝批改时间:2019-03-12 09:18:12
老师总结:css实现边框样式可以有多种样式的 没事多去实现几种

发布手记

热门词条