css, js 项目练习之网页换肤
2024-10-18 06:17:59
首先，该练习参考自：https://www.jianshu.com/p/2961d9c317a3
我就直接上代码了（颜色可以自己调）。
HTML:
<nav>
<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>
<li><a href="#">独秀不爱秀</a></li>
</nav>
<ul id="skin">
<li id="red"></li>
<li id="green" class="current"></li>
<li id="blue"></li>
</ul>
CSS:
/* 公共部分 */
* {
margin:;
padding:;
}
html, body {
font-size: 16px;
transition: all 1s;
}
ul, nav {
list-style: none;
} /* 网页皮肤选择模块 */
#skin {
margin-left: 100px;
margin-top: 100px;
}
#skin li {
width: 50px;
height: 50px;
color: #fff;
line-height: 50px;
text-align: center;
border-radius: 50%;
}
#skin li + li {
margin-top: 10px;
}
#skin #red {
background-color: red;
border: 25px solid red;
}
#skin #green {
background-color: #009688bd;
border: 25px solid #009688bd;
}
#skin #blue {
background-color: blue;
border: 25px solid blue;
}
#skin li.current {
background-color: #fff!important;
}
#skin li:hover, #skin li:focus {
background-color: #fff!important;
} /* nav 模块 */
nav {
width: 700px;
height: 50px;
margin: 100px auto;
}
nav li {
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
transition: all 1s;
border: 1px solid #fff;
}
nav li + li {
margin-left: 10px;
}
nav li a {
color: #fff;
text-decoration: none;
}
nav li a:hover, nav li a:focus {
text-decoration: underline;
}
green.css
body {
background: #8bc34a;
}
nav li {
background-color: #009688bd;
}
red.css
body {
background: #9e9e9e5e;
}
nav li {
background-color: #ff5722eb;
}
blue.css
body {
background: #673ab7a6;
}
nav li {
background-color: #03a9f4a3;
}
JavaScript:
window.onload = () => {
// 获取选择皮肤按钮
const skinLi = document.getElementById('skin').querySelectorAll('li');
// 获取 link 标签
const cssLink = document.getElementById('link');
for (let i = 0; i < skinLi.length; i++) {
skinLi[i].addEventListener('click', () => {
// 当点击每一个选择的时候先去除掉所有选择按钮的 class
for (ele in skinLi) {
skinLi[ele].className = '';
}
skinLi[i].className = 'current';
cssLink.href = `css/${skinLi[i].id}.css`;
});
}
};
最新文章
- 【Beta】Daily Scrum Meeting第三次
- html5，单击文字自动获得焦点
- mysql 性能优化方案1
- 数据结构-图-Java实现：有向图 图存储（邻接矩阵），最小生成树，广度深度遍历，图的连通性，最短路径1
- 【翻译八】java-内存一致性错误
- java分享第四天（循环）
- 【接口测试】Jenkins+Ant+Jmeter搭建持续集成的接口测试平台
- 操作系统是怎么工作的——mykernel环境的搭建
- Android基础总结（10）——手机多媒体的运用：通知、短信、相机、视频播放
- V9 二次开发技术篇之 模型数据库
- RMAN连接及简单操作
- HTML <div>和<span>
- 图像转化成TFrecords格式并回转
- whereis命令详解
- webstorm ps
- Helm: Error: no available release name found
- vue props 用法（转载）
- Axure 第一次交互 实现跳转页面
- imooc movie
- codevs 3185 队列练习 1