css实验思考题 |css li 标签大小

css 注水效果，webpack可以压缩css，分页用css怎么写，css变量js能改变，ie改变全局css的值，css两行不同颜色，css li 标签大小 css实验思考题 |css li 标签大小

/* 思考题 */
/* 将下面的HTML文档的样式改为左侧菜单栏，右侧内容实时变化 */
/* 要求：菜单栏和内容栏均为固定宽度，且高度随内容变化，菜单栏效果为竖排列表 */
/* 鼠标划过菜单项时，菜单项颜色会改变，而内容会实时更新 */菜单项1
菜单项2
菜单项3
菜单项4
菜单项5
内容1
内容2
内容3
内容4
内容5

思考了一会儿后，偶决定采用CSS的flex布局来完成这个任务。偶首先将wrapper设为flex布局，并将其子元素均设为可伸缩，然后给菜单项设置固定宽度，并将内容项用flex-grow设为1，以实现自适应宽度。接下来，偶用样式选择器选中ul中的li元素，并设置鼠标悬浮时的背景色，以实现菜单项的选中效果。最后，偶通过JS为每个菜单项添加了一个点击事件，当点击菜单项时，它所对应的内容就会实时更新。

/* CSS样式表 */
.wrapper {
display: flex;
}
ul {
width: 200px;
border-right: 1px solid #ccc;
display: flex;
flex-direction: column;
}
li {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.content {
margin-left: 10px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
p {
font-size: 14px;
line-height: 1.5;
margin-bottom: 10px;
}
li:hover {
background-color: #f4f4f4;
}
/* JS代码 */
var items = document.querySelectorAll('li');
var contents = document.querySelectorAll('div.content p');
for (var i = 0; i< items.length; i++) {
items[i].addEventListener('click', function() {
for (var j = 0; j< contents.length; j++) {
contents[j].style.display = 'none';
}
var index = Array.from(items).indexOf(this);
contents[index].style.display = 'block';
});
}

经过简单的调试后，项目完成了。通过这个思考题，偶深深地认识到了CSS样式表的灵活运用，以及JavaScript在Web开发中的重要性。偶相信，只有不断地学习和思考，大家才能够更好地应用Web技术，创造出更炫酷的效果。