【HTML | 模板】自定义商品列表 (商品表格)

最新推荐文章于 2023-08-05 14:02:35 发布

诗小呐

最新推荐文章于 2023-08-05 14:02:35 发布

阅读量9k

点赞数 18

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

本文链接：https://blog.csdn.net/qq_25989681/article/details/109768766

版权

本文介绍了如何使用HTML和CSS创建一个自定义的商品列表，包括商品表格的布局和样式设计，借助BootStrap实现响应式效果。

摘要由CSDN通过智能技术生成

预览图
在这里插入图片描述

项目结构
在这里插入图片描述
下载BootStrap 样式：bootstrap.min.css

============================= HTML

<html>

<head>
<meta content="text/html; charset=UTF-8">
<title>菜单</title>
<!--导入 BootStrap CSS-->
<link rel="stylesheet"
	href="http://localhost:/Web_meiTuan/css/bootstrap.min.css">
</head>

<style>
/* 按钮 购买 */
.fileinput-button {
    
	position: relative;
	display: inline-block;
	background: rgba(105, 105, 105, 0.7); /* 背景色、透明度 */
	border: 1px solid rgba(23, 23, 23, 0.4); /* 鼠标悬浮时，边框样式 */
	border-radius: 20px; /* 圆角半径 */
	padding: 1px 30px; /* 边距：高度、宽度 */
	overflow: hidden;
	color: white;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
	font-size: 20px;
}
</style>

<body>
	<div align="center">

		<!-- 【导航栏】 -->
		<div align="center" style="margin-top: 20px;">
			<a href="http://localhost/Web_meiTuan/index.jsp">主页</a>
		</div>

		<!-- 【自定义 商品 列表】 -->
		<div>

			<!-- 第1行 商品 -->
			<div style="display: table; border-spacing: 30px;">

				<!-- 商品1 -->
				<div
					style="width: 200px; height: 300px; background-color: #DCDCDC; display: table-cell;">
					<!-- 图片 -->
					<img style="width: 200px; height: 200px"
						src="http://localhost/Web_meiTuan/img/p1.png">
					<div
						style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
						<!-- 菜品名称 -->
						<div style="height: 5px;"></div>
						<div>
							<label style="font-size: 20px">菜品名称</label>
						</div>
						<!-- 价格 -->
						<div style="margin-top: 1px">
							<label style="color: #696969">10元</label>
						</div>
						<!-- 购买 -->
						<div style="margin-top: 1px">
							<input type="button" value="+" class="fileinput-button">
						</div>
					</div>
				</div>

				<!-- 商品1 -->
				<div
					style="width: 200px; height: 300px; background-color: #DCDCDC; display: table-cell;">
					<!-- 图片 -->
					<img style="width: 200px; height: 200px"
						src="http://localhost/Web_meiTuan/img/p1.png">
					<div
						style="width: 100%; height: