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

优先级

<!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 优先级返回顶部的更多相关文章

css 简单返回顶部代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
HTML 返回顶部
每次看淘宝,看微信,都回有回到顶部的小logo,小图标,或者双击返回顶部.所以就学习了如何返回顶部的操作,一开始是联想html中的链接描点,在开头出设置个标签,下面点击另外一个标志回去.有三种觉得比较 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
ECSHOP返回顶部的代码纯CSS超简单
在themes/模板文件夹/library/page_footer.lbi 文件的最末尾加上下面的一段代码 <style>.to_top{width:20px;height:59px;ri ...
048.Python前端css
一 CSS介绍 1.1 CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; prop ...
Python 前端 Css基础
CSS样式存在的位置 1.放置在标签内,局部生效 <div style="color: red;font-size: 18px;">hello world</di ...
返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
jquery 返回顶部兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

随机推荐

Odoo 9 PDF不显示中文字体
在Ubuntu中安装中文字体: $ sudo apt-get install ttf-wqy-zenhei $ sudo apt-get install ttf-wqy-microhei
javascript特效--制作背景电子钟（整点时祝贺生日快乐）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
zk label控件内容换行
Label控件本身无法换行,不过div却可以,只要设置了div的宽度,那么就想如果在Label控件外套个div会怎样,结果可喜可乐: <div width="80px"> ...
图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
PHP后门新玩法：一款猥琐的PHP后门分析
0x00 背景近日,360网站卫士安全团队近期捕获一个基于PHP实现的webshell样本,其巧妙的代码动态生成方式,猥琐的自身页面伪装手法,让我们在分析这个样本的过程中感受到相当多的乐趣.接下来就 ...
无损破解Android图案密码及原理
作者:http://weibo.com/hellguard 安卓图案密码穷举,秒破gesture.key.图案密码是明文的SHA1,明文取值范围是[00-08],不超过9字节,不重复出现,没有SALT ...
非静态的字段、方法或属性“System.Web.UI.Page.ClientScript...”要求对象引用 (封装注册脚本)
在写项目时想对asp.net的注册前台脚本事件进行封装,就添加了一个BasePage.cs页面,但一直报错‘非静态的字段.方法或属性“System.Web.UI.Page.ClientScript.. ...
类似input框内最右边添加图标，有清空功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
CentOS碰到两个问题，顺便解决了下
1.弹出界面 eth0: RTNETLINK answers: File exists 执行service network restart时报的错误因为service network start造成 ...
php 的包管理工具 composer
官方网站 https://getcomposer.org/ 下载地址 https://getcomposer.org/download/ 安装教程 https://laravist.com/serie ...

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

python:HTML + CSS 优先级 返回顶部的更多相关文章

随机推荐

热门专题

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

python:HTML + CSS 优先级返回顶部的更多相关文章