HTML 第八章作业

课后作业
1.position属性有哪些属性值？他们在定位元素时，分别有哪些特点？
(1)absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位。
(2)fixed 固定定位:相对于浏览器窗口进行定位。
(3)relative相对定位:相对于其正常（默认布局）位置进行定位。
(4)static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
2.z-index属性在网定位中有什么作用？
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。
3.制作美食今日推荐页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>美食今日推荐</title>
		<style type="text/css">
			.nav {
				border: 1px solid #AACBEE;
				border-radius: 5px;
				width: 300px;
				height:360px;
			}
			
			.div1 {
				margin-top: -2px;
				margin-left: -20px;
			}
			
			h2 {
				margin-top: 15px;
				font-family: "微软雅黑", "黑体", "宋体";
				margin-left: 30px;
				font-size: 14px;
			}
			
			h2 span {
				margin-right: 8px;
				color: #D80000;
			}
			
			h2 img {
				vertical-align: middle;
				margin-left: 100px;
			}
			
			ul {
				list-style-type: none;
			}
			
			.login {
				position: relative;
				top: -40px;
				left: -32px;
			}
			
			.div1 ul li {
				margin-bottom: 5px;
			}
			
			nav {
				font-size: 13px;
				position: relative;
				top: -320px;
				left: 115px;
			}
			
			nav  li {
				margin-top: 4px;
				font-size: 12px;
				color: gray;
			}
			
			nav ul a {
				font-weight: 600;
				color: #B80000;
			}
			.li{
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div class="nav">
			<h2><span>SHOP</span>今日推荐 <img src="img/more.gif"/></h2>
			<div class="div1">
				<ul>
					<li><img src="img/img9.gif" /><img src="img/shen.png" class="login" /></li>
					<li><img src="img/img7.gif" /></li>
					<li><img src="img/img8.gif" /></li>
					<li><img src="img/img7.gif" /></li>
				</ul>
			</div>
			<nav>
				<ul>
					<a href="#">汉来国际美食百货</a>
					<li class="li">口味：创意中餐</li>
					<li>区域：朝阳/CBD</li>
				</ul>
				<ul>
					<a href="#">汉来国际美食百货</a>
					<li class="li">口味：创意中餐</li>
					<li>区域：朝阳/CBD</li>
				</ul>
				<ul>
					<a href="#">汉来国际美食百货</a>
					<li class="li">口味：创意中餐</li>
					<li>区域：朝阳/CBD</li>
				</ul>
				<ul>
					<a href="#">汉来国际美食百货</a>
					<li class="li">口味：创意中餐</li>
					<li>区域：朝阳/CBD</li>
				</ul>
			</nav>
		</div>
	</body>

</html>

4.制作京东轮播图页面

HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
	</head>

	<body>
		<div id="nav">
			<div id="photo">
				<img src="img/264c1dc1cac92265.jpg" />
				<img src="img/5acb3b19Nc3efd8d0.jpg" />
				<img src="img/8402ca6a09fe3122.jpg" />
				<img src="img/91db3f8f2e388912.jpg" />
				<img src="img/c335ac0ddc54a481.jpg" />
			</div>
			<div id="num">
				<ul>
					<a href="#">
						<li>1</li>
					</a>
					<a href="#">
						<li>2</li>
					</a>
					<a href="#">
						<li>3</li>
					</a>
					<a href="#">
						<li>4</li>
					</a>
					<a href="#">
						<li>5</li>
					</a>
				</ul>
			</div>
			<div id="div2">
				<a href="#"><label class="label1"><</label></a>
				<a href="#"><label class="label2">></label></a>
			</div>
		</div>
	</body>

</html>

CSS样式:

* {
	margin: 0px auto;
	padding: 0px;
}

#nav {
	width: 590px;
	height: 470px;
	overflow: hidden;
}

#photo {
	width: 2950px;
	animation: switch 25s ease-out infinite;
}

#num {
	position: relative;
	font-size: 14px;
	font-family: "微软雅黑";
	font-weight: 900;
	bottom: 35px;
	right: -5px;
	text-align: center;
}
#num ul{
	color: white;
list-style-type: none;

}
#num li{
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius:50% ;
	margin-right:8px ;
	display: inline-block;
	background: dimgray;
}
#num a{
	text-decoration: none;
	color: white;
}
#num ul  a:hover li{
	background: orangered;
}
#photo img {
	float: left;
	width: 590px;
	height: 470px;
}

