前言：
各位铁子们，晚上好，想做《语言的魅力》很久了，前段时间一直在忙着做毕业论文和毕业答辩的事情，今天才有时间写下第一篇，做这期专栏的灵感来源于有次看到某个博主用css做出了一个星空样式还是什么，具体忘了，对我这种上班基本只和表单打交道的来说，彷佛发现新大陆，于是决定做一些常见样式，代码中也标有注释，一方面用来自己学习，另一方面也方便别人参考。
效果展示：
效果展示
所用技术：
- HTML
- CSS
- JavaScript
代码展示：
Html：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>惊喜商城</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="#0" class="logo">惊喜商城</a>
<nav class="site-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">主题市场</a></li>
<li><a href="#">特色购物</a></li>
<li><a href="#">当前热点</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<script src="js/script.js"></script>
</body>
</html>
Css:
body {
background: #222;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.logo {
font-size: 34px;
line-height: 50px;
text-align: center;
text-decoration: none;
color: white;
}
.site-nav {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
}
/* 当鼠标滑过ul,那些没有被鼠标划过的li中的a设置透明度为0.2 */
ul:hover li:not(:hover) a {
opacity: 0.2;
}
ul li {
position: relative;
padding: 30px 25px 30px 25px;
cursor: pointer;
}
ul li::after {
position: absolute;
content: "";
bottom:0;
left: 0;
width: 100%;
height: 2px;
background: #3498db;
/*初始状态下，所有li下的下划线全都隐藏 */
transform: scaleX(0);
/* 动画效果 */
transition: 0.5s;
}
/* 当鼠标划过li后,或者li有active选择器时，下划线显示*/
ul li:hover::after, ul li.active::after {
transform: scaleX(1);
}
ul li a {
color: white;
font-family: Lato, sans-serif;
text-decoration: none;
}
JavaScript:
//1.获得所有的li导航栏
var underlineMenuItems = document.querySelectorAll("ul li");
//2.给第一个导航栏添加下划线样式
underlineMenuItems[0].classList.add("active");
//3.遍历所有的导航栏
underlineMenuItems.forEach(function (item) {
//4.当点击某一个导航栏时
item.addEventListener("click", function () {
//5.再次遍历所有的导航栏，并且给所有的导航栏清除样式
underlineMenuItems.forEach(function (item) { return item.classList.remove("active"); });
//6.并给当前点击的导航栏添加样式
item.classList.add("active");
});
});