项目的购物车页面

最新推荐文章于 2024-07-05 20:20:47 发布

木江..

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量413

点赞数

文章标签： html css webview

本文链接：https://blog.csdn.net/weixin_71809786/article/details/125327058

版权

一、知识点
1、table标签

（1）包含子标签：

<caption>：表的标题（可选的），表格内容的描述信息

<tr>:表的行，包括表头和表的数据行

<td>:表的列

<th>:表头（可选的）会用黑体显示

(2)常用属性

border-spacing: 0px; --去除边框线

rowspan--行合并 colsoan --列合并

border-bottom: 1px dashed lightgray; --加小波浪线

二、页面布局
1、页头页脚

2、分成上下两个部分来实现页面用一个大的div来包含这两个部分

（1）上部分---运用table标签来实现

1、订单列表行头

2、添加图片内容设置样式（举例其一）

注：text-decoration: line-through 在字体上面添加一个斜杠效果

<tr class="w">
<td>
< img class="tt" src="img/ico_checkout.png"/>
</td>
<td>
< img class="tp" style="margin-top: 50px;" src="img/cake1.jpg"/>
</td>
<td style="font-size:12px;margin-right: 20px;">[悦轩饼家蛋糕]榴芒双拼（约2磅）-双拼蛋糕</td>
<td style="text-decoration: line-through;color: #727A81;text-align: center;">￥298</td>
<td style="text-align: center;">￥198</td>
<td style="text-align: center;">2</td>
<td style="color: #727A81;text-align: center;">删除</td>
</tr>

（2）下部分---运用div来实现

1、内容（div+a标签+span标签）

2、设置样式

（1）例如：边框线 border: 1px solid #DADADA; 字体样式 font-weight: bold;

3.完成步骤

首先根据样本分析出这个购物车页面是固定不变的，所以用table表格来布局比较合适，根据样本分析出可以将表格分为四行七列来布局，但其中的虚线两头要空出一部分，这个用table很难实现，只能放弃实现这个效果，但是可以用再border-bottom:dashed设置下边框线为虚线用text-align:center使表格中每个格子的元素居中，在对比样本调整行高表格就基本完成了

再用三个div(一个大的div里面套两个div)来对结算一行的位置调整就能完成

5.项目展示

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/list4.css">
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<iframe src="top.html" class="top"></iframe>
		<div id="big" style="border: 1px solid whitesmoke;background-color: #FFFFFF;width: 1300px;">
			<table  style="margin: auto;border: 1px solid #dadada;margin-top: 10px;" >
				<tr>
					<th></th>
					<th>商品名称</th>
					<th></th>
					<th>市场价</th>
					<th>订购价(8折)</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<tr>
					<td style="width: 50px;"><img src="img/ico_checkout.png" alt="" class="img1"></td>
					<td><img src="img/cake1.jpg" alt="" class="img2"></td>
					<td style="font-size: 14px;color: #727a81;padding-left: 10px;">[悦轩饼家蛋糕]榴芒双拼(约2磅)—双拼蛋糕</td>
					<td class="td" style="color: #727a81;text-decoration: line-through;">￥298</td>
					<td class="td" >￥198</td>
					<td class="td" >2</td>
					<td class="td" style="color: #727a81;" >删除</td>
				</tr>
				<tr>
					<td><img src="img/ico_checkout.png" alt="" class="img1"></td>
					<td><img src="img/cake2.jpg" alt="" class="img2"></td>
					<td style="font-size: 14px;color: #727a81;padding-left: 10px;"">[悦轩饼家蛋糕]芒果千层(900g)</td>
					<td class="td"  style="color: #727a81;text-decoration: line-through;">￥298</td>
					<td class="td" >￥198</td>
					<td class="td" >1</td>
					<td class="td"  style="color: #727a81;">删除</td>
				</tr>
				<tr>
					<td><img src="img/ico_unchecked.png" alt="" class="img1"></td>
					<td><img src="img/cake3.jpg" alt="" class="img2"></td>
					<td style="font-size: 14px; color: #727a81;padding-left: 10px;"">[悦轩饼家蛋糕]榴莲香雪(约2磅)━榴莲蛋糕</td>
					<td class="td"  style="color: #727a81;text-decoration: line-through;">￥298</td>
					<td class="td" >￥198</td>
					<td class="td" >2</td>
					<td class="td"  style="color: #727a81;">删除</td>
				</tr>
			</table>
			<div id="xia" style="border: 1px solid #dadada;width: 1250px;margin-top: 30px;height: 50px;margin-left: 25px;">
				
				<div class="s">
					<span>应付金额：</span>
					<span style="color: #FF6A00;font-size: 18px;font-weight: bold;border: 1px solid white;">￥565</span>
					<button style="color: white;font-size: 18px;font-weight: bold;background-color: #FF6A00;border-color: #FF6A00;">去结算</button>
				</div>
			</div>
		</div>
		<iframe src="bottom.html" class="bottom" style="display: block;"  scrolling="no"></iframe>
	</body>

.top{width: 100%;border: 0;padding-left: 200px;}
			
			.bottom{width: 100%;border: 0;
			
			}
			.img1{
				width: 20px;
				height: 20px;
			}
			.img2{
				width: 150px;
				height: 150px;
				
			}
			table{
				border-spacing: 0px;
			}
			.s{
				float: right;
			}
			button{
				height: 50px;
				width: 120px;
				display: inline-block;
				
				
				
				text-align: center;
				padding: 10px 10px;
			}
			.td{
				width: 200px;text-align: center;
			}
			td{
				height: 180px;
			}
			table tr th{
				line-height: 50px;
				background-color: lightgray;
			}
			table td{
				border-bottom: 1px dashed lightgray;
			}
			.s{
				height: 50px;
			}
			#big{
				margin: auto;
				
			}