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：不允许有浮动对象
代码示例：
二.今日任务
商品列表页面
1.创建外层div框架
2.利用ul li 给页面布局
一共八个图片，用八个li
-
-
-
-
-
-
-
-
3.添加图片，添加文字
收藏加入购物车 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;/*垂直对齐:居中*/
}三.今日难点
悦轩饼家蛋糕/芒果千层(900g)【无贺卡、巧克力牌、蜡烛、生日帽】
(1).内容过长，挤压图片位置，设置溢出隐藏
通过百度
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;/*文本溢出:省略号；*/(2).空白，不换行，也是通过百度查询
white-space: nowrap;/* 空白:不换行*/(3).图片文字居中对齐，通过百度
vertical-align: middle;/*垂直对齐:居中*/本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！