阶段二网页搭建入门之javaScript与前端案例 4-3项目作业

最新推荐文章于 2024-07-06 10:50:45 发布

nainai角兽

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量151

点赞数 1

分类专栏：阶段二 web入门文章标签： html css

本文链接：https://blog.csdn.net/m0_46625594/article/details/108196908

版权

阶段二 web入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

图片素材

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>feifei</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
	<!-- 顶部 -->
	<div class="top">
		<div class="top_top">
			<img src="images/logo.png">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">EVENTS</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</div>

		<!-- banner区 -->
		<div class="top_banner">
			<!-- 遮盖 -->
			<div class="cover"></div>
			<img src="images/banner3.jpg">
			<div class="text_box">
				<ul>
					<!-- placeholder默认文字显示 -->
					<li><input type="text" placeholder="your Name"></li>
					<li><input type="text" placeholder="your Phone"></li>
					<li><input type="text" placeholder="your Email"></li>
					<!-- textarea多行文本框 -->
					<li><textarea placeholder="Write Your Comment Here"></textarea> </li>
					<!-- submit提交按钮，style="cursor: pointer手型鼠标 -->
					<li><input type="submit" value="SEND MESSAGE" style="cursor: pointer"></li>
				</ul>
			</div>
		</div>
	</dir>

	<!-- about上半区 -->
	<div class="about">
		<!-- 上部分 -->
		<div class="about_UpperPart">
			<div class="top_UpperPart">
				<h1>ABOUT</h1>
				<p class="transverse">——</p>
				<p>Lorem Ipsum is simply dumy text of the printing and typesetting<br>industry.Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</p>
			</div>
			<!-- 下部分 -->
			<div class="about_LowerPart">
				<!-- 左 -->
				<div class="left">
					<div class="left_top">
						<p class="p1">A WORD</p>
						<p>ABOUT US</p>
					</div>
					<div class="left_bottom">
						<p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sen ac nisi et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
						<!-- 可点击按钮，手型鼠标 -->
						<input type="button" value="EXPLORE" style="cursor:pointer">
					</div>
				</div>
				<!-- 中 -->
				<div class="center">
					<img src="images/bb3.jpg">				
				</div>
				<!-- 右 -->
				<div class="right">
					<div class="right_top">
						<h2>70000</h2>
						<p style="color:#07cbc9;font-weight:bold">——</p>
						<p style="font-size:13px">Students</p>
					</div>
					<div class="right_bottom">
						<h2>600</h2>
						<p style="color:#07cbc9;font-weight:bold">——</p>
						<p style="font-size:13px">Faculty</p>	
					</div>				
				</div>	
			</div>
		</div>
	</div>


	<!-- about下半区 -->
	<div class="about_about">
		<ul>
			<li><img src="images/b1.jpg"></li>
			<li>
				<div>
					<p class="p1">Library</p>
					<p class="p2">Lorem Ipsum is simply dummy text of the Printing and typesetting industry</p>
					<p class="p3">Lorem 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 specmen book</p>
					<a href="#"><input type="button" value="EXPLORE" style="cursor: pointer"></a>
				</div>
			</li>
			<li><img src="images/b2.jpg"></li>
			<li>
				<div>
					<p class="p1">Library</p>
					<p class="p2">Lorem Ipsum is simply dummy text of the Printing and typesetting industry</p>
					<p class="p3">Lorem 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 specmen book</p>
					<a href="#"><input type="button" value="EXPLORE" style="cursor: pointer"></a>
				</div>
			</li>
			<li>
				<div>
					<p class="p1">Library</p>
					<p class="p2">Lorem Ipsum is simply dummy text of the Printing and typesetting industry</p>
					<p class="p3">Lorem 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 specmen book</p>
					<a href="#"><input type="button" value="EXPLORE" style="cursor: pointer"></a>
				</div>
			</li>
			<li><img src="images/b3.jpg"></li>
			<li>
				<div>
					<p class="p1">Library</p>
					<p class="p2">Lorem Ipsum is simply dummy text of the Printing and typesetting industry</p>
					<p class="p3">Lorem 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 specmen book</p>
					<a href="#"><input type="button" value="EXPLORE" style="cursor: pointer"></a>
				</div>
			</li>
			<li><img src="images/b4.jpg"></li>
		</ul>
	</div>

	<!-- GALLERY区 -->
	<div class="GALLERY">
		<!-- 上部分 -->
		<div class="GALLERY_top">
			<h1>GALLERY</h1>
			<p class="p1">——</p>
			<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s.</p>
		</div>
		<!-- 下部分 -->
		<dir class="GALLERY_bottom">
			<ul>
				<li><img src="images/03-01.jpg"><P>SCIENCE LAB</P></li>
				<li><img src="images/03-02.jpg"><P>INDOOR STADIUM</P></li>
				<li><img src="images/03-03.jpg"><P>TRANSPORTATION</P></li>
				<li><img src="images/03-04.jpg"><P>KIDS ROOM</P></li>
				<li><img src="images/03-05.jpg"><P>MEDITATION CLASSES</P></li>
				<li><img src="images/03-06.jpg"><P>KIDS PLAY GROUND</P></li>
			</ul>
		</dir>
	</div>

	<!-- 页脚 -->
	<div class="bottom">
		<p>© 2016 imooc.com 京ICP备13046642号</p>		
	</div>
