2022.6.14日志

一.今日知识点总结

1.浮动

（1）CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

（2）元素怎样浮动？

a.元素的水平方向移动，意味着元素只能左右移动而不能上下移动

b.一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

c.当框一向右浮动时，它脱离文档并且向右移动，直到它的右边缘碰到包含框的右边缘

d.当框一向左浮动时，它脱离文档并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框二从视图中消失；如果把所有三个框都向左移动，那么框一向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框

e.如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其他浮动元素"卡住"

（3）在CSS中，我们通过float属性实现元素的浮动

（4）实例——创建水平菜单

2.清除浮动-使用clear

（1）语法：clear：none | left | right | both

（2）取值：

none：默认值.允许两边都可以有浮动对象

left：不允许左边有浮动对象

right：不允许右边有浮动对象

both：不允许有浮动对象

代码示例：

<div style="clear: both;"></div>

二.今日任务

商品列表页面

 1.创建外层div框架

<div class="big">
			<div class="content">
</div>
		</div>

2.利用ul li 给页面布局

 一共八个图片，用八个li

<ul class="clear">
					<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>

3.添加图片，添加文字

<li>
						<a herf="detail.html" target="_blank">
							<img src="img/cake1.jpg" >
						</a>
						<p class="q">￥198.00</p>
						<p class="title">悦轩饼家蛋糕/提拉米苏(约2磅)</p>
						<p class="s">
							<a href="#" class="collection">
								<span></span>收藏
							</a>
							<a href="cart.html" class="add-cart" style="margin-left: -5px;">
								<span></span>加入购物车
							</a>
						</p>
					</li>

4.添加css样式修改美化首页

ul li{
	list-style:none
}
.big{
	width: 100%;
	padding-bottom: 200px;
}
.content{
	width: 1300px;
	height: auto;
	margin: 0 auto;
	padding-top: 50px;
	margin-top: 50px;
}
.content ul li{
	width: 282px;
	padding: 10px 10px 10px 10px;
	box-sizing: border-box;
	float: left;
	margin-right: 29px;
	margin-bottom: 18px;
}
.content ul li:nth-child(4n){
	margin-right: 0;
}
.content ul li img{
	width: 100%;
}
.content ul li .q{
	color: #ff6a00;
	font-size: 12px;
	font-weight: bolder;/*字体粗细:加粗；*/
	margin-top: 8px;
}
.content ul li .title{
	font-size: 12px;
	margin-top: 10px;
	color: #737373;
	margin-bottom: 14px;
	overflow: hidden; /*溢出隐藏*/
	text-overflow: ellipsis;/*文本溢出:省略号；*/
	white-space: nowrap;/* 空白:不换行*/
}
.content ul li .s a{
	display: inline-block;/*显示:内嵌块*/
	border: 1px solid #d9d9d9;
	width: 48%;
	padding: 4px 0;
	font-size: 12px;
	text-align: center;
}
.content ul li .s .collection{
	color: #888;
	text-decoration:none
}
.content ul li .s .collection span{
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../img/ico_heart_d.png);
	margin-right: 10px;
	vertical-align: middle;/*垂直对齐:居中*/
}
 ul li .s .add-cart{
	color: #000;
	text-decoration: none;
}
.content ul li .s .add-cart span{
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../img/ico_cart_d.png);
	margin-right: 10px;
	vertical-align: middle;/*垂直对齐:居中*/
}

三.今日难点

<p class="title">悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】</p>

(1).内容过长，挤压图片位置，设置溢出隐藏

通过百度

overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;/*文本溢出:省略号；*/

(2).空白，不换行，也是通过百度查询

white-space: nowrap;/* 空白:不换行*/

(3).图片文字居中对齐，通过百度

vertical-align: middle;/*垂直对齐:居中*/