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

随机推荐

HDU1058 DP
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
B-树的插入、查找、删除
转自:http://blog.163.com/zhoumhan_0351/blog/static/39954227200910231032917/ 前面讨论的查找都是内查询算法,被查询的数据都在内存. ...
Oracle索引简单介绍与示例
索引的三大特性 1索引高度在SQL检索数据(SELECT)的时候,索引的高度的不同对检索的效率有明显的差别,数据库访问索引需要读取的数据块通常是索引的高度+1个数据块数,也就是说索引的高度越高,访问 ...
flume+elasticsearch
项目的日志服是使用flume+elasticsearch 但是运维大哥告诉我,经常会大量往外发包,以至流量超标.问我是不是程序有问题.当时我拍着胸膛说:肯定不是.他说,可能是服务器被攻击了,让我换一 ...
重新启动 Apache 以加载上面安装的模块
尽管Ubuntu 是一种新兴的Linux分支,但Ubuntu 组织却为Apache提供了丰富的支持软件,这些软件都可以从发行版的光盘获取,也可以从官方站点轻松下载.所以,Ubuntu非常适合作为Web ...
【转】C#(ASP.Net)获取当前路径的方法集合
转自:http://www.gaobo.info/read.php/660.htm //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Asse ...
JavaScript 回调函数中的 return false 问题
今天一个同事问了我一个问题,就是在 Ajax 方法中,请求成功后(success)的回调函数中根据响应的值来判断程序是否继续执行,他不解的是在回调函数中已经 return false 了,但是 Aja ...
PHP获取远程网站的服务器时间
<?php function get_time($server){ $data = "HEAD / HTTP/1.1\r\n"; $data .= "Host: ...
Day3~Day7(2016/1/23~2016/1/27)
活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...
《Linux内核分析》第二周操作系统是如何工作的？
[刘蔚然原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK TWO(2 ...

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

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

随机推荐

热门专题

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

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