</body>
</html>

css

/*内外边距为0px,字体为Microsoft YaHei UI*/
*{
	margin:0px;
	padding:0px;
	font-family:"Microsoft YaHei UI";
}

/*无下划线*/
a{
	text-decoration:none;
}

/*无列表项目外观*/
li{
	list-style-type:none;
}

/*图和字*/
/*宽100%，背景色#07cbc9，置顶最顶层100，定位固定定位*/
.top_top{
	width:100%;
	background-color:#07cbc9;
	z-index:100;
	position:fixed;
}

/*边距上8px右0px下0px左80px*/
.top_top img{
	margin:8px 0px 0px 80px;
}

/*右浮动，右边距80px*/
.top_top ul{
	float:right;
	margin-right:80px;
}

/*右浮动*/
.top_top ul li{
	float:left;
}

/*字体白色，块状显示，右边距20px，行高70px*/
.top_top ul li a{
	color:white;
	display:block;
	margin-right:20px;
	line-height:70px;
}

/*鼠标在a标浮动时，背景为黑色*/
.top_top ul li a:hover{
	background-color:black;
}

/*---------banner区---------*/

/*宽100%，高530px，相对定位*/
.top .top_banner{
	width:100%;
	height:530px;
	position:relative;
}

/*上边距65px，宽100%，高450px*/
.top .top_banner img{
	margin-top:65px;
    width: 100%;
    height:450px;
}

/*遮盖*/
/*宽100%，高515px，绝对定位，黑色背景，透明0.4*/
.top .top_banner .cover{
	width:100%;
	height:515px;
	position:absolute;
	background-color:black;
	opacity:0.4;
}

/*文本框*/
/*相对定位，水平居中，上-370*/
.top .top_banner .text_box{
	position:relative;
	text-align:center;
	top:-370px;
}

/*文本框上边距15px*/
.top .top_banner .text_box ul li{
	margin-top:15px;
}

/*透明背景，边框实线颜色#808080，宽25%，高30px，首行缩进10px*/
.top .top_banner .text_box ul li input[type="text"]{
	background-color:transparent;
	border:1.5px solid #808080;
	width:25%;
	height:30px;
	text-indent:10px;
}

/*透明背景，边框实线颜色#808080，宽25%，高80px，首行缩进10px*/
.top .top_banner .text_box ul li textarea{
	background-color:transparent;
	border:1.5px solid #808080;
	width:25%;
	height:80px;
	text-indent:10px;
}

/*透明背景，边框实线颜色#808080，字体颜色#808080，内边距*/
.top .top_banner .text_box ul li input[type="submit"]{
	background-color:transparent;
	border:1.5px solid #808080;
	color:#808080;
	padding:7px 5px 7px 5px;
}

/*鼠标在文本框浮动时，边框实线颜色#07cbc9*/
.top .top_banner .text_box ul li input[type="text"]:hover{
	border:1.5px solid #07cbc9;
}

/*鼠标在多行文本框浮动时，边框实线颜色#07cbc9*/
.top .top_banner .text_box ul li textarea:hover{
	border:1.5px solid #07cbc9;
}

/*鼠标在提交按钮浮动时，按钮背景色#07cbc9，无边框*/
.top .top_banner .text_box ul li input[type="submit"]:hover{
	background-color:#07cbc9;
	border:none;
}

/*---------about上半区---------*/
.about{
	width:100%;
	height:480px;
	position:relative;
}

/*上部分*/
.top_UpperPart{
	text-align:center;
	margin:30px auto;
	width:50%;
	height:115px;
}

.top_UpperPart .transverse{
	color:#07cbc9;
	font-weight:bold;
}

