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">-->
<!--<!–<input type="text" style="height: 48px; width: 20px" />–>-->
<!---->
<!--<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;"><!–可以设置高度宽度–>-->
<!--</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 ...
随机推荐
- mysql破解root用户密码总结
方法一: 1. /etc/my.cnf 在[mysqld]段中加入 skip-grant-table2. 重启mysql3. 直接mysql登录4. 通过修改权限表方式修改mysql密码(update ...
- Oracle rac集群环境中的特殊问题
备注:本文摘抄于张晓明<大话Oracle RAC:集群 高可用性 备份与恢复> 因为集群环境需要多个计算机协同工作,要达到理想状态,必须要考虑在集群环境下面临的新挑战. 1.并发控制 在集 ...
- js中特有语句-with
<script type="text/javascript"> /* *为了简化对象调用内容的书写. *可以用js中的特有语句with来完成. *格式 *with{ * ...
- 【iCore3 双核心板】例程十：RTC实时时钟实验——显示日期和时间
实验指导书及代码包下载: http://pan.baidu.com/s/1jHuZcnc iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- centos桌面使用
firefox添加flash插件 [root@bogon home]# cp libflashplayer.so /usr/lib64/mozilla/pl pl plugins/ plugins-w ...
- mysql组合索引顺序参考
问题背景 : 当我们需要创建一个组合索引, 索引的顺序对于效率影响很大, 怎么确定索引的顺序; 解决方法 : 我们应该依据字段的全局基数和选择性, 而不是字段的某个具体的值来确定; 表结构 : dc ...
- Trace文件过量生成问题解决
查看用户临时文件(trace文件)所在位置 如果是trace文件(.trc)大导致的 SQL>show parameters user_dump_dest 在路径下查看 alert_log 文件 ...
- 【Android测试】【第十七节】Instrumentation——App任你摆布（反射技术的引入）
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5569844.html 前言 学习了上节之后,大家是否已经 ...
- java工具类目录
1 读取properties文件数据 http://www.cnblogs.com/xumin/p/3143762.html 2 发送邮件 3 发送短信 4
- Python之路-python(面向对象一)
一.面向对象介绍 二.为什么要用面向对象开发 三.封装.继承.多态.类.方法 面向过程和面向对象的区别 编程范式: 一般情况下,拿到一个项目不同的两个人有不同的编写方式(相同的是固定的语法.数据结构) ...