写小米商城时遇到的bug和一些样式写法

最新推荐文章于 2024-08-07 10:34:28 发布

粉色水杯

最新推荐文章于 2024-08-07 10:34:28 发布

阅读量263

点赞数 1

文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/linxuanasd/article/details/123815204

版权

本文详细记录了在开发小米商城页面时遇到的样式问题及其解决方案，包括三角形绘制、块级元素理解、box-shadow应用、inline-block元素使用、Font Awesome图标引入、文字省略、点击反馈效果实现、内容超出滚动以及清除底部边线的方法。通过这些实例，展示了CSS3和HTML在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我写的这部分是关于顶部的问题

color: '#fff';//错误
	color: #fff;

2.三角锋

在线ps做一个

这是我切的图，加了个背景色，可以看见

3.display: block;

块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；

.page-top .top-lt .down-box img{
	width: 88px;
	height: 88px;
	display: block;
	margin: 0 auto;
}

4.box-shadow: rgb(170,170,170) 0px 1px 5px;

rgb(170,170,170)=》颜色

0阴影水平偏移值（可取正负值）；
1px：阴影垂直偏移值（可取正负值）；
5px：阴影模糊值；

5.display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

6.只引用Font Awesome中的图标

<i class="fa-solid fa-angle-down"></i>

.fa-solid fa-angle-down:before {
    content: '\f107';
    font-family: FontAwesome;
}

7.字很长，进行省略

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

8.点击图片，颜色加深，我点击的是x

.page-top .pop .list .num img{
	float: right;
	opacity: 0.5;
	width: 10px;
	height: 10px;
}
.page-top .pop .list .num:hover img{
	float: right;
	opacity: 1;
	width: 10px;
	height: 10px;
}

图片我放在这里啦有需要自取

9.超出滚动

max-height: 450px;
overflow-y:scroll ;

10.最后一根线的去除

.page-top .pop .list li:last-child{
	border: none;
}