我的网站有一个 .css
文件,它为侧边导航栏设置所有格式。唯一的问题是它看起来很乱而且效率似乎很低,因为我不得不一次又一次地复制相同的代码,只是为了在弹出的每张幻灯片中更改一个或两个值。我想知道如何让它更整洁、更高效。
这是相关的 CSS 代码的样子
nav {
display: block;
color:white;
border:2px;
border-color:aqua;
border-style:solid;
border-right-style:none;
padding:10px;
text-transform: uppercase;
}
/*First nav box*/
#topnav {
top: 100px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:white;
border-bottom-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#topnav:hover span {display:none}
#topnav:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
color:white;
}
#topnav:hover:before {
content:"Top";
}
/*Second nav box*/
#nav2 {
top: 140px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:red;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#nav2:hover span {display:none}
#nav2:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}
#nav2:hover:before {
content:"Red";
}
/*Third nav box*/
#nav3 {
top: 180px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:blue;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#nav3:hover span {display:none}
#nav3:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}
#nav3:hover:before {
content:"blue";
}
/*Fourth nav box*/
#nav4 {
top: 220px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:green;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#nav4:hover span {display:none}
#nav4:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}
#nav4:hover:before {
content:"green";
}
/*Fifth nav box*/
#nav5 {
top: 260px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:purple;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#nav5:hover span {display:none}
#nav5:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}
#nav5:hover:before {
content:"purple";
}
/*Sixth nav box*/
#nav6 {
top: 300px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:orange;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#nav6:hover span {display:none}
#nav6:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}
#nav6:hover:before {
content:"orange";
}
/*Bot nav box*/
#botnav {
top: 340px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:white;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#botnav:hover span {display:none}
#botnav:hover {
width:3cm;
background-color:black;
border-top-style:solid;
color:white;
}
#botnav:hover:before {
content:"200";
}
这里还有一个 JSFiddle用实践中的代码向您展示它的样子。另外,如果我需要更改 HTML 以使 css 更高效,请告诉我。
感谢您的帮助
编辑
所以基于Darren's answer和 Stafox's answer ,我已经将代码压缩到这个。
nav {
display: block;
color:white;
border:2px;
border-color:aqua;
border-left-style:solid;
padding:10px;
text-transform: uppercase;
right: 0px;
position: fixed;
z-index: 3000;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}
#topnav:hover, #nav2:hover, #nav3:hover,
#nav4:hover, #nav5:hover, #nav6:hover,
#botnav:hover {
z-index:5000;
width:3cm;
background-color:black;
border-style:solid;
border-right-style:none;
color:white;
}
nav:hover span
{
display:none
}
/*First nav box*/
#topnav {
top: 100px;
background-color:white;
border-top-style:solid;
}
#topnav:hover:before {
content:"Top";
}
/*Second nav box*/
#nav2 {
top: 140px;
background-color:red;
}
#nav2:hover:before {
content:"Red";
}
/*Third nav box*/
#nav3 {
top: 180px;
background-color:blue;
}
#nav3:hover:before {
content:"blue";
}
/*Fourth nav box*/
#nav4 {
top: 220px;
background-color:green;
}
#nav4:hover:before {
content:"green";
}
/*Fifth nav box*/
#nav5 {
top: 260px;
background-color:purple;
}
#nav5:hover:before {
content:"purple";
}
/*Sixth nav box*/
#nav6 {
top: 300px;
background-color:orange;
}
#nav6:hover:before {
content:"orange";
}
/*Bot nav box*/
#botnav {
top: 340px;
background-color:white;
border-bottom-style:solid;
}
#botnav:hover:before {
content:"200";
}
这是一个JSFiddle它在使用中。
还有其他建议吗?
最佳答案
您可以将常见的导航元素分组到一个 CSS 类中。
例如,您的topnav
、nav2
、nav3
、nav4
和nav5
都有以下共同点:
- 颜色
- 职位
- 过渡
- 对
- 边框
- 行高
因此,拥有具有这些样式的基本元素比重复它们可能更有意义。
.navigation-base {
color: black;
position: fixed;
transition: 250ms all ease-out;
right: 0px;
}
然后将 navigation-base
应用于所有导航元素,然后在它们不同的地方添加一个额外的类。
.navigation-unsuccessful {
background-color: red;
}
.navigation-success {
background-color: green;
}
<nav class="navigation-base navigation-success">
<!-- Navigational components -->
</nav>
关于html - 整理 CSS 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37372417/