页面商品详细页面

木江..

已于 2022-06-17 11:02:35 修改

阅读量551

点赞数 2

文章标签： css css3 前端

于 2022-06-16 09:03:51 首次发布

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

版权

1.搭建页尾部框架（a,div,span,img,footer等）

（1）问题：如何是框架并列

方法：使两个div框架浮动并齐

（2）问题：如何把字体化线

方法：用text-decoration: line-through;"

2.用css样式美化头部（文字居中，字体颜色，大小，宽高等）

3.完成项目的内容

一、嵌套页头页脚
1、页头
<iframe class="inhead" src="head.html" width="1500px"></iframe>
2、页脚
<iframe class="infooter" src="footer.html"></iframe>
3、设置页头页脚样式
.inhead{
                height: 120px;
                border: 0;
            }
            .infooter{
                width: 1500px;
                height: 220px;
                border: 0;
                margin-top: -8px;
            }

二、商品详情
1、基本框架

（1）.（一个大的div包含两个小的div）
<div class="all">
            <div class="rr">

                </div>
            </div>
            <div class="zz">

            </div>
        </div>

（2）设置基本样式
.all{
                width: 100%;
            }
            .rr{
                width: 49%;
                height: 750px;
                float: left;
            }

2、左边页面
（1）一个大的div包含两个小的div，
（2）第一个小的div里添加图片。第二个小的div包含四个小的div，并在各个div里面添加图片
<div class="rr">
                <div class="top">
                    < img src="img/cake1_big.jpg"/>
                </div>
                <div class="bottem">
                    <div>
                        < img src="img/cake1_s1.jpg"/>
                    </div>
                    <div>
                        < img src="img/cake1_s2.jpg"/>
                    </div>
                    <div>
                        < img src="img/cake1_s3.jpg"/>
                    </div>
                    <div>
                        < img src="img/cake1_s4.jpg"/>
                    </div>
                </div>

（3）左边样式
.top img{
                width: 700px;
                height:600px;
                margin-left: 10px;
            }
            div .bottem img{
                float: left;                 -----浮动
                width: 100px;
                height: 100px;
                margin-top: 10px;
                margin-left: 60px;
                border-radius: 10px;        -----设置图片边框
            }
            div .bottem img:hover{            -----鼠标滑过显示边框
                border: 1px solid red;
            }

3、右边页面以及样式
（1）运用 div h span

4.实现步骤

首先用一个div把要实现的内容给括起来，再将div内部的页面分为左右两个部分，左边是一张大的图片和四个小的图片用div给括起来并且向左浮动，右边的内容因为浮动也会相应的位移到右边，右边的内容也用一个div个括起来，再根据给出的样本将内部的字体按钮等元素用a标签、p标签和span标签给括起来并在css中调整样式和位置，直到和样本中的内容做到基本一致

三.项目展示

<link rel="stylesheet" href="css/list3.css">
		<style>
			.top{width: 100%;border: 0;}
			
			.bottom{width: 100%;border: 0;
			}
			
		</style>
	</head>
	<body>
		<iframe src="top.html" class="top"></iframe>
		<div id="big">
			<div id="left">
			<div class="bigtu"><img src="img/cake1.jpg" alt=""></div>
			<div id="tu">
				<div class="smalltu"><img src="img/cake1_s1.jpg" alt=""></div>
				<div class="smalltu"><img src="img/cake1_s2.jpg" alt=""></div>
				<div class="smalltu"><img src="img/cake1_s3.jpg" alt=""></div>
				<div class="smalltu"><img src="img/cake1_s4.jpg" alt=""></div>
				<div style="clear: both;"></div>
			</div>
			</div>
			<div id="right">
				<div style="margin-left: 50px;margin-top: -25px;"><h2>提拉米苏(约2磅)</h2></div>
				<div id="sb">
					<p><span style="font-size: 12px;" class="sm">售价</span>
					<span style="color: red;font-size: 20px;">￥198</span>
					<span style="font-size: 12px;margin-left: 30px;">市场价</span>
					<span style="font-size: 12px;text-decoration: line-through;">￥338</span>
					<span style="float: right;font-size: 12px;margin-right: 20px;margin-top: 15px;">已售
					<span style="color: red;">6264</span>件</span>
					</p>
					<p>
						<span style="font-size: 12px;" class="sm">材料</span>
						<span style="font-size: 14px;">鸡蛋，奶油，小麦粉，芒果，榴莲肉，巧克力，干酪</span>
					</p>
					<p>
						<span style="font-size: 12px;" class="sm">包装</span>
						<span style="font-size: 14px;">一次性蛋糕用具1套</span>
					</p>
					<p>
						<span style="font-size: 12px;" class="sm">备注</span>
						<span style="font-size: 14px;">品牌：悦轩饼家</span>
					</p>
				</div>
				<div style="margin-left: 50px;" id="xb">
					<p>配送说明</p>
					<p>北京，上海，广州，深圳，天京 重庆，南京，长沙</p>
					<p>配送至</p>
					<p>郑州</p>
					<p>说明</p>
					<p>深圳大鹏新区不配送</p>
				</div>
				<p style="font-size: 12px;margin-left: 50px;">选择</p>
				<div style="margin-left: 50px;" id="but1">
					<a href=""><span>2磅</span></a>
					<a href=""><span>3磅</span></a>
					<a href=""><span>4磅</span></a>
				</div>
				<div style="margin-left: 50px;margin-top: 50px;" id="but2">
					<a href=""><button style="color: #FF8376;background-color: #FFF0EC;">加入购物车</button></a>
					<a href="https://i.chaoxing.com/base?t=1655267240482"><button style="color: white;background-color: #FF734C;">立即购买</button></a>
					
				</div>
			</div>
		</div>
		<iframe src="bottom.html" class="bottom" style="display: block;"  scrolling="no"></iframe>
	</body>

body{
				margin: 0;
				padding: 0;
			}
			#big{
				
				width: 100%;
				
				
			}
			#left{
				
				width: 49%;
				height: 700px;
				
				float: left;
				
				
			}
			#right{
				
			height: 700px;
				width: 49%;
			float: left;
			
			}
			.bigtu img{
				width: 700px;
				height: 500px;
				 border-radius: 10px;
			}
			.smalltu img{
				width: 120px;
				height: 120px;
				float: left;
				 border-radius: 10px;
			}
			#tu div img{
				margin-left: 40px;
				margin-top: 10px;
				
			}
			.smalltu img:hover{
				border: 1px solid red;
			}
			.sm{
				margin-right: 30px;
			}
			#sb{
				
				margin-left: 50px;
				background-color: #F3F5F7;
				height: 150px;
				
			}
			#xb p{
				font-size: 12px;
				
			}
			#but1 span{
				border: 1px whitesmoke solid;
				display: inline-block;
				width: 35px;
				height: 25px;
				text-align: center;
				padding: 15px 10px;
				font-size: 14px;
				margin-left: 30px;
			}
			#but2 button{
				display: inline-block;
				width: 150px;
				height: 50px;
				margin-left: 30px;
				border-radius: 30px;
				border: 0;
				
			}
			#but1 a span:hover{
				border: 1px solid red;
				 border-radius: 10px;
			}