HTML——页面制作：career builder

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

HBlack1993

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

阅读量748

点赞数

分类专栏： JAVA WEB

本文链接：https://blog.youkuaiyun.com/HBlack1993/article/details/99644817

版权

JAVA WEB 专栏收录该内容

12 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

熟悉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

#banner #bannerImg #bannerImg1{
	width: 100%;
	height: 400px;
	float: left;
	position:absolute;
	z-index: -30;
}

#banner{
	height: 450px;
	padding-top: 50px;
}

#banner #bannerMessage{
	position: absolute;
	width:500px;
	left:50%;
	margin-left: -250px;

}

#banner #bannerMessage input[type="text"]{
    width: 500px;
    height: 30px;
    background: none;
    border: 0.5px solid white;
    color: white;
    margin-top: 30px;
    padding-left: 5px;
    box-sizing: border-box;
}

#banner #bannerMessage #aboutText4{
	width: 500px;
    height: 80px;
    background: none;
    border: 0.5px solid white;
    color: white;
    margin-top: 30px;
    padding-left: 5px;
    box-sizing: border-box;
    padding: 5px;
}

#banner #bannerMessage #aboutButton1{
	width: 180px;
	height: 30px;
    background: none;
    border: 0.5px solid white;
    color: white;
    margin-top:30px;
    margin-left:160px;
  }

#banner #bannerMessage input[type="text"]:hover{
	border-color: #07cbc9;
}

#banner #bannerMessage #aboutText4:hover{
	border-color: #07cbc9;
}

#banner #bannerMessage input[type="text"]:focus{
	border-color: #07cbc9;
}

#banner #bannerMessage #aboutButton1:hover{
	background-color: #07cbc9;
	border-color: #07cbc9;
}

About区HTML

<div name="About" id="About">
		<h1>ABOUT</h1>
		<div name="fenge" id="fenge"></div>
		<div name="intro" id="intro"><p>华中科技大学是国家教育部直属重点综合性大学，由原华中理工大学、同济医科大学、武汉城市建设学院于2000年5月26日合并成立，是国家“211工程”重点建设和“985工程”建设高校之一，是首批“双一流”建设高校。学校校园占地7000余亩，园内树木葱茏，碧草如茵，环境优雅，景色秀丽，绿化覆盖率72%，被誉为“森林式大学”。</p>
		</div>
		<div name="upAbout" id="upAbout">
			<div name="up-left" id="up-left">
				<div id="title">
					A WORD <br>ABOUT US
				</div>
				<div id="content">
					<label>华中科技大学正以创建世界一流大学为目标，秉持“明德厚学，求是创新”的校训，敢于竞争，善于转化，聚精会神，科学发展，全面提升办学水平，努力开创更加辉煌灿烂的明天。<br></label>
					<input type="button" name="aboutButton" value="EXPLORE" id="aboutButton">
				</div>
			</div>
			<div id="up-middle">
				<img src="images/bb3.jpg">
			</div>
			<div id="up-right">
				<ul>
					<li>
						<label class="big">70000</label><br>
						<div class="fengexian"></div>
						<label class="small">Students</label>
					</li>
					<li>
						<label class="big">600</label><br>
						<div class="fengexian"></div>
						<label class="small">Faculty</label>
					</li>
			</div>
		</div>
		<div class="c">
 			<ul>
 				<li><img src="images\b1.jpg"></li>
 				<li>
 					<h3>Library</h3>
 					<div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
 					<div class="p2">Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
 					<div class="p3"><input type="button" name="btn" value="EXPLORE"></div>
 				</li>
 				<li><img src="images\b2.jpg"></li>
 				<li>
 					<h3>Library</h3>
 					<div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
					<div class="p2">Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
 					<div class="p3"><input type="button" name="btn" value="EXPLORE"></div>
				</li>
				<li>
					<h3>Library</h3>
					<div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
					<div class="p2">Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
					<div class="p3"><input type="button" name="" value="EXPLORE"></div>
				</li>
					<li><img src="images\b3.jpg"></li>
					<li>
					<h3>Library</h3>
					<div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
					<div class="p2">Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
					<div class="p3"><input type="button" name="" value="EXPLORE"></div>
				</li>
				<li><img src="images\b4.jpg"></li>
			</ul>
 		</div>
 	</div>

About区CSS

#About{
	height:1400px;
	width: 100%;
}
h1{
	text-align: center;
}

#About #fenge{
	width:50px;
	border-top: 2px solid;
	border-color: #07cbc9;
	margin: 10px auto;
}

#About #intro{
	width: 280px;
	font-size:0.5em;
	margin: 0 auto;
	text-align: center;
	line-height: 15px;
}

#About #upAbout{
	height: 300px;
	width:650px;
	margin: 30px auto;
}

#About #upAbout #up-left{
	float:left;
	position: relative;
	z-index: 30;
}

#About #upAbout #up-left #title{
	width:100px;
	text-align: center;
}