.top_UpperPart p{
	color:#808080;
	line-height:20px;
	font-size:12px;
}

/*下部分*/
.about_LowerPart{
	position:relative;
	top:-30px;
	height:350px;
}

/*左-宽高，相对定位，高，左，边距，置顶*/
.about_LowerPart .left{
	width:310px;
	height:230px;
	position:relative;
	top:25px;
	left:-230px;
	margin:0 auto;
	z-index:90;
}

/*左*/
.about_LowerPart .left .left_top{
	font-size:20px;
	margin:0px 0px 5px 10px;
}

/*左-首行缩进10px*/
.about_LowerPart .left .left_top .p1{
	text-indent:10px;
}

/*左-边框，透明背景，边距，字号，行高*/
.about_LowerPart .left .left_bottom{
	border:1px solid #808080;
	background-color: rgba(255,255,255,0.4);
	padding:15px;
	font-size:14px;
	line-height:20px;
	height:155px;
}

/*左-外边距，内边距，颜色，背景，无边框*/
.about_LowerPart .left input{
	margin:12px auto;
	padding:8px 13px 8px 13px;
	color:white;
	background-color:black;
	border:none;
}

/*鼠标在可点击按钮浮动时，实现如下效果*/
.about_LowerPart .left input:hover{
	background-color:white;
	color:black;
	border:1px solid black;
}

/*中*/
.about_LowerPart .center{
	top:-205px;
	position:relative;
	left:75px;
	margin:0px auto;
	width:600px;
}

/*中*/
.about_LowerPart .center img{
	height:280px;
	width:430px;
}

/*右*/
.about_LowerPart .right{
	text-align:center;
	top:-489px;
	left:280px;
	position:relative;
	margin:0px auto;
	width:90px;
}

/*右*/
.about_LowerPart .right div{
	border:1px solid #07cbc9;
	margin-bottom:20px;
	width:170px;
	height:85px;
	padding-top:15px;
}

/*---------about下半区---------*/
.about_about{
	height:530px;
}

/*浮动，溢出部分隐藏*/
.about_about ul li{
	width:25%;
	height:260px;
	float:left;
	overflow:hidden;
	background-color:#07cbc9;
}

/*图*/
.about_about ul li img{
	width:100%;
	height:100%;
}

/*字*/
.about_about ul li div{
	padding:25px;
	height:260px;
	color:white;
}

.about_about ul li div .p1{
	font-size:20px;
	margin-bottom:8px;
}

.about_about ul li div .p2{
	font-size:13px;
	line-height:22px;
	margin-bottom:8px;
}

.about_about ul li div .p3{
	font-size:10px;
	color:#808080;
	line-height:15px;
	margin-bottom:8px;
}

.about_about ul li div a{
	display: block;
    text-align: center;
    margin-top: 30px;
}

/*边框样式无边框*/
.about_about ul li div input{
	background-color:black;
	color:white;
	font-size:9px;
	border-style: none;
	padding:9px 12px 9px 12px;
}

/*鼠标在可点击按钮浮动时，实现如下效果*/
.about_about ul li div input:hover{
	background-color: rgba(255,255,255,0);
    border: 1px solid black;
}

/*---------GALLERY区---------*/
/*上部分*/
.GALLERY .GALLERY_top{
	height:100%;
	width:300px;
	margin:30px auto;
	text-align:center;/*文字水平居中*/
}

.GALLERY .GALLERY_top .p1{
	color:#07cbc9;
	font-weight:bold
}

.GALLERY .GALLERY_top .p2{
	font-size:9px;
	color:#808080;
	line-height:18px;
}

/*下部分*/
.GALLERY .GALLERY_bottom{
	position:relative;
	width:800px;
	height:440px;
	margin:0px auto;
	overflow: hidden;/*溢出部分隐藏*/
	margin-bottom:60px;
}

.GALLERY .GALLERY_bottom ul li{
	float:left;
	position:relative;
	margin:0px 20px 20px 0px;
}

.GALLERY .GALLERY_bottom ul li img{
	width:245px;
	position:relative;
	left:13px;

}

.GALLERY .GALLERY_bottom ul li p{
	color:white;
	background-color:black;
	font-size:12px;
	width:245px;
	height:50px;
	margin-top:-4px;
	position:relative;
	left:13px;
	padding:15px 0px 0px 10px;
	box-sizing:border-box;
}

/*---------页脚---------*/
.bottom{
	color:white;
	background-color:#07cbc9;
	height:60px;
	text-align:center;
	line-height:60px;
}