首页 > > 网页制作 > css >

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

2020-01-07 08:30:43来源：博客园阅读 ()

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

一、焦点图

 

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

二、固定定位

注意点：

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>

?