正文
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>
定时器
