1 新浪广告栏
1.1 布局
要求:广告图片固定在浏览器可视窗口的两侧,不会随窗口一起滚动,并且要贴着版心的边缘。
上图为盒子的思路,这一练习的难点是如何使广告栏贴着版心边缘,只需将left设置50%,再设置
margin-left为负的(版心的一半 + 盒子自己的宽度 + 1px的缝隙)
1.2 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.w {
width: 1002px;
height: 10000px;
margin: 0 auto;
/* background-color: #aaa; */
}
.box1{
position: fixed;
left: 50%;
top: 155px;
margin-left: -616px;
width: 111px;
height: 274px;
}
.box1 .pic{
width: 111px;
height: 257px;
}
.box1 img{
width: 100%;
height: 100%;
}
.box1 .close{
width: 40px;
height: 17px;
/* background-color: red; */
margin-left:71px ;
background: url(images/1571581438470_09.png);
}
</style>
</head>
<body>
<div class="w"></div>
<div class="box1">
<div class="pic">
<img src="images/1571581438470_03.png" alt="">
</div>
<div class="close"></div>
</div>
</body>
</html>
2 图片放大
2.1 布局
需求:定位实现鼠标滑过图片等比例放大,显示在原尺寸图片的上方。
起始状态:
实现状态:
实现方式:当前div被覆盖时,让当前里面的img图片宽、高变大
2.2 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
img {
width: 100px;
height: 75px;
}
.box {
position: relative;
width: 600px;
height: 300px;
margin: 100px auto;
}
.box div {
float: left;
width: 106px;
height: 81px;
text-align: center;
}
.box div:hover img{
position: absolute;
width: 200px;
height:150px;
margin-top: -25px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div><img src="images/photo01.png"></div>
<div><img src="images/photo02.png"></div>
<div><img src="images/photo03.png"></div>
<div><img src="images/photo04.png"></div>
<div><img src="images/photo05.png"></div>
<div><img src="images/photo06.png"></div>
<div><img src="images/photo07.png"></div>
<div><img src="images/photo08.png"></div>
<div><img src="images/photo09.png"></div>
<div><img src="images/photo10.png"></div>
<div><img src="images/photo11.png"></div>
<div><img src="images/photo12.png"></div>
<div><img src="images/photo13.png"></div>
<div><img src="images/photo14.png"></div>
<div><img src="images/photo15.png"></div>
<div><img src="images/photo16.png"></div>
<div><img src="images/photo17.png"></div>
<div><img src="images/photo18.png"></div>
<div><img src="images/photo19.png"></div>
<div><img src="images/photo20.png"></div>
</div>
</body>
</html>
3 简答题
从定位的参照物以及是否占位置,总结一下,相对定位,绝对定位和固定定位的区别?
1) relative 相对定位的元素在移动位置的时候,是相对于它自己原来的位置来说的,原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它,因此,相对定位并没有脱标
2) absolute 绝对定位的元素在移动位置的时候,是相对于带有定位的父级来移动的,如果父亲没有定位,则参考于浏览器来移动位置。绝对定位的元素,完全脱标,完全不占位置。
3) fixed 固定定位的元素在移动位置的时候,以浏览器的可视窗口为参照点移动元素,不随滚动条滚动,固定定位不在占有原先的位置,固定定位也是脱标的。