HTML——页面制作：career builder

效果展示：

代码实现过程中的收获：

1. 熟悉HTML中各种标签的应用；
2. 熟悉了float+position设置制作层叠效果。

顶部HTML代码：

<div name="top" id="top">
		<div  name="topImg" id="topImg">
			<img name="topImg1" id="topImg1" src="images/logo.png">
		</div>
		<div name="topList" id="topList">
			<ul>
				<li><label>HOME</label></li>
				<li><label>ABOUT</label></li>
				<li><label>GALLERY</label></li>
				<li><label>FACULTY</label></li>
				<li><label>EVENTS</label></li>
				<li><label>CONTACT</label></li>
			</ul>
		</div>	
	</div>

顶部CSS代码：

#top #topImg #topImg1{
	margin-left: 80px;
	position: absolute;
}

#top{
	background-color: #07cbc9;
	height: 50px;
	width: 100%;
	position: fixed;
	z-index: 100;
}

#top #topList ul{
	list-style: none;
}

#top #topList ul li{
	float:right;
	font-size: 10px;
    margin-right: 20px;
	color: white;
	line-height: 50px;
	font-weight: 700;

}

#top #topList{
	margin-right: 20px;
	height:50px;
}

#top #topList ul li:hover{
	background-color: black;
}

Banner区HTML

<div name="banner" id="banner">
		<div name="bannerImg" id="bannerImg">
			<img name="bannerImg1" id="bannerImg1" src="images/banner3.jpg">
		</div>
		<div name="bannerMessage" id="bannerMessage">
			<input type="text" name="aboutText1" value="your Name" id="aboutText1">
			<input type="text" name="aboutText2" value="your Phone" id="aboutText2">
			<input type="text" name="aboutText3" value="your Email" id="aboutText3">
			<textarea name="aboutText4" value="Write Your Comment Here" id="aboutText4">Write Your Comment Here</textarea>
			<input type="button" name="aboutButton1" value="SEND MESSAGE" id="aboutB