前端：综合例题详细解说（含源代码）,导航栏，商品展示页面。

最新推荐文章于 2025-01-31 15:21:55 发布

程序员Fy

最新推荐文章于 2025-01-31 15:21:55 发布

阅读量2.2k

点赞数 40

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/fuyuo/article/details/125950954

版权

导航栏

例题要求：
背景要为黑色，鼠标放在对应区域时要变为红色，并且鼠标的图标要变为一个手。

一些参数的解释：

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>
	<style type="text/css">
		/**{
			margin: 0;
			padding: 0;
		}*/
		.big{
     
			/*float: left;*/
			width: 1600px;
			height: 915px;
			/*border: 1px solid black;*/
			top: 1%;
			left: 9%;
			position: absolute;
		}
		.sm{
     
			margin: 20px 10px 0px 10px;
			left: 25px;
			float: left;
			width: 290px;
			height: 450px