优先级

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

  1. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  2. HTML 返回顶部

    每次看淘宝,看微信,都回有回到顶部的小logo,小图标,或者双击返回顶部.所以就学习了如何返回顶部的操作,一开始是联想html中的链接描点,在开头出设置个标签,下面点击另外一个标志回去.有三种觉得比较 ...

  3. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  4. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  5. ECSHOP返回顶部的代码 纯CSS超简单

    在themes/模板文件夹/library/page_footer.lbi 文件的最末尾加上下面的一段代码 <style>.to_top{width:20px;height:59px;ri ...

  6. 048.Python前端css

    一 CSS介绍 1.1  CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; prop ...

  7. Python 前端 Css基础

    CSS样式存在的位置 1.放置在标签内,局部生效 <div style="color: red;font-size: 18px;">hello world</di ...

  8. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  9. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

随机推荐

  1. 用JAVA写一个日历计划

    效果图(自己需要在前台加css修饰)

  2. 64位虚拟机安装64位ubuntu出现问题

    virtualbox 出现this kernel requires an an x86-64 cpu 错误 如题,但是主机是win8 64位,使用virtualbox安装ubuntu-12.04.3- ...

  3. FTP目录或文件名有中文时导致,下载失败的问题

    在FTPClient ftpClient = new FTPClient()代码后, ftpClient.connect(url,port)代码前, 调用ftpClient.setAutodetect ...

  4. Ansible (一)

    epel rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm yum -y ins ...

  5. 实时输出TextField中内容

    要想实时输出TextField中内容,要找到textField内容发现改变就会调用的函数,即 - (BOOL)textField:(UITextField *)textField shouldChan ...

  6. BizTalk开发系列(一) "Hello World"

    学习开发语言的时候很喜欢输出“Hello World”作为第一个程序.今天我们也在BizTalk 上创建一个简单的 "Hello World" 程序. BizTalk的时候有很多文 ...

  7. Matlab里面的SVM

    支持向量机是建立在统计学习理论基础之上的新一代机器学习算法,支持向量机的优势主要体现在解决线性不可分问题,它通过引入核函数,巧妙地解决了在高维空间中的内积运算,从而很好地解决了非线性分类问题. 构造出 ...

  8. IOS第14天(1,UITabBarController的基本的使用)

    **************HMAppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWit ...

  9. phpcms 导航栏点击栏目颜色定位方法和phpcms list页实现分页

    另:一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 当你这个栏目添加 ...

  10. 论MySQL的监控和调优

    懂PHP的人一般都懂MySQL这一点不假,大多数书籍里也是这样,书中前面讲PHP后面到数据库这块就会讲到MySQL的一些知识,前几年MySQL一直是PHP书籍的一部分,后来开始从国外翻译了一些专门讲述 ...