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

最新推荐文章于 2023-07-03 19:23:42 发布
最新推荐文章于 2023-07-03 19:23:42 发布
阅读量1.8k 收藏 66
点赞数 39
分类专栏： 前端 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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;
			border: 1px solid black;
			position: relative;
		}
		.sm:hover{
			border: 1px solid red;
		}
		.big>.sm>img{
			width: 240px;
			height: 245px;
			left: 25px;
			/*right: 25px;*/
			top: 0px;
			position: relative;
		}
		.big>.sm>.content{
			width: 240px;
			height: 50px;
			/*border: 1px solid blue;*/
			/*超出范围就隐藏*/
			overflow: hidden;
			left:25px;
			top:265px;
			/*相对位置*/
			position: absolute;
			font-size: 18px;
			font-family: "宋体";
			/*font-weight: bold;*/
			/*字体淡化*/
			opacity: 0.8;
			/*设置行高*/
			line-height: 25px;
		}
		.price{
			width: 240px;
			height: 30px;
			/*border: 1px solid blue; */
			top:330px;
			left: 25px;
			position: absolute;
		}
		.price>ul{
			list-style: none;
			
		}
		.price>ul>li{
			float: left;
			line-height: 1px;
			/*text-align: right;*/
			/*left: 0px;*/
			/*position: absolute;*/
		}
		.price_before{
			opacity: 0.5;
			/*价格删除线*/
			text-decoration: line-through;
			right: 30px;
			/*position: relative;*/
		}
		.price_now{
			color: red;
			font-size: 23px;
			left: -40px;
			position: relative;
		}
		.shop{
			width: 240px;
			height: 30px;
			/*border: 1px solid pink;*/
			top:380px;
			left: 25px;
			position: absolute;
		}
		.shop>img{
			overflow: hidden;
		}
		.shop>a{
			font-family: "微软雅黑";
			color: black;
			opacity: 0.7;
			text-decoration: none;
		}
		.shop>a:hover{
			color: red;
		}
		.count{
			right: 0;
			position: absolute;
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
		<div class="sm">
			<img src="D:\\Desktop\\1.webp">
			<span class="content">
				女装2022最新款女装2022最新款女装2022最新款女装2022最新款女装2022最新款
			</span>
			<div class="price">
				<ul>
					<li class="price_now">$ 458.50</li>
					<li class="price_before">$ 665.00</li>
				</ul>
			</div>
			<div class="shop">
				<img src="D:\\Desktop\\2.png">
				<a href="#">进店购物</a></br>
				<!-- <span href="">&nbsp;</span></br> -->
				<span class="count">月销&nbsp;100+</span>
			</div>
		</div>
	</div>
</body>
</html>
程序员Fy
关注
  • 39
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 39
    评论
专栏目录
商城产品详情网页html
12-12
这是一个JS+CSS+HTML 源码文件，是一个商城产品详情页的模板。 这是一个JS+CSS+HTML 源码文件，是一个商城产品详情页的模板。
html+css+简单的js制作的超市页面
qq_57049935的博客
09-12 1672
css部分：此部分先将全体对象的间距设置为0，字体设置为微软雅黑，设置所有a标签的颜色并且取消a标签的下划线。然后设计版心的宽度，注意每个部分都会使用版心，因此不设计版心的高度，由具体部分具体给指定的高度。根据上图成果，此部分是在版心之中分为左右两部分进行设计，使用div将其分为两块，然后进行css的样式设计。分为三部分进行设计，左边一个logo，中间搜索框以及下面的文字，右边设计扫描的二维码。这里注意设计给的是具体的位置，所以给宽度和高度时要使用工具确定具体的px值。
html怎么制作商品,html制作彩妆热卖产品列表
weixin_33204101的博客
06-10 1631
效果图html布局彩妆热卖产品列表大家都喜欢的彩妆1Za姬芮新能真皙美白隔离霜 35g￥62.00 最近69122人购买2美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml￥89.00 最近13610人购买3菲奥娜水漾CC霜40g￥59.90 最近13403人购买4DHC 蝶翠诗橄榄卸妆油 200ml￥169.00 最近16757人购买css样式body, p, ul, li {margin:0;padd...
黑马程序员前端 Vue3 小兔鲜电商项目——（七）详情页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-23 1781
黑马程序员前端 Vue3 小兔鲜电商项目——（七）详情页
秒杀项目(三)之商品展示&&CRUD
m0_53151031的博客
03-19 2835
一、搭建商品展示页面 1、搭建商品展示的页面 二、商品展示 三、搜索功能 四、对话框 五、增加、修改、删除功能的实现
html布局_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）
weixin_39930557的博客
11-22 870
简介最近温习一下HTML5+CSS3的一些特性，准备找个高仿的目标，最后选择了某宝粉丝福利页面，因为这个页面包含的元素比较多。例如：头部品牌信息悬浮、商品属性、优惠券、商品类别等。实现效果实现效果设计思路如上图所示，页面共分为4个区域，分别为：1、商品图片区2、商品属性、优惠券区(包括：商品名称、价格、优惠情况等)3、推荐商品列表区4、浮动框备注：最后优化代码将商品图片区和商品属性、优惠券区合并为...
品优购商品详情页html代码记录
weixin_46427707的博客
06-17 8810
品优购商品详情页html代码
HTML实现淘宝图书购物车管理
qq_48516121的博客
11-28 2673
1.HTML程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>结算清单</title> <script src="js.js"></script> <link rel="stylesheet" href="qd.css"> </head> <body> <ta
HTML .CSS实现商品详情（detail）
热门推荐
qq_67519129的博客
06-15 2万+
HTML .CSS实现商品详情（detail）
html 常见的电商产品的展示
weixin_63159221的博客
12-11 3209
做电商网站时，避免不了的就是产品的展示，下面是我用html,css代码写的简单的电商产品的展示。
层次分析法讲义（含源代码&有详细注释&可直接运行）
01-06
源代码（可以跑通且有注释） 论文资料（比赛优秀论文以及自己初次写的）
NCRE-Python国二级教学课件+例题源代码+课后习题答案源代码
最新发布
02-27
这一份教学资源专门为准备参加Python国家二级考试的学生设计，涵盖了教学课件、例题源代码以及课后习题答案源代码。教学资源的内容主要分为以下几个部分： 首先是教学课件，其中包含了详细的教学目标、教学内容以及...
语言程序设计资料：Java例题-源代码.doc
09-17
语言程序设计资料：Java例题-源代码.doc
C语言经典例题100.rar_C语言：经典例题_c语言100例题_c语言例子_c语言例题_代码实现
09-22
C语言经典例题100道，包含题目及C语言代码实现。
LabWindows开发入门和进阶例题源代码.rar
09-02
LabWindows开发入门和进阶例题源代码
HTML+CSS仿写京东页面附代码（web前端大作业）
m0_62437669的博客
03-25 6573
学习前端时间不多，看了两晚上就开始赶实训作业，大家看看就行。相关资源可以在主页资源查看。
Vue电商平台项目（5）
qq_45330080的博客
08-29 543
Vue电商平台项目（5）
前端vue非常简单实用商品分类展示组件 侧边商品分类组件
chenchuang0128的博客
06-20 1140
前端vue非常简单实用商品分类展示组件 侧边商品分类组件 ， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?-- flist:第一级数组 slist：第二级数组 tlist：第三级数组 @click：点击事件 注意：下一级pid与上一级id对应关联 -->content: '点击条目 = 第二级sid = ' + sid + ' 第三级tid = ' + tid。name: '游戏手机',name: '拍照手机',name: '女性手机',
商城详情页HTML+CSS + js
W256999的博客
07-03 2063
【代码】商城详情页HTML+CSS。
visual c++ 6.0例题源代码可复制
08-02
是的，Visual C++ 6.0的例题源代码可以复制。在Visual C++ 6.0的集成开发环境（IDE）中，可以通过以下步骤来复制例题源代码： 1. 打开Visual C++ 6.0的IDE。 2. 在主界面上选择“文件”菜单。 3. 在“文件”菜单中选择“打开”选项。 4. 在打开文件对话框中，导航到存储有例题源代码的目录。 5. 选择源代码文件并点击“打开”按钮。 6. 源代码文件将在代码编辑器中打开。 7. 使用鼠标拖动以选择想要复制的代码行，或者使用快捷键Ctrl+A来选中整个文件的代码。 8. 选中代码后，可以使用鼠标右键点击选中的代码并选择“复制”选项，或者使用快捷键Ctrl+C来复制代码到剪贴板中。 通过上述步骤，您就可以复制Visual C++ 6.0例题源代码。您可以将复制的代码粘贴到其他文档编辑器中，也可以在Visual C++ 6.0中创建新的项目并将代码粘贴到项目中继续编辑和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员Fy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值