#About #upAbout #up-left #content{
	width:185px;
	font-size:0.5em;
	line-height: 15px;
	margin: 10px;
	height:150px;
	border: 0.5px solid gray;
	padding-top: 20px;
	padding-left:10px;
	padding-right: 10px;
	text-align: justify;
	background-color: white;
	/*opacity: 0.5*/
	background-color: rgba(255, 255, 255, 0.5);
}

#About #upAbout #up-left #content #aboutButton{
	margin-top: 20px;
	padding: 5px;
	color: white;
	background-color: black;
	border: 0.5px solid black;
}

#About #upAbout #up-left #content #aboutButton:hover{
	color:black;
	background-color: white;
}

#About #upAbout #up-middle img{
	float: left;
	position: relative;
	height:250px;
	margin-left: -100px;
	
}

#About #upAbout #up-right{
	position: relative;
	float:right;
}

#About #upAbout #up-right ul li{
	list-style: none;
	border: 1.5px solid #07cbc9;
	padding: 10px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 30px;
	height:50px;
	text-align: center;
	width: 80px;
}

#About #upAbout #up-right ul li .big{
	font-weight:700;
}

#About #upAbout #up-right ul li .fengexian{
	width:30px;
	border-top: 2px solid #07cbc9;
	margin: 5px auto;
}

#About #upAbout #up-right ul li .small{
	font-size:0.6em;
	font-weight:700;
}
#About .c{
    width: 100%;
    overflow: hidden;
    margin-top: 80px;
}
#bout .c img{
    width:100%;
}
#About .c li{
    float: left;
    width: 25%;
    height: 400px;
    background-color: #07cbc9;
    list-style: none;
}
#About .c li h3{
    margin:30px 20px;
    font-size: 30px;
    font-weight: inherit;
    color: white;
}
#About .c li .p1{
    margin:30px 20px;
    font-size: 18px;
    font-weight: inherit;
    color: #fbf7f7;
}
#About .c li .p2{
    margin:30px 20px;
    font-size: 14px;
    font-weight: inherit;
    color: #e0dcdc;
}
#About .c li .p3{
    text-align: center;
}
#About .c li .p3 input{
    background-color: black;
    color: white;
    width: 120px;
    height: 50px;
    margin-top: 28px;
    border:0;
}
#About .c li .p3 input:hover{
    background: none;
    color: black;
    border:1px solid black;
}

Galley/Foot区

<div name="GALLERY" id="GALLERY">
 		<h1>GALLERY</h1>
		<div name="fenge" id="fenge2"></div>
		<div name="intro" id="intro2"><p>华中科技大学是国家教育部直属重点综合性大学，由原华中理工大学、同济医科大学、武汉城市建设学院于2000年5月26日合并成立，是国家“211工程”重点建设和“985工程”建设高校之一，是首批“双一流”建设高校。学校校园占地7000余亩，园内树木葱茏，碧草如茵，环境优雅，景色秀丽，绿化覆盖率72%，被誉为“森林式大学”。</p>
		</div>
		<div id="list2">
			<ul>
				<li>
					<img src="images/03-01.jpg">
					<div class=listtitle>SCIENCELAB</div>
				</li>
				<li>
					<img src="images/03-02.jpg">
					<div class=listtitle>INDOORGYM</div>
				</li>
				<li>
					<img src="images/03-03.jpg">
					<div class=listtitle>TRANS</div>
				</li>
				<li>
					<img src="images/03-04.jpg">
					<div class=listtitle>KIDSROM</div>
				</li>
				<li>
					<img src="images/03-05.jpg">
					<div class=listtitle>CLASSROOM</div>
				</li>
				<li>
					<img src="images/03-06.jpg">
					<div class=listtitle>PLAYGROUND	</div>
				</li>
		</div>
 	</div>
 	<div id="foot">
 		@2016 imooc.com 京ICP备13046642号
 	</div>

Galley/Foot CSS

#GALLERY{
	height: 750px;
	width: 100%;
}

#GALLERY #fenge2{
	width:50px;
	border-top: 2px solid;
	border-color: #07cbc9;
	margin: 10px auto;
}

#GALLERY #intro2{
	width: 280px;
	font-size:0.5em;
	margin: 0 auto;
	text-align: center;
	line-height: 15px;
}

#GALLERY #list2{
	margin: 0 auto;
}

#GALLERY #list2 ul{
	width: 80%;
	margin:20px auto;
	position: relative;
}

#GALLERY #list2 ul li{
	float:left;
	margin: 10px;
	list-style: none;
	width: 30%;
}

#GALLERY #list2 ul li img{
	width: 100%;
}

#GALLERY #list2 .listtitle{
	background-color: black;
	color: white;
	line-height: 2em;
	margin-top: -5px;
	padding-left: 5px;
}

#foot{
	line-height: 3em;
	color:white;
	background-color: #07cbc9;
	text-align: center;

}