首页 > 代码库 > python:HTML + CSS 优先级 返回顶部

python:HTML + CSS 优先级 返回顶部

2024-08-21 15:31:16   239人阅读

优先级

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a1 {
            background-color: aqua;
            height: 58px;
        }
        .a2 {
            font-size: 30px;
            background-color: indianred;
        }
    </style>
</head>
<body>
<div class="a1 a2">明天你好</div>
<!--就近原则-->
</body>
</html>
优先级

 

输入框加图片

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>

    <div style="float:left; height:52px; width:600px; border: 1px solid red; position: relative" >
         <div style="float:left; line-height: 35px" >
     <label>用户名：</label>
    </div>
         <input type="text" style="height: 27px;
    width: 128px;
    padding-right: 40px;
    margin-top: 4px;"/>
 <span  style="background-image: url(i_name.jpg);
 position: absolute;
background-repeat: no-repeat;
    width: 379px;
    right: 10px;
    height: 23px;
    display: inline-block;
    margin-top: 8px;
    o"><!--可以设置高度宽度-->
 </span>
    </div>
</div>

<!--<div style="height:52px; width:600px; border: 1px solid red; position: relative">-->
<!--&lt;!&ndash;<input type="text" style="height: 48px; width: 20px" />&ndash;&gt;-->
   <!---->
    <!--<input type="text" style="height: 27px;-->
    <!--width: 128px;-->
    <!--padding-right: 40px;-->
    <!--margin-top: 4px;"/>-->
 <!--<span  style="background-image: url(i_name.jpg);-->
 <!--position: absolute;-->
<!--background-repeat: no-repeat;-->
    <!--width: 453px;-->
    <!--right: 10px;-->
    <!--height: 23px;-->
    <!--display: inline-block;-->
    <!--margin-top: 8px;">&lt;!&ndash;可以设置高度宽度&ndash;&gt;-->
 <!--</span>-->

<!--</div>-->
<!--输入框输入内容 会覆盖图片-->
</body>
</html>
输入框加图片

技术分享

返回顶部

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--返回顶部-->
<div onclick="back()" style="width: 50px; height: 50px ;right: 0; bottom: 0; position: fixed;background-color:black;color: #ffffff">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">abcd</div>

<script>
    function back() {
        document.body.scrollTop=0 ;
    }
</script>
</body>
</html>
返回顶部

选中变色用（hower）

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .pg_head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        background-color: mediumvioletred;
        line-height: 48px
    }

    .pg_body {
        margin-top: 50px;
    }

    .w {
        width: 980px;
    }

    .pg_head .menu {
        padding: 1px 1px 1px 1px;
        color: white;
        display: inline-block;
    }

    /*鼠标移到属性上变颜色*/
    .pg_head .menu:hover {
        background-color: blue;
    }
</style>
<body>
<!--上 右下左 顺时针-->
<div class="pg_head">
    <div class="w">
        <a class="menu">全部</a>
        <a class="menu">地段</a>
        <a class="menu">并不</a>
        <a class="menu">懂得</a>
        <a class="menu">低调</a>
    </div>

</div>
<div class="pg_body">aa</div>
</body>
</html>
选中变色

图片重复放

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--backgroud-image-->
<div style=" height:48px">

</div>
<div style="background-image: url(icon_18_118.png);height: 48px; border: 1px solid red"></div>
<!--图片重复放-->
<div style="margin-top: 50px; background-image: url(icon_18_118.png);height: 48px; border: 1px solid red; background-repeat: no-repeat;"></div>
<!--图片不重复放-->
<div style="margin-top: 50px; background-image: url(icon_18_118.png);height: 48px; border: 1px solid red;
background-position-y:-106px;background-repeat: no-repeat;"></div>
<!--图片不重复放-->
</body>
</html>
图片重复放

定时器

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定时器
    setInterval(‘alert(123)‘,5000)
    //每5分钟弹一个框
</script>
</body>
</html>
定时器

 

python:HTML + CSS 优先级 返回顶部


联系
我们