HTML连载61-焦点图、固定定位

最新推荐文章于 2023-02-22 01:05:55 发布

睿里睿气

最新推荐文章于 2023-02-22 01:05:55 发布

阅读量340

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/103866970

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、焦点图

<!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">&lt;</span><!--这里复习了大于号小于号的表示方法-->
    <span class="rightArrow">&gt;</span>
    <ol><!--复习了有序标签ol，无序标签是ul-->
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
    </ol>
</div>
</body>
</html>

61.1
二、固定定位
注意点：
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>

61.2

        .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>

61.3

三、源码：
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大数据学习视频礼包
61.4

睿里睿气

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML连载61-焦点图、固定定位

一、焦点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D156_PictureOfFocus</title> <style> *{ margin:0; ...
复制链接

扫一扫