python:HTML + CSS 优先级 返回顶部
优先级
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
输入框加图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
返回顶部
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
图片重复放
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
定时器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //定时器 setInterval('alert(123)',5000) //每5分钟弹一个框 </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步