手风琴案例

最新推荐文章于 2025-06-07 06:38:52 发布

苍生看海

最新推荐文章于 2025-06-07 06:38:52 发布

阅读量120

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_53339654/article/details/128515464

版权

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	ul li {
	margin: 0px auto;

	list-style: none;
	width: 500px;
	}

	ul li:nth-child(2n-1) {
	text-align: center;
	background-color: black;
	color: #fff;
	font-weight: bold;
	height: 30px;
	line-height: 30px;

	}

	ul li:nth-child(2n) {
	background-color: #167ea0;
	text-indent: 2em;
	display: none;
	}
	</style>
	</head>

	<body>
	<ul>
	<li>1《抉择》</li>
	<li>一生，曲折而漫长，有许多东西值得我们追寻。但是我们不能把一切都背在身上，
	那太沉重，将使我们步履艰难。在人生的十字路口，我们应该学会放弃。我的哥哥是
	一名大学生，他从小就很优秀，深受老师同学喜爱。可是到了初中，他热衷于打篮球，
	根本没心思学习，成绩便急速下降。后来，哥哥的老师和妈妈找他谈话，他认识到学习
	其实比打篮球重要。终于，由于他作出了正确的选择，以优异的成绩考上了浙江大学。也许
	他在选择时会有万般无奈</li>
	<li>2《生命》</li>
	<li>享受不到生活的喜悦；而选择后者的人就恰好相反，坚强的竟志能使我们克服困难
	，走出失败的阴影，迎难而上。有谁的人生是坦途的呢？我也有过这样的经历，我也曾被困
	难吓倒过，可是最终我选择了坚强，我克服了困难，我没有向命运低头！这里面蕴含着一个
	道理，那就是我们选择生活，生活也在选择我们。有句话说得好：不在沉默中爆发，就在沉
	默中灭亡。</li>
	<li>3《大小》</li>
	<li>选择自我。人有两笔组成，看起来很好写，但做起来却很难，因为在这万千世界
	有形形色色的人，你、我都是其中的一人。在和这些人交往中，难免会"夹着尾巴”做人
	，失去了自我，久而久之，你就丧失了自己原本就有的特殊的东西，你会带着虚假的面具度
	过自己的人生，如行尸走肉没什么两样，该是多么痛苦的事啊！即使这么痛苦，还有人愿意这
	样做，我只能说：“朋友，你活得太累了！”</li>
	<li>4《崇拜》</li>
	<li>家里打电话，那些都是借口，你可知道爸妈对你的思念。那么，朋友请你停下忙碌的脚步
	，哪怕占用你几分钟的时间，向家打个电话问候一下父母。他们也许听到这电话后激动地落泪，
	这些你可曾想过。朋友、停下你忙碌的脚步，算一算自己多久没有和父母坐在一起谈心了
	，想一想多久没有回家看望父母了，那么请你多花点时间去做，哪怕只有短暂的几分钟，
	父母就会满足，他们的内心便不会孤单。朋友、请你想想父亲在你童年时那高大的身躯和现
	在瘦弱的身体及沧桑的脸庞以及年轻时母亲纤细的手和现在布满老茧的手，布满皱纹</li>
	</ul>
	<script>
	var li = document.querySelectorAll('li');
	for (let i = 0; i < li.length; i++) {
	if (i % 2 == 0) {
	li[i].onclick = function () {
	for (let j = 0; j < li.length; j++) {
	if(j % 2 !== 0){
	li[j].style.display = 'none';

	}

	}
	li[i + 1].style.display = 'block';
	}
	}
	}
	</script>
	</body>

	</html>