本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
一、焦点图
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D156_PictureOfFocus</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 639px;
height: 338px;
boder:2px black solid;
margin:0 auto;
margin-top: 100px;
position:relative;
left:0px;
top:0px;
}
span{
width: 40px;
height: 80px;/*行内标签设置大小是没有用的，必须先转换为行内块级标签*/
display:inline-block;
background-color: rgba(0,0,0,0.3);/*复习了rgba的最后一个参数是透明度*/
font-size:50px;/*设置大于号小于号的颜色和大小*/
color:white;
}
ol{
list-style: none;/*去掉有序标签的默认样式*/
width: 20px;
height: 20px;
background-color: rgba(0,0,0,0.3);
float:right;
/*position:absolute;*/
}
ol li{
width: 40px;
height: 40px;
border:2px solid gold;
box-sizing: border-box;/*防止里面的内容变化而导致外面的盒子大小样式被破坏*/
text-align: center;
display: inline-block;
/*float:right;*/
}
div .leftArrow{
position:absolute;
left:0px;
top:128px;
}
div .rightArrow{
position:absolute;
left:600px;
top:128px;
}
</style>
</head>
<body>
<div>
<img src="image/taobaoFocusPicture.jpg" alt="">
<span class="leftArrow"><</span><!--这里复习了大于号小于号的表示方法-->
<span class="rightArrow">></span>
<ol><!--复习了有序标签ol，无序标签是ul-->
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ol>
</div>
</body>
</html>
二、固定定位 注意点： 1.固定定位的元素是脱离标准流的，不会占用标准流中的空间 2.固定定位和绝对定位一样不会区分行内/块级/行内块级。
[HTML] 纯文本查看 复制代码 .duibi{
width: 600px;
height: 2000px;
border:2px solid #000;
background-image: url("image/play_tennis.jpg") ;
background-repeat: no-repeat;/*背景图片不会重复*/
background-attachment: fixed;/*这个属性复习了，背景图片设置为fixed后，就不会随着页面上下滚动而滚动了，这张图片会固定位置*/
}
.................省略代码...................
<div class="duibi"></div>
[HTML] 纯文本查看 复制代码 .box4{
width: 100px;
height: 100px;
background-color: purple;
position:fixed;/*脱离了标准流了，所以在标准流中就好像没有他一样*/
}
.box3{
border:2px black solid;
width: 200px;
height: 1000px;
}
...........省略代码................
<div class="box3">
<div class="box4"></div>
</div>
三、源码： D156_PictureOfFocus.html D157_FixedPosition.html
| 
发表于 2020-3-28 22:00:02
