百度前端学院第一阶段任务五_百度前端学院任务5-CSDN博客

本文链接：https://blog.csdn.net/u010770184/article/details/51235619

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/main.css" />
	</head>
	<body>
		<div id="header">
			<div id="logo">
				<img src="img/logo.jpg"/>
			</div>
			<ul>
				<li><a>导航链接一</a></li>
				<li><a>导航链接二</a></li>
				<li><a>导航链接三</a></li>
				<li><a>导航链接四</a></li>
			</ul>
		</div>
		<div id="aside">
			<aside>
				<h2>
					侧栏的标题
				</h2>
			</aside>
			<form id="form">
				<label>请输入邮箱地址：</label>
				<input value="这是一个文本输入框" />
				<br /><br />
				<p class="tishi">邮箱地址请按要求格式输入</p>
				<br />
				<label>请输入密码：</label>
				<input type="password" length="16" value="123456"/>
				<br /><br />
			 	<label>请重复输入密码：</label>
				<input type="password" maxlength="16" value="123456"/>
				<br /><br />
				<p class="tishi">密码为1-16位英文或数字</p>
				<br />
				<label>性别：</label>
				<input type="radio" name="sex" />男
				<input type="radio" name="sex" />女
				<br /><br />
				<label>城市：</label>
				<select>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
				</select>
				<br /><br />
				<label>爱好：</label>
				<input type="checkbox" name="love" />运动
				<input type="checkbox" name="love" />艺术
				<br /><br />
				<label>个人描述：</label>
				<textarea>这是一个多行描述，输入您的个人描述</textarea>
				<br /><br />
			</form>
			<input id="submit" type="submit" value="确认提交" />
		</div>
		<div id="left">
			<div id="article1" class="content">
				<h2>文章一级标题</h2>
				<h3>文章二级标题</h3>
				<label class="zuozhe">文章作者</label>
				<p class="poet">
					宇宙中只有一颗地球，这也是人类和动、植物赖以生存的地方。从外太空向地球看去，
					它的宏大包容，让人对这颗充满生命力的星球心生敬畏。壮丽的拱桥横跨大河，下面是透亮的河水，
					两旁则是高耸的现代化建筑。在空气清新的多伦多，慢跑是一件很享受的事。从亨伯湾拱桥跑过，
					一边尽情呼吸，一边惬意浏览两边魅力无限的城市景观，真是乐事一件。
					<a href="http://www.baidu.com">这是一个链接段落</a>
				</p>
				<img src="img/th1.jpg" />
				<p class="poet">
					宇宙中只有一颗地球，这也是人类和动、植物赖以生存的地方。从外太空向地球看去，
					它的宏大包容，让人对这颗充满生命力的星球心生敬畏。壮丽的拱桥横跨大河，下面是透亮的河水，
					两旁则是高耸的现代化建筑。在空气清新的多伦多，慢跑是一件很享受的事。从亨伯湾拱桥跑过，
					一边尽情呼吸，一边惬意浏览两边魅力无限的城市景观，真是乐事一件。
					<a href="http://www.baidu.com">这是一个链接段落</a>
				</p>
			</div>
			<div id="article2" class="content">
				<article>
					<h2>另一篇文章一级标题</h2>
					<h3>文章二级标题</h3>
					<label class="zuozhe">文章作者</label>
					<p class="poet">
						安大略湖畔是多伦多风光最优美的地方之一，也是市民最喜爱的休闲场地。人们会在湖畔慢跑、
						骑行，游客可以乘船漫游于湖畔之上，也可以在岸边参观各种有趣的展览和表演，度过轻松的惬意时光。
						多伦多的老城区历史可追溯到十九世纪初，是当地艺术、文化和古迹中心。走在大街小巷上，
						随处可见迷人的维多利亚建筑，独具特色。
					</p>
					<img src="img/th1.jpg" />
				</article>
				<ul id="liebiaoxiangmu">
					<li>列表项目一</li>
					<li>列表项目二</li>
					<li>列表项目三</li>
					<li>列表项目四</li>
				</ul>
			</div>
			<div id="article3" class="content">
				<h2>图片</h2>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
				<div class="photo"><p>好看的图片</p><img src="img/th1.jpg"/></div>
			</div>
			<div id="article4" class="content">
				<h2>最后一篇文章一级标题</h2>
				<h3>文章二级标题</h3>
				<label class="zuozhe">文章作者</label>
				<ol>
					<li>排名一</li>
					<li>排名二</li>
					<li>排名三</li>
				</ol>
				<table>
					<tr>
						<th id="firstth">表头</th>
						<th id="secondth">表头</th>
						<th id="thirdth">表头</th>
					</tr>
					<tr>
						<td>表单元格</td>
						<td>表单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>
						<td>表单元格</td>
						<td>表单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr id="sum">
						<td>总计</td>
						<td colspan="2">1000</td>
					</tr>
				</table>
			</div>
		</div>
		<footer>
			版权所有&copy;
		</footer>
	</body>
</html>

*{
	margin: 0px ;
	padding: 0px ;
}
body{
	background-color: #ccc;
	font-family: "黑体";
}
footer{
	height: 110px;
	line-height: 110px;
	font-size: 1.5em;
	text-align: center;
	background-color: black;
	color: white;
}
h2,h3{
	margin-bottom: 10px ;
}
.zuozhe{
	display: block;
	margin-bottom: 10px;
	color: gray;
}
.poet{
	text-indent: 2em;
	line-height: 1.5;
}
#header{
	background-color: black;
	color: white ;
	overflow: auto;
}
#logo{
	margin-left: 20px ;
	padding-top:10px;
	float: left; 
}
#header ul li{
	float: left;
	margin-right:20px ;
	line-height: 150px;
}
#header ul{
	float:right;
}
#aside{
	padding: 20px;
	margin-top: 10px;
	margin-right: 20px;
	background-color: white;
	width: 350px;
	float:right
}
#left{
	margin-left: 20px;
	margin-right: 430px ;
	margin-top: 10px;
}
.content{
	padding: 20px;
	background-color: white;
	margin-bottom: 20px;
}
#article1 img,#article2 img{
	display: block;
	margin-top:20px ;
	margin-bottom: 20px;
}
#article2 ul{
	list-style-type: none;
	margin-left: 40px ;
}
#article2 ul li{
	margin-bottom: 5px;
}
.photo{
	overflow: auto;
	float:left;
	border: 1px #000 solid;
	margin-left: 20px;
	margin-top: 20px;
	padding: 10px;
	text-align: center;
}
.photo img{
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
}
#article3{
	overflow: auto;
}
#article4 ol{
	margin-left: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#article4 table{
	border: 1px #000 solid;
	width: 100%;
}
#article4 table th,td,tr{
	border: 1px #000 solid;
	padding-left: 5px;
}
#article4 table th{
	background-color: black;
	color: white;
}
#sum{
	background-color: gray;
	border: 0px;
}
#firstth,#secondth{
	width: 40%;
}
#thirdth{
	width: 20%;
}
#aside aside{
	border-left: 4px gray solid;
	padding-left: 10px;
	height: 50px;
	margin-bottom: 20px;
}
#aside h2{
	padding-top:10px;
}
#form label{
	float:left ;
	text-align: right;
	width:40%;
}
.tishi{
	margin-left: 140px;
	text-align: left;
	color: gray;
}
#submit{
	border-radius: 10px ;
	width: 100%;
	height: 40px;
	background-color: dodgerblue;
	font-size: 1.5em;
	color: white;
	font-weight: bolder;
}