码迷,mamicode.com
首页 > Web开发 > 详细

html学习3-CSS补充

时间:2020-02-26 14:17:40      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:分层   默认   func   type   hit   set   har   背景颜色   ext   

position

fixed:把标签固定在页面的某处

例子:使用fixed制作“回到顶部”按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div onclick="GoTop();" style="width:50px;height:50px;background-color:black;color:white;
    position:fixed;bottom:20px;right:20px">
        返回顶部
    </div>
    <div style="height:5000px;background-color:#dddddd">
        ddfdfdadfdf
    </div>
    <script>
        function GoTop(){
            document.documentElement.scrollTop = 0;
            console.log(document.documentElement.scrollTop)
        }
    </script>
</body>
</html>

例子2:固定页面头部

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

absolute:把标签固定在页面的某处,位置是绝对固定的

relative:通常和absolute一起用

<div style=‘position:relative;‘>
<div style=‘position:absolut;top:0,right:0;‘></div>
<div/>

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="width:50px;height:50px;
    background-color:black;
    position:absolute;
    right:0;
    bottom:0;">

    </div>
    <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
        <div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div>
    </div>
    <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
        <div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:blue;"></div>
    </div>
    <div style="margin:0 auto;position:relative;width:500px;height:200px;border:1px solid red;">
        <div style="position:absolute;right:0;top:0;width:50px;height:50px;background-color:blue;"></div>
    </div>

    <div style="height:5000px;background-color:#dddddd;">
        ddfdfdadfdf
    </div>
</body>
</html>

页面分层显示:

z-index

opacity  透明 值:0-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="display:none;z-index:10;
    position:fixed;background-color:white;
    height:100px;
    width:500px;
    top:50%;
    left:50%;
    margin-left:-250px;margin-top:-200px;

    ">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

    <div style="display:none;z-index:9;position:fixed;background-color:#dddddd;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:0.5;
    "></div>

    <div style="height:5000px;background-color:green;">
        ddfdfdadfdf
    </div>
</body>
</html>

 

overflow

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="height:200px;width:300px;overflow:hidden;">
        <img src="IMG_1980.JPG">
    </div>
    <p></p>
    <div style="height:200px;width:300px;overflow:auto;">
        <img src="IMG_1980.JPG">
    </div>
</body>
</html>

 

hover

鼠标移动到标签时,属性才生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pg-header{
            position:fixed;
            right:0;
            left:0;
            top:0;
            height:48px;
            background-color:#2459a2;
            line-height:48px;
            }

        .pg-body{
            margin-top:50px;
            }

        .w{
            width:980px;
            margin:0 auto;
            }

        .pg-header .menu{
            display:inline-block;
            padding:0 10px 0 10px;
            color:white;
            }

        .pg-header .menu:hover{
            background-color:blue;
            }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">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">g</div>
    </div>
</body>
</html>

 

background-color  背景颜色

background-image:url(‘xxx.gif‘)#默认。div大,图片重复放  

background-repeat:no-repeat/repeat-x/repeat-y 图片重复加载

background-position:10px 10px/position-x/position-y 移动背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span style="background-image:url(‘微笑.gif‘);height:20px;width:20px;display:inline-block;"></span>
    <div style="height:35px;width:400px;position:relative;">
        <input type="text" style="height:35px;width:370px;padding-right:30px" />
        <span style="position:absolute;right:0;top:10px;background-image:url(‘微笑.gif‘);height:25px;width:25px;display:inline-block;"></span>

    </div>

    <div style="width:200px;height:200px;border:1px solid red;
     background-image:url(‘土拨鼠.gif‘);
     background-repeat:no-repeat;
     background-position-x:10px;
     background-position-y:10px"></div>
</body>
</html>

 

 

结束

html学习3-CSS补充

标签:分层   默认   func   type   hit   set   har   背景颜色   ext   

原文地址:https://www.cnblogs.com/goldtree358/p/12366679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!