2021-07-09
2021/7/9 23:38:12
本文主要是介绍2021-07-09,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Emmet语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Emmet语法</title> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <!-- div*10 生成十个标签 --> <ul> <li></li> </ul> <!-- ul>li,父子集关系,兄弟集为+ --> <div class="nav"></div> <!-- .nav --> <div id="nav"></div> <!-- #nav ,#two--> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> <!-- .demo$*5,排序 --> </html>
复合选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器</title> <style> ol li { color: pink; } /* 后代选择器,亲儿子选择器只能选择自己的下一级:元素1>元素2 */ .col { text-decoration: none; } .other li { color: red; } /* 多个ol中选择,改标签名字 */ div, p { color: green; } a { color: gray; } /* 并集选择器 */ a:link { color: black; text-decoration: none; } /* 未被点击过 */ a:visited { color: blue; } /* 点击过的 */ a:hover { color: red; } /* 经过的链接 */ a:active { color: pink; } /* 按下还未选择的链接 */ /* 伪类选择器 */ </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li><a href="#" class="col">4</a></li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ol class="other"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <div>并集选择器</div> <p>并集选择器</p> <a href="http://www.baidu.com">baidu</a> <a href="http://www.sougou.com">sougou</a> </body> </html>
小米商城小模块:行与块元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行与块元素</title> <style> a { display:block; text-decoration: none; line-height: 40px; font-size: 14px; background-color: gray; width: 230px; height: 40px; color: white; text-indent: 2em; } a:hover { background-color: orange; } </style> </head> <body> <a href="">手机 电话卡</a> <a href="">电视 盒子</a> <a href="">笔记本 平板</a> <a href="">出行 穿戴</a> <a href="">智能 路由器</a> <a href="">健康 儿童</a> <a href="">耳机 音响</a> </body> </html>
这篇关于2021-07-09的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行