2022.6.15日志

一.知识点总结

1、无序列表<ul></ul>

2、浮动

作用：排版更整齐

原理：两个盒子上下排列，给第一个盒子加float，第二个盒子就会附上去。

clear：结束浮动

3、鼠标悬浮时用

.span2:hover{
    border-color: #FF6439;
}

4、边角弧度

/* 边角弧度 */
 

border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;

二.今日作业

商品详情

1.创建外部div框架

<div class="big1">
</div>
<div class="product-info">
</div>

2.先添加左部分图片

<div class="b1">
				<img src="img/cake1.jpg" class="t1" style="margin-left: 200px; margin-top: 100px;">
			</div>
			<div class="b2">
				<img src="img/cake1_s1.jpg" style="margin-left: 235px;">
				<img src="img/cake1_s2.jpg" style="margin-left: 25px;">
				<img src="img/cake1_s3.jpg" style="margin-left: 25px;">
				<img src="img/cake1_s4.jpg" style="margin-left: 25px;">
			</div>

添加css样式

.big1 .b1{

	width: 700px;
	height: 600px;
}
.big1 .b1 img{
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.b2{
	padding-top: 30px;
}
.b2 img{
border: 1px solid #D9D9D9;
	width: 80px;
	height: 80px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.b2 img:hover{
	border-color:#FF6439;
	 /* transform: scale(5);放大5倍 */
}
.big1{
	float: left;
}

效果

 3.添加右半部分div，添加文字，按钮

<div class="product-info">
							<p class="product-info-Tlms" style="font-weight: bold;	font-size: 25px;margin-top: 0px;">提拉米苏(约2磅)</p>
						<div class="product-info-Sj">
							<p>
								<span style="color: darkgray;font-size: 13px;">售价</span>
								<span style="color: #FF734C;font-weight: bold;font-size: 30px;margin-left: 20px;">￥198</span>
								<span style="color: darkgray;margin-left: 20px;font-size: 13px;">市场价￥338</span>
								<span style="font-size: 15px;margin-left: 120px;font-size: 10px;">已售</span>
								<span style="color: #FF734C;font-size: 10px;">6264</span>
								<span style="color: darkgray;font-size: 10px;">件</span>
							</p>
						</div>
						<div class="product-info-Cl">
							<p>
								<span style="color: darkgray;font-size: 13px;">材料</span>
								<span style="margin-left: 24px;font-size: 13px;">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
							</p>
							<p>
								<span style="color: darkgray;font-size: 13px;">包装</span>
								<span style="margin-left: 24px;font-size: 13px;">一次性蛋糕用具</span>
							</p>
							<p>
								<span style="color: darkgray;font-size: 13px;">备注</span>
								<span style="margin-left: 24px;font-size: 13px;">品牌：悦轩饼家</span>
							</p>
						</div>
						<div id="site">
									<span>配送说明</span>
									<p>北京、上海、深圳、广州、郑州</p>
									<span>配送至</span>
									<p>郑州</p>
									<span>说明</span>
									<p>深圳大鹏新区暂时不送</p>
									<p style="color: darkgray;">选择</p>
									<div class="weight">2磅</div>
									<div class="weight" style="margin-left: 30px;">3磅</div>
									<div class="weight" style="margin-left: 30px;">4磅</div>
								<br/>
									<p class="btn">
										<a href="cart.html"><input type="button" value="加入购物车"></a>
										<a href="purchase.html"><input type="button" value="立即购买"></a>
									</p>
								</div>
					</div>

添加css样式

.product-info{
	width: 480px;
	height: 650px;
	float: left;
	margin-left: 80px;
	margin-top: 100px;
}
/* 提拉米苏字体样式 */
.product-info-Tlms>p{
	border: 1px solid red;
}
/* 售价那一行 */
.product-info-Sj{
	background-color: #F3F5F7;
}
/* 材料、包装、备注那三行 */
.product-info-Cl{
	background-color: #F7F9FA;
	margin-top: -20px;
}
#site .weight:hover{
	border: 1px solid red;
}
#site span{
	color: darkgray;
}
#site input{
	border: 0;
	width: 150px;
	line-height: 40px;
	color: white;
    border-radius: 25px	;
	background-color: coral;
	
}
#site .btn{margin-top: 50px;}
.weight{
	float: left;
	border: 1px solid white;
	width: 50px;
	line-height: 40px;
	text-align: center;
}

效果

 

 三.今日难点

1.字体中间加横线

text-decoration: line-through;/*字体中间加横线*/

 2.设置圆角

border-radius: 10px;

 3.划过时加边框

border-color:#FF6439;