@keyframes switch {
	0%,
	15% {
		margin-left: 0px;
	}
	20%,
	35% {
		margin-left: -590px;
	}
	40%,
	55% {
		margin-left: -1180px;
	}
	60%,
	75% {
		margin-left: -1770px;
	}
	80%,
	95% {
		margin-left: -2360px;
	}
	100% {
		margin-left: 0;
	}
}

#div2 {
	font-size: 18px;
	font-family: "微软雅黑";
	position: relative;
	bottom: 255px;
	left: 0px;
}

.label1 {
	padding: 6px;
	margin-right: 533px;
	color: white;
	background: black;
	opacity: 0.4;
}

.label2 {
	padding: 6px;`在这里插入代码片`
	color: white;
	background: black;
	opacity: 0.4;
}

#div2 a {
	color: white;
	text-decoration: none;
}

#div2 a:hover label {
	background: black;
	opacity: 0.8;
}

5.制作新东方顶部导航菜单页面
代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新东方顶部页面</title>
		<style type="text/css">
			* {
				margin: 0px auto;
			}
			
			.div {
				height: 30px;
				border-bottom: 1px dashed gray;
				position: relative;
				background: #EEEEED;
			}
			
			.img {
				margin-left: 10px;
				vertical-align: middle;
				margin-top: -5px;
			}
			
			.nav {
				display: inline;
				line-height: 30px;
				border-right: 1px solid #6F6F6F;
			}
			
			.div-box a {
				text-decoration: none;
				color: #6F6F6F;
				margin: 15px;
			}
			
			.div-box {
				display: inline;
				margin-left: 100px;
			}
			
			.div1 {
				display: inline;
				line-height: 30px;
			}
			
			a img {
				position: relative;
				top: -8px;
				left: 1px;
			}
			
			.post {
				font-size: 14px;
				padding-top: 12px;
				width: 270px;
				position: relative;
				background: white;
				top: -10px;
				left: -230px;
				display: none;
				border: 1px solid #C0C0C0;
				padding-bottom: 15px;
			}
			
			.post ul {
				margin-left: -30px;
				list-style-type: none;
			}
			
			.post ul li {
				margin-right: -5px;
				line-height: 26px;
				display: inline-block;
			}
			
			.post ul li a {
				text-decoration: none;
				color: gray;
			}
			
			.post ul li a:hover {
				color: orangered;
			}
			
			hr {
				background-color: #DBD8D8;
				border: 0;
				height: 1px;
				width: 240px;
				margin-left: 5px;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.div1:hover .post {
				display: block;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="div">
				<img src="img/logo.gif" class="img" />
				<div class="div-box">
					<div class="nav">
						<a href="#">购物车</a>
					</div>
					<div class="nav">
						<a href="#">优惠券</a>
					</div>
					<div class="nav">
						<a href="#">快速注卡</a>
					</div>
					<div class="nav">
						<a href="#">各地购课</a>
					</div>
					<div class="nav">
						<a href="#">手机报</a>
					</div>
					<div class="div1">
						<a href="#">网站导航 <img src="img/open_icon.gif" /></a>

						<div class="post">
							<ul>
								<li>
									<a href="#">托福</a>
								</li>
								<li>
									<a href="#">雅思</a>
								</li>
								<li>
									<a href="#">考研</a>
								</li>
								<li>
									<a href="#">职称英语</a>
								</li>
								<li>
									<a href="#">初中</a>
								</li>
								<li>
									<a href="#">日语</a>
								</li>
								<hr />
							</ul>
							<ul>
								<li>
									<a href="#">网络课堂</a>
								</li>
								<li>
									<a href="#">资讯中心</a>
								</li>
								<li>
									<a href="#">知识堂</a>
								</li>
								<li>
									<a href="#">大师讲坛</a>
								</li>
								<li>
									<a href="#">学习论坛</a>
								</li>
								<li>
									<a href="#">学词</a>
								</li>
								<li>
									<a href="#">考研搜校</a>
								</li>
								<hr />
							</ul>
							<ul>
								<li>
									<a href="#">M-Zone</a>
								</li>
								<li>
									<a href="#">手机报</a>
								</li>
								<li>
									<a href="#">时时英语</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</header>

	</body>

</html>

HTML 第八章 作业

猜你喜欢