标签：title check opacity link utf-8 维护成本 nbsp style 透明
原因：简单。
简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验。
一，导航高亮
效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>home</title> <link rel="stylesheet" href="./style.css"> </head> <body class="home"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>buy</title> <link rel="stylesheet" href="./style.css"> </head> <body class="buy"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sell</title> <link rel="stylesheet" href="./style.css"> </head> <body class="sell"> <ul> <li class="home"><a href="home.html">home</a></li> <li class="buy"><a href="buy.html">buy</a></li> <li class="sell"><a href="sell.html">sell</a></li> </ul> </body> </html>
ul { list-style: none; } ul li { float: left; margin-right: 30px; } a { color: #000; text-decoration: none; } /*正常态时，每个导航的默认样式*/ ul li a { opacity: 0.5; } /*hover高亮实现*/ ul li a:hover { opacity: 1; border-bottom: 1px solid red; } /*选中当前页面时，导航不透明度为1，另外加上下边框*/ body.home ul li.home a, body.buy ul li.buy a, body.sell ul li.sell a { opacity: 1; border-bottom: 1px solid red; }
二，鼠标悬浮时显示
实现方法：把隐藏的对象如子菜单，信息框作为hover目标的子元素或者相邻元素
方法一，使用相邻元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> /*menu正常状态下是隐藏的*/ .menu { display: none; } /*导航hover时，显示menu*/ .user:hover+.menu { display: list-item; } /*menu hover的时候，继续显示*/ .menu:hover { display: list-item; } /*如果menu和user之间有空隙，可以使用伪元素填充这个空隙，是menu hover的时候，依旧显示*/ .menu:before { content: ‘‘; position: absolute; left: 0; top: -10px; width: 100%; height: 10px; } </style> </head> <body> <li class="user">用户</li> <li class="menu"> <ul> <li>账户设置</li> <li>登出</li> </ul> </li> </body> </html>
方法二，使用子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container .menu { display: none; } .container:hover .menu { display: list-item; } </style> </head> <body> <ul class="container"> <li class="user">用户</li> <li class="menu"> <ul> <li>账户设置</li> <li>登出</li> </ul> </li> </ul> </body> </html>
三，自定义radio/checkbox的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> /*原生的选择框隐藏*/ input[type=checkbox] { display: none; } /*未选中的checkbox的样式*/ .checkbox { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #000; } /*利用:checked伪类实现自定义选中状态样式*/ input[type=checkbox]:checked+.checkbox { border: 1px solid red; background-color: yellow; } </style> </head> <body> <label for="check"> <input type="checkbox" id="check"> <span class="checkbox"></span> </label> </body> </html>
标签：title check opacity link utf-8 维护成本 nbsp style 透明
原文地址：https://www.cnblogs.com/iceflorence/p/9015664.html
