项目二：品优购电商项目
最近几天尝试做了一下品优购网站的几个页面，这篇博客补充介绍一些新知识点。
一、购物车板块制作。
效果图：
知识点：字体图标、定位、圆角边框
分析如下：
1.购物车板块是一个大盒子，里面的内容需要用一个链接和小盒子来完成。
2.a链接是行内元素，先a链接添加相关属性。
3.在a链接前后添加伪元素，创建字体图标，设置字体图标的样式。
4.右上角的样式给小盒子添加值，用圆角边框加背景颜色，然后使用定位将其定在需要的位置。
相关代码如下：
8
我的购物车
.shopping{
position: absolute;
top: 0;
right: 90px;
width: 138px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #dfdfdf;
}
.shopping .cont{
position: absolute;
display: inline-block;
top: -6px;
right: 20px;
color: #fefefe;
height: 12px;
width: 12px;
line-height: 12px;
padding-left: 2px;
font-size: 12px;
border: 1px solid #e60012 ;
border-radius: 10px 10px 10px 0;
background-color: #e60012;
}
.shopping a{
position: absolute;
top: 0;
left:30px;
color: #666;
font-size: 12px;
line-height: 36px;
}
.shopping a::before{
content: "";
display: block;
position: absolute;
top: 10px;
left: -15px;
width: 20px;
height: 15px;
background: url(./images/icons.png) no-repeat -414px -89px;
}
.shopping a::after{
position: absolute;
top: 0px;
left: 80px;
font-family: 'icomoon';
content: '\e920';
}注意：
1.添加绝对定位后一定要添加相对定位来限制位置，该位置会跟随浏览器的改变而改变。
2.添加字体图标的步骤：
①在字体图标库中选好需要的图标，并下载到本地。
②解压文件夹，把font文件复制到该项目的目录路径下。
③将下载文件夹中的style.css中这部分复制到书写的css文件中。
④使用伪元素时一定要添加content属性。
⑤使用字体图标时要添加 font-family属性，要和前面css文件中的font-family值一致。
二、单行文字的溢出隐藏
在页面中我们经常会看到这种因为文字太长显示不出来使用省略号的情况，这种样式我们可以通过三部曲来实现。
知识点：溢出文字的隐藏
第一步：添加文字并设置宽度，且宽度要小于文字内容。
第二步： 让所有文字强制显示在一行里面，使用white-space: nowrap属性。
第三步：让溢出的文字隐藏，使用overflow:hidden属性。
第四步：让溢出的文字用省略号替代，使用text-overflow: ellipsis属性。
多行文字的隐藏具有一定的兼容性，适用于webkit浏览器或者移动端。
方法如下：
overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
webkt-line-clamp:2;
/*设置检索伸缩盒对象的子元素的排列方式*/
-wekit-box-orient:vertical;三、不同字数实现两端对齐
知识点：label标签、letter-sapcing属性
在页面中我们还经常遇到不同字数的两端对齐。这里有两个例子提供给大家。
第一种，有input框的对齐。
效果图：
这种所有框对齐的我们可以使用label标签。
用
代码如下：
Document
效果如下：
但是这样文字却没有完全对齐，文字对齐可以使用全角输入法输入空格，这种方法有一定的局限性。
上图就是在手机号中间输入全角空格调整出来的，但是这样的方法不适用于字数较多的，例如下面的确认登录。可以使用letter-spacing调整字间距的属性
这里提供一个案例便于理解：
- 扣税凭证种类
- 进项税性质
- 项目名称
- 部门
- 报销人
效果图：
原理：通过字间距来均匀分布每个字的间距，达到对齐效果。
四、给title前面加上小图标
效果图：
注意，添加的图标格式需为.icon格式
使用link引入。
代码如下：
品优购首页 以上就是在品优购项目中个人觉得值得总结的要点。