第八章

最新推荐文章于 2022-05-16 09:48:59 发布

时刻的慌张

最新推荐文章于 2022-05-16 09:48:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/hcl430422hcl/article/details/84030432

版权

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>
			ul{
				list-style: none;
				
			}
			.a{
				line-height: 40px;
				
				
			}
			.b{
				float: right;
				margin-top: -350px;
				margin-right: 65px;
				line-height: 26px;
				font-size: 12px;
				
				
			
			}
			body{
				width: 350px;
				height: 400px;
				border: 1px lightblue solid;
				
			border-radius:15px ;
			
			}
			.f{
				float: right;
				margin-top: 15px;
				margin-right: 15px;
			}
			a{
				font-size: 14px;
				color: red;
				line-height: 30px;
			}
			.z{
				position: relative;
				top:100px;
				left: 100px;
			}
			div{
				margin-top: -40px;
			}
			h2{
				margin-left: 50px;
			}
			span{
				color: red;
			}										
		</style>
	</head>
	<body>
		<div>
			<img class="z" src="img/shen.png" />
			<h2><span>SHOP</span>今日推荐<img class="f" src="img/more.gif\"/> </h2>
			<ul class="a">
			<li><img src="img/img9.gif" /></li>
			<li><img src="img/img7.gif" /></li>
				<li><img src="img/img8.gif" /></li>
					<li><img src="img/img7.gif" /></li>	
			</ul>
			<ul class="b">
			<b><li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>	</b>
			</b><li><a href="#">汉来国际美食百货</a></li>	
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li></b>
				<b><li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>	</b>
			<b><li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>	</b>
				
			</ul>
		</div>
	</body>
</html>

在这里插入图片描述
4.制作京东轮播图页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
				list-style: none;
				position: relative;
				bottom: 50px;
				left: 270px;
				
			}
			li{
				
				border-radius:50% ;
				width: 20px;
				height: 20px;
				display: inline-block;
				background: black;
				color: white;
				text-align: center;
			}
			li:hover{
				background: orange;
			}
		</style>
	</head>
	<body>
		<img src="focus.jpg" />
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		
</html>

