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

随机推荐

简单工程使用sbt公共库（sbt-assembly）
只是为了简单实现一个算法,想用到breeze算法库.想把breeze当做external libraryies直接导入工程.可是官网没有,网上搜索更多的是在sbt工程或maven工程下. 后来实现目标 ...
mysql修改数据表名
在使用mysql时,经常遇到表名不符合规范或标准,但是表里已经有大量的数据了,如何保留数据,只更改表名呢? 可以通过建一个相同的表结构的表,把原来的数据导入到新表中,但是这样视乎很麻烦. 能否简单使用 ...
zk回车事件
private Textbox testTextB; testTextB.addEventListener(Events.ON_OK, new EventListener<Event>() ...
ES6 有什么新东西
ES6 有什么新东西? 你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本 ...
在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合
PHP程序的时候会在文件的最后加上一个闭合标签,如下: <?phpclass MyClass{public function test(){//do something, etc.}}?> ...
repeater单双行颜色不同，gridview repeater DataList 鼠标经过改变背景颜色
1.gridview 双击GridView的OnRowDataBound事件: 在后台的GridView1_RowDataBound()方法添加代码,最后代码如下所示: protected void ...
【iCore3 双核心板_FPGA】例程十一：乘法器实验——乘法器使用
实验指导书及代码包下载: http://pan.baidu.com/s/1dEijBs1 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
ActiveMq池
有两种连接方式 1.Spring 引用  <bean id="connectionFactory" class=" ...
向ES6看齐，用更好的JavaScript（三）
本文是ES6系列的第三篇,主要介绍ES6新增的数据类型.数据结构,先上传送门: 1 变量部分 2 现有对象拓展 3 新增数据类型/数据结构 4 新的异步编程模式 5 类和模块 1 第七种数据类型Sym ...
zjuoj 3606 Lazy Salesgirl
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3606 Lazy Salesgirl Time Limit: 5 Secon ...

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

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

随机推荐

热门专题

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

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