原因：简单。
简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验。
一，导航高亮
效果图：
代码：
<!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:;
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:;
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可能就看不到了（取决于具体的值是否足够大）