本文详述了前端开发中的一个综合例题，包括如何创建具有黑色背景和交互效果的导航栏，以及商品展示页面的实现。重点介绍了`text-decoration`、`list-style`和`cursor`等属性的使用，强调了前端开发的思维重要性。作者分享了个人从毕业到在知名大厂工作的经历，旨在帮助初中级前端开发者提升技能。
目录
导航栏
例题要求：
背景要为黑色，鼠标放在对应区域时要变为红色，并且鼠标的图标要变为一个手。
一些参数的解释：
text-decoration: 属性用于设置或删除文本装饰。
取值：
none
overline
line-through
underline
list-style:可以去掉小点。
cursor:可以选择悬浮时图标的样子。
总代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*对a标签进行处理，不处理的话前面就有小点和下划线*/
a{
color: white;
font-size:18px;
/*下面的属性可以消除下划线*/
text-decoration: none;
}
ul{
/*去掉那个点*/
list-style: none;
}
.nav{
text-indent: 4em;
width: 100%;
height: 100px;
border: 1px solid black;
background: black;
}
.nav>ul>li{
float: left;
width: 10%;
height: 100px;
line-height: 100px;
/*border: 1px solid blue;*/
/*background: red;*/
}
.nav>ul>li:hover{
background: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">游戏1<a/></li>
<li><a href="#">游戏2</li>
<li><a href="#">游戏3</li>
<li><a href="#">游戏4</li>
<li><a href="#">游戏5</li>
<li><a href="#">游戏6</li>
<li><a href="#">游戏7</li>
<li><a href="#">游戏8</li>
<li><a href="#">游戏9</li>
<li><a href="#">游戏10</li>
</ul>
</div>
</body>
</html>
运行结果截图：
商品模拟
最终效果展示。
一些属性参数解释
写前端重要的是思路。
position: absolute 设置相对位置还是绝对位置。
overflow: hidden; 设置内容超出范围后对应的处理措施
opacity: 0.8; 设置字体的淡化程度
list-style: none; 去掉 .
text-decoration: line-through; 设置穿过文字的线
<!DOCTYPE html>
<html>
<head>
<title>商品</title>
<
最低0.47元/天 解锁文章
8628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
