HTML——页面制作：career builder

最新推荐文章于 2023-07-04 19:38:54 发布

HBlack1993

最新推荐文章于 2023-07-04 19:38:54 发布

阅读量710

点赞数

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/HBlack1993/article/details/99644817

版权

本文通过制作Career Builder页面，介绍了如何运用HTML的各种标签，以及如何结合float和position属性创建层叠效果。内容包括顶部、Banner、About、Gallery/Foot各区的HTML和CSS代码实现。

摘要由CSDN通过智能技术生成

效果展示：
在这里插入图片描述
代码实现过程中的收获：

熟悉HTML中各种标签的应用；
熟悉了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="aboutButton1">
		</div>
	</div>

Banner区CSS