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>index.html</title>
<style>
.text1{
border: 1px solid gray;
border-radius:10px ;
width: 330px;
height: 410px;
margin: 0 auto;
position: relative;
}
img{
margin: 10px;
margin-right: 40px;
margin-left: 0px;
}
img,p{
vertical-align: middle;
}
ul li{
list-style-type: none;
float: left;
}
</style>
</head>
<body>
<div class="text1">
<ul>
<li style="font-size: 20px;font-weight: bold;margin-top: 10px;margin-left: 15px;">SHOP 今日推荐</li>
<li style="float: right;"><img src="img/more.gif"/></li>
<li><img src="img/img9.gif"/>
<p style="float: right;"><a href="#">汉来国际美食百货</a><br />
口味:创意中餐<br />
区域:朝阳/CBD
</p>
</li>
<li><img src="img/img7.gif"/>
<p style="float: right;"><a href="#">汉来国际美食百货</a><br />
口味:创意中餐<br />
区域:朝阳/CBD
</p>
</li>
<li><img src="img/img8.gif"/>
<p style="float: right;"><a href="#">汉来国际美食百货</a><br />
口味:创意中餐<br />
区域:朝阳/CBD
</p>
</li>
<li><img src="img/img7.gif"/>
<p style="float: right;"><a href="#">汉来国际美食百货</a><br />
口味:创意中餐<br />
区域:朝阳/CBD
</p>
</li>
<li style="position: absolute;top: 40px;left: 100px;"><img src="img/shen.png"/></li>
</ul>
</div>
</body>
</html>
4.制作京东轮播图页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京东轮播图</title>
<style>
.text1{
width: 600px;
margin: 0px auto;
position: relative;
}
ul li{
list-style-type: none;
}
li a{
text-decoration: none;
color: white;
}
.text2{
color:white;
font-weight:bold;
margin-right: 10px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
line-height: 20px;
text-align: center;
float: left;
}
ul li:nth-of-type(1){
position: absolute;
left:300px ;
bottom: 15px;
}
ul li:nth-of-type(2){
position: absolute;
left:330px ;
bottom: 15px;
}
ul li:nth-of-type(3){
position: absolute;
left:360px ;
bottom: 15px;
}
ul li:nth-of-type(4){
position: absolute;
left:390px ;
bottom: 15px;
}
ul li:nth-of-type(5){
position: absolute;
left:420px ;
bottom: 15px;
}
</style>
</head>
<body>
<div class="text1">
<a href="#"><img src="img/focus.jpg"/></a>
<ul>
<li class="text2"><a href="#">1</a></li>
<li class="text2"><a href="#" >2</a></li>
<li class="text2"><a href="#">3</a></li>
<li class="text2"><a href="#">4</a></li>
<li class="text2"><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
5.制作新东方顶部导航菜单页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新东方顶部导航菜单</title>
<style>
.text1{
background-image: url(img/top_bg.gif);
width: 850px;
height: 27px;
z-index: 0;
}
a{
text-decoration: none;
}
a:hover{
color: blue;
}
img,a{
vertical-align: middle;
}
ul li{
list-style-type: none;
display:inline;
margin: 10px ;
}
li img{
margin-left: 0px;
margin-right: 40px;
}
.text2{
border: 1px solid darkgray;
width: 300px;
height: 200px;
margin: 0 auto;
position: relative;
left: 200px;
bottom: 15px;
z-index: 5;
}
.text3 {
border-bottom: 1px solid darkgray;
margin-top: 25px;
margin-bottom: 10px;
margin-right: 7px;
}
</style>
</head>
<body>
<div>
<div class="text1">
<ul>
<li><img src="img/logo.gif"/></li>
<li><a href="">购物车</a></li>
<li style="color: darkgray">|</li>
<li><a href="">优惠券</a></li>
<li style="color: darkgray;">|</li>
<li><a href="">快速注卡</a></li>
<li style="color: darkgray;">|</li>
<li><a href="">各地购课</a></li>
<li style="color: darkgray;">|</li>
<li><a href="">手机报</a></li>
<li style="color: darkgray;">|</li>
<li><a href="">网站导航</a></li>
<li><img style="position: relative;right: 20px;bottom: 5px;" src="img/open_icon.gif"/></li>
</ul>
<div class="text2">
<div>
<ul class="text3">
<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>
</ul>
<ul class="text3">
<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>
</ul>
<ul >
<li><a href="">M-Zone</a></li>
<li><a href="">手机报</a></li>
<li><a href="">时时英语</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
当当网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>当当图书榜</title>
<style>
.text2{
border: 0px solid;
width:1000px;
height: 800px;
margin: 0px auto;
}
a:hover{
text-decoration: underline;
}
.text1{
margin-top: 40px;
border: 1px solid #c8ece3;
background-color: #eafffa;
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;
padding-top:10px;
display: inline-block;
float: right;
font-family: verdana "宋体";
font-size: 12px;
color: gray;
}
.text3{
border: 2px solid lightgreen;
width: 1000px;
height: 400px;
position: relative;
}
nav{
background: url(img/menuBg.jpg);
margin-top: -10px;
margin-bottom: 10px;
line-height: 35px;
height: 39px;
color: white;
}
nav li {
padding: 0 10px 0 10px;
display: inline-block;
}
ul li{
list-style-type: none;
}
</style>
</head>
<body>
<div class="text2">
<header>
<ul>
<li class="text1"style="border-style: solid solid none none; "><a>都看阅器</a></li>
<li class="text1" style="border-style: solid none none none; "><a>数字馆</a></li>
<li class="text1"style="border-style: solid none none none; "> <a>当当优品</a></li>
<li class="text1"style="border-style: solid none none solid; "><a>尾品汇</a> </li>
</ul>
<img src="img/icon_count.png" style="position:relative; top: 32px; right: -775px;"/>
</header>
<img src="img/logo.jpg"/>
<nav>
<ul>
<li><a>首页</a></li>
<li><a>图书</a></li>
<li><a>音像 </a></li>
<li><a>童装</a></li>
<li><a>服装 </a></li>
<li><a>鞋靴 </a></li>
<li><a>运动</a></li>
<li><a>箱包</a></li>
<li><a>美妆</a></li>
<li><a>珠宝</a></li>
<li><a>家居</a></li>
<li><a>食品</a></li>
<li><a>酒</a></li>
<li><a>手机</a></li>
<li><a>数码 </a></li>
<li><a>电脑</a></li>
<li><a>家电</a></li>
</ul>
</nav>
<article>
<img src="img/banner.png" width="1000px"style="margin-bottom: 15px;">
<div class="text3">
<div>
<p>
<img src="img/bg_bang.gif"style="position: relative;right: 15px;" /></p>
<img src="img/book-01.jpg"style="float: left;margin-top: 30px;" />
<img src="img/bookNo1.gif" style="position: relative;right: 240px;top: 25px;"/>
<p style="line-height: 25px;font-size: 14px;margin-top: 0px;">
<a style="color: lightblue;">偷影子的人</a><br />
作 者:[法] 马克·李维(Marc Levy)著,段韵灵 译<br />
出版社:湖南文艺出版社<br />
当当价:<span style="color: darkred;">¥ 17.90</span><br />
不知道姓氏的克蕾儿。这就是你在我生命里的角色,<br />
我童年时的小女孩,今日蜕变成了女人,一段青梅竹<br />
马的回忆,一个时间之神没有应允的愿望。 一个老是<br />
受班上同学欺负的瘦弱小男孩,因为拥有一种特殊能<br />
力而强大:他能“偷别人的影子”,因而能看见他<br />
</p>
</div>
<div style="float: right;position: relative;bottom: 300px;">
<img style="margin-top: 10px;" src="img/book-02.jpg" />
<img style="position: relative;right: 100px;bottom: 80px;" src="img/bookNo2.gif" />
<p style="line-height: 25px;font-size: 14px;display: inline-block;margin-right: 10px;">
<a style="color: lightblue;">看见(央视知名记者、主持人柴静:十年<br/>个人
成长的告白,中国社会变迁的备忘 </a><br />
作 者:柴静 著<br />
出版社:广西师范大学出版社<br />
<span style="color: darkred;">¥ 29.40
<span style="font-size: 12px;">7.4折</span> </span><br />
</p>
</div>
<div style="float: right;position: relative;left: 275px;bottom: 140px;">
<img src="img/book-03.jpg" />
<img style="position: relative;right: 105px;bottom: 75px;" src="img/bookNo3.gif" />
<p style="line-height: 25px;font-size: 14px;display: inline-block;">
<a style="color: lightblue;">改变孩子先改变自己 </a><br />
作 者:贾容韬 贾毅 著<br />
出版社:作家出版社<br />
<span style="color: darkred;">¥ 22.20
<span style="font-size: 12px;">7.4折</span> </span><br />
</p>
</div>
</div>
</article>
<footer style="position: relative;right: 120px;bottom: 120px;">
<span style="float: right;font-family: verdana;font-size: 14px;color: grey;">Copyright (C) 当当网 2004-2017, All Rights Reserved
<img style="vertical-align: middle;" src="img/validate.gif"/>
041189号出版物经营许可证 新出发京批字第直0673号</span>
</footer>
</div>
</body>
</html>