码迷，mamicode.com
首页 > 其他好文 > 详细

28-34

时间：2019-10-25 23:28:49      阅读：75      评论：0      收藏：0      [点我收藏+]

标签：col   margin   meta   white   覆盖   :hover   aci   情况   doc   

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>

技术图片

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

<!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的位置。

技术图片

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

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

技术图片

技术图片

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

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

技术图片

技术图片

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

  • 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；
位置设置为负数，就会定位在父集标签的 外边。

技术图片

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

  • 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，就不透明。

技术图片

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

<!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来决定谁在上层，值越高，越在上层。

技术图片

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

技术图片

上图：将这个悬浮框悬浮在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减去一半，这样就可以居中了。

技术图片

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

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>

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

技术图片

上图：可以看到图片超出了我们指定的宽度和高度

<!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; 将超出指定高度和宽度的部分隐藏起来。

技术图片

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

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

技术图片

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

伪类

<!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是伪类，当鼠标放在指定的标签上时，就会根据你设计的效果变化，我们这里是设计了背景变成绿色。

技术图片

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

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"); 来设置背景图片

技术图片

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

<!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; 是只进行横着平铺

技术图片

ackground-repeat: repeat-y;

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

技术图片

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

代码：不重复图片

技术图片

上图：图片没有重复复制

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

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

技术图片

上图：这样可以实现一个位置多个图标变化

技术图片

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

28-34

标签：col   margin   meta   white   覆盖   :hover   aci   情况   doc   

原文地址：https://blog.51cto.com/daimalaobing/2445604
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！