一、焦点图
<!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.固定定位和绝对定位一样不会区分行内/块级/?行内块级。
.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>
.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
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D156_PictureOfFocus.html
https://github.com/ruigege66/HTML_learning/blob/master/D157_FixedPosition.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
原文地址：https://www.cnblogs.com/ruigege0000/p/12159213.html
时间： 2024-11-09 00:59:31