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

随机推荐

session.load()和session.get()的区别
Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 其区别在于: 如果未能发现符合条件的记录,get方法返回null, 而load方法会 ...
markdown语法学习笔记
##1.**标题** # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 ##2.**加粗** 首尾各加两个*号 ##3.*斜字体 ...
Android课程---课下练习（表格、线性和相对布局）
1.表格布局练习代码: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns: ...
Windows内核语言选择注意点
调用约定: 调用约定指的是函数被调用时,会按照不同规则,翻译成不同的汇编代码.当一个函数被调用时,首先会将返回地址压入堆栈,紧接着会将函数的参数依次压入堆栈.不同的调用约定,会指明不同的参数入栈顺序, ...
C# 结构转化
一.string 转 char[] string ss = "alsofly"; char[] cc = ss.ToCharArray(); 二.char[] 转 string c ...
String-自定义功能
<script> /* *发现js中的String对象有限,想要对字符串操作的其他功能. *比如:去除字符串两端的空格.这时只能自.定义 */ //去除字符串两端的空格 function ...
css：使用笔记(不断更新中...)
1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...
UrlRewriteFilter
UrlRewriteFilter是一个改写URL的Java Web过滤器,可见将动态URL静态化.适用于任何Java Web服务器(Resin,Jetty,JBoss,Tomcat,Orion等).与 ...
SQL Server执行计划的理解【转】
要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL Server的执行计划是从右向左看 ...
初步了解JSONP
一.JSON 与 JSONP JSON是一种基于文本的数据交换方式(数据描述格式),JSONP是一种非官方跨域数据交互协议. ajax的核心是通过XmlHttpRequest获取非本页内容,而json ...

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

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

随机推荐

热门专题

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

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