能用HTML／CSS解决的问题，就不要用JS
Posted Florence
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了能用HTML／CSS解决的问题，就不要用JS相关的知识，希望对你有一定的参考价值。
原因：简单。
简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验。
一，导航高亮
效果图：
代码：
<!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>
四，多列等高
可以使用flex布局和table布局，可以做到多列等高。
但是如果使用grid或者浮动布局等，如果每列内容不一，很可能导致每列高度不一致，解决方案：
1，给每列来一个很大的padding，在来一个很大的负margin值矫正回去。
.wrapper li { padding: 10px 20px; margin: 10px; border:1px solid red; padding-bottom: 900px; margin-bottom: -900px; }
不足：由于设置了一个很大的padding值，导致高度变的很大，底部的border可能就看不到了（取决于具体的值是否足够大）
以上是关于能用HTML／CSS解决的问题，就不要用JS的主要内容，如果未能解决你的问题，请参考以下文章
Effective前端1：能使用html/css解决的问题就不要使用JS
Effective前端1：能使用html/css解决的问题就不要使用JS
（javascript，css）如果用frameset将窗口分成五个frame了，还能用一张大图作为整个窗口的背景图片吗？