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

随机推荐

Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
jQuery -> 获取元素的各种过滤器
转自http://blog.csdn.net/feelang/article/details/26613023
openstack组件之keystone
一什么是keystone keystone是 OpenStack Identity Service 的项目名称.它在整个体系中充当一个授权者的角色. Keystone项目的主要目的是给整个opens ...
深入理解C++虚函数表
虚函数表是C++类中存放虚函数的一张表,理解虚函数表对于理解多态很重要. 本次使用的编译器是VS2013,为了简化操作,不用去操作函数指针,我使用到了VS的CL编译选项来查看类的内存布局. CL使用方 ...
PHP第三方登录 -- 微博登录
进化史博客园首页新随笔联系管理订阅随笔- 9 文章- 0 评论- 0 php 实现qq第三方登录学习之前,请大家先看一下oAuth协议. 首先呢,我们进入QQ互联的官方网站 ht ...
php课程---Ajax（老师详解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ExtJS笔记 Ext.data.Model
A Model represents some object that your application manages. For example, one might define a Model ...
Thinking in Java——笔记(7)
Reusing Classes The first is composition,You're simply reusing the functionality of the code, not it ...
tomcat session cluster
Session的生命周期以前在学习的时候没怎么注意,今天又回过头来仔细研究研究了一下Session的生命周期. Session存储在服务器端,一般为了防止在服务器的内存中(为了高速存取),Sessi ...
Git diff 常见用法
Git diff 用于比较两次修改的差异 1.1 比较工作区与暂存区 git diff 比较的是单个仓库的工作区与暂存区的差别,repo diff是对git diff的封装,用来分别显示各个项目 ...

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

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

随机推荐

热门专题

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

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