28-34

时间  2020-02-02
原文   原文链接

position

  • fixed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;

        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div id="i1">返回顶部</div>
    <div id="i2"></div>

</body>
</html>

enter description here

上图：返回顶部和灰色背景部分属于在同一层面。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            position: fixed; 
            top: 0;
            right: 0;
        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div id="i1">返回顶部</div>
    <div id="i2"></div>

</body>
</html>

代码：
position: fixed; 让返回顶部这个内容悬浮在第2层面，悬浮在灰色背景的上面；
top: 0; right: 0; 让悬浮的内容出于顶部和右侧0的位置。浏览器

enter description here

上图：返回顶部这个内容悬浮在了灰色背景的上面。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            position: fixed;
            bottom: 20px;  <!--悬浮在页面下方20px的位置-->
            right: 20px;   <!--悬浮在右侧20px的位置-->

        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div onclick="GoTop();" id="i1">返回顶部</div>   <!--点击后调用GoTop()-->
    <div id="i2"></div>
    <script>
        function GoTop(){
            document.documentElement.scrollTop= 0;   /*能够返回页面顶部*/
        }
    </script>

</body>
</html>

enter description here

enter description here

上2图：先将滚动条向下滚动，点击返回顶部后就直接回跳转到页面顶部。url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: white;
            position: fixed;
            top:0;
            left: 0;   <!--左侧为0-->
            right: 0;  <!--右侧为0-->
        }
        .pg-body{
            margin-top: 60px;
            background-color: #dddddd;
            height: 5000px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

代码：
同时设置left: 0;和right: 0; 可让占用宽度的100%，且调整上下的滚动条时会一直冻结在固定的位置，与excel冻结首行效果同样，再去滚动的时候，依然能看到冻结的内容。
pg-body要调整margin-top: 60px;，否则会被pg-header覆盖设计

enter description here

enter description here

上图：能够看到即便滚动后，头部内容依然悬浮在最上面，不会随着滚动而隐藏。excel

  • relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
        }
        #i1-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            left: 0;
            bottom: 0;
            position: absolute;
        }
        #i2-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            right: 0;
            bottom: 0;
            position: absolute;
        }
        #i3-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            left: -60px;
            top: 0;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="c1" id="i1">
        <div id="i1-1">111</div>
    </div>
    <div class="c1" id="i2">
        <div id="i2-1">222</div>
    </div>

    <div class="c1" id="i3">
        <div id="i3-1">333</div>
    </div>
</body>
</html>

代码：
absolute能够根据父集标签的大小，来定位，但前提是父集标签的position=relative；
位置设置为负数，就会定位在父集标签的 外边。code

enter description here

上图：正数定位在父集标签的里边； 负数定位到了父集标签的外边。htm

  • position 多层
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
</body>
</html>

代码：
上下左右都设置为0，就会覆盖整个网页；position: fixed; 会将蓝色悬浮在整个页面的上面。
opacity: 0.7;是透明的程度； 若是值是1，就不透明。图片

enter description here

上图：绿色是第一层； 蓝色悬浮在绿色上面是第二层，因此当前页面是2层的效果。ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50px;
            right: 100px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代码：
设置三层效果；经过z-index来决定谁在上层，值越高，越在上层。

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50px;
            right: 100px;
            z-index: 10;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代码：i3设置margin: 0 auto; 想让其居中，不过没有任何效果，这是由于当前是悬浮的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50%;
            right: 50%;
            z-index: 10;

        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代码：top: 50%; right: 50%;

enter description here

上图：将这个悬浮框悬浮在top 50%和 right 50%的地方；效果也生效了，可是注意是白色这个框的右上角当前出于最中间的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50%;
            right: 50%;
            z-index: 10;
            margin-top: -200px;
            margin-right: -250px;

        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代码：margin-top: -200px; margin-right: -250px; 设置的高度是400，宽度是500，因此这里经过margin-top减去一半，margin-right减去一半，这样就能够居中了。

enter description here

上图：当前是三层且居中的效果。

overflow

  • hidden 隐藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;

        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

代码：咱们设置指定的宽度和高度

enter description here

上图：能够看到图片超出了咱们指定的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

代码：overflow: hidden; 将超出指定高度和宽度的部分隐藏起来。

enter description here

上图：将超出的部分隐藏起来了

  • auto 滚动条
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

enter description here

上图：超出的部分会出现滚动条

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            line-height: 48px;
            background-color: deepskyblue;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            margin: 0 50px;
            color: white;
        }
        .pg-header .menu:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a>LOGO</a>
            <a class="menu">所有</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">abc</div>
    </div>
</body>
</html>

代码：hover是伪类，当鼠标放在指定的标签上时，就会根据你设计的效果变化，咱们这里是设计了背景变成绿色。

enter description here

上图：鼠标悬浮所在的标签，背景色变成绿色了。

background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 500px;
            width: 980px;
            background-image: url("2.png");
        }
        img{

        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

代码：经过 background-image: url("2.png"); 来设置背景图片

enter description here

上图：默认状况，当图片比背景尺寸小时，会进行横向和垂直的平铺。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 500px;
            width: 980px;
            background-image: url("2.png");
            background-repeat: repeat-x;
        }
        img{

        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

代码：
默认状况下平铺效果属于background-repeat: repeat;
background-repeat: repeat-x; 是只进行横着平铺

enter description here

ackground-repeat: repeat-y;

代码：ackground-repeat: repeat-y; 只进行垂直平铺

enter description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 100px;
        }
        #i2{
            height: 100px;
            background-image: url("icon_18_118.png");
            background-repeat: no-repeat;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
</body>
</html>

代码：不重复图片

enter description here

上图：图片没有重复复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 100px;
        }
        #i2{
            height: 20px;
            width: 20px;
            background-image: url("icon_18_118.png") ;
            background-repeat: no-repeat;
            border: 1px solid red;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
</body>
</html>

代码：默认background-position: 0 0; 第一个值是X轴，横向移动； 第二个值是y轴，垂直移动；都是0不会移动图标位置

background-position-y: -28px;

代码：进行图标垂直移动， 正数是向下移动，负数是向上移动。

enter description here

上图：这样能够实现一个位置多个图标变化

enter description here

上图：在浏览器中添加一个background，而后点击箭头能够看到下面有不少选项，也就是说若是只配置background的话，后面每一个位置能够跟相应的参数，第2个位置是background-position-x，第3个位置是background-position-y。 若是咱们配置的属性较多的话，能够经过这种方式在指定的位置配置相应的值便可，这样能够减小配置量。

每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程