在这里插入图片描述
5.制作新东方顶部导航菜单页面
代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.a {
				background: whitesmoke;
				width: 500px;
				height: 25px;
				margin-top: -10px;
				margin-left: -10px;
			}
			
			span {
				margin-left: 90px;
				font-size: 13px;
			}
			
			div {
				background: white;
				width: 200px;
				height: 170px;
				border: 1px gray solid;
				font-size: 14px;
				color: gray;
				position: relative;
				left: 285px;
				bottom: 20px;
			}
			
			hr {
				width: 190px;
			}
			
			.m {
				vertical-align: middle;
			}
			
			.n {
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<p class="a"><img class="m" src="logo.gif" /> <span>购物车| 优惠券| 快速注卡| 各地购课| 手机报| 网站导航</span>
			<img class="n" src="open_icon.gif" /></p>
		<div <p>托福 雅思 考研 职称英语 初中 日语</p>
			<hr/>
			<p>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</p>
			<hr/>
			<p>M-Zone 手机报 时时英语</p>
		</div>
	</body>

</html>

在这里插入图片描述

4当当图书馆。

<!DOCTYPE html>
<html>

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

	</head>

	<body>
		<div>
			<img src="img/logo.jpg" />
			<ul class="q">
				<li>尾品汇</li>
				<li>当当优品</li>
				<li>数字馆</li>
				<li>都看阅器</li>

			</ul>
			<img class="a" src="img/icon_count.png" />

		</div>
		<div>
			<ul class="w">
				<li>首页</li>
				<li>图书</li>
				<li>音像</li>
				<li>童装</li>
				<li>服装</li>
				<li>鞋靴</li>
				<li>运动</li>
				<li>箱包</li>
				<li>美妆</li>
				<li>珠宝</li>
				<li>家居</li>
				<li>食品</li>
				<li>酒</li>
				<li>手机</li>
				<li>数码</li>
				<li>电脑</li>
				<li>家电</li>

			</ul>
			<img class="s" src="img/banner.png" width="1125px" />

		</div>
		<div class="z">

			<img class="d" src="img/book-01.jpg" />
			<img class="e" src="img/bg_bang.gif" />

		</div>
		<div class="c">
			<a href="#">偷影子的人</a>
			<p>作 者：[法] 马克・李维（Marc Levy）著,段韵灵 译</p>
			<p>出版社：湖南文艺出版社</p>
			<p>当当价：<strong>￥ 17.90</strong></p>
			<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，</p>
			<p>我童年时的小女孩，今日蜕变成了女人，一段青梅竹</p>
			<p>马的回忆，一个时间之神没有应允的愿望。一个老</p>
			<p>是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊</p>
			<p>能力而强大：他能“偷别人的影子”，因而能看见他</p>

		</div>
		<div class="v">
			<img class="f" src="img/book-02.jpg">
		</div>
		<div class="b">
			<a href="#">看见(央视知名记者、主持人柴静：十年 个人成长的告白，中国社会变迁的备忘
			</a>
			<p>作 者：柴静 著</p>
			<p>出版社：广西师范大学出版社</p>
			<p><strong>￥ 29.40</strong> <span>7.4折</span>
		</div>
		<div class="n">
			<img src="img/book-03.jpg">
		</div>
		<div class="m">
			<a href="#">改变孩子先改变自己</a>
			<p>作 者：贾容韬 贾毅 著</p>
			<p>出版社：作家出版社</p>
			<p><strong>￥ 22.20</strong> <span>7.4折</span></p>

		</div>
		<div class="k">
			<img src="img/bookNo1.gif" />
			<img src="img/bookNo2.gif" />
			<img src="img/bookNo3.gif" />

		</div>
		<div id="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="img/validate.gif" alt="版权标志" />
		京ICP证041189号出版物经营许可证 新出发京批字第直0673号
		</div>

	</body>

</html>

css代码：

li{
	list-style: none;
	display: inline-block;
padding: 5px;
	
}
 .q{
	background: #EAFFFA;
	width: 280px;
	height: 25px;
	font-size: 12px;
	position: relative;
	top: -42px;
	right: -800px;
	border: 1px solid lightskyblue;
	

}
div{
	margin-left: 250px;
	
}
div .a{
	position: relative;
	top: -90px;
    right: -840px;
}
.w{
	
	display: inline-block;
	list-style: none;
	background: #FE6915;
	width:1083px;
	height: 30px;
	color: white;
	
	position: relative;
	top: -80px;
}
.w li{
	padding-left: 40px;
	padding-right: 40px;
}
.s{
	margin-top: -80px;
}
.z{
	border: 3px #CCE9AC solid;
	width: 1120px;
	height: 400px;
}
.d{
	position: relative;
	bottom: -100px;
}
.e{
	position: relative;
	top: -200px;
	left: -280px;
}
.c{
	margin-top: -290px;
	margin-left: 510px;
font-size: 14px;
}
.v{
	margin-left: 870px;
	margin-top: -400px;
	
}
.v a{

}
.v img{
	margin-top: 80px;
	
	
}
.b{
	margin-top: -90px;
	margin-left: 980px;

	width: 400px;
	height: 300px;
	font-size: 14px;
}
.n{
	margin-left: 870px;
	margin-top: -170px;
}
.m{
	margin-left: 980px;
	margin-top: -80px;
}
strong{
	color: red;
}
span{
	color:  #CCE9AC;
	
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.k img:nth-of-type(1){
	position: relative;
	top:-320px;
	right: -30px;
}
.k img:nth-of-type(2){
	position: relative;
	top:-330px;
	right: -595px;
}
.k img:nth-of-type(3){
	position: relative;
	top:-200px;
	right: -560px;
}
#footer img{
	vertical-align: middle;
}
#footer{
	margin-top: -30px;
	margin-left: 350px;
}

时刻的慌张

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
第八章

1.position属性有哪些属性值？他们在定位元素时，分别有哪些特点？(1)absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位。(2)fixed 固定定位:相对于浏览器窗口进行定位。(3)relative相对定位:相对于其正常（默认布局）位置进行定位。(4)static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, ri...
复制链接

扫一扫