首页 > 其他分享> > 项目二：品优购电商项目

项目二：品优购电商项目

2021-08-07 09:35:12 作者：互联网

最近几天尝试做了一下品优购网站的几个页面，这篇博客补充介绍一些新知识点。

一、购物车板块制作。

效果图：

知识点：字体图标、定位、圆角边框

分析如下：

1.购物车板块是一个大盒子，里面的内容需要用一个链接和小盒子来完成。

2.a链接是行内元素，先a链接添加相关属性。

3.在a链接前后添加伪元素，创建字体图标，设置字体图标的样式。

4.右上角的样式给小盒子添加值，用圆角边框加背景颜色，然后使用定位将其定在需要的位置。

相关代码如下：

 <div class="shopping">
       <div class="cont">8</div>
       <a href="#">我的购物车</a>
</div>

.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标签。

<label>用于为输入控件定义文本标签（label）——即显示在输入控件旁边的说明性文字。

用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。不过，它为鼠标用户增强了可用性：当用户点击由<label>元素定义的文本标签时，与该文本标签关联的输入控件将获得焦点。

代码如下：

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        label {
            display: inline-block;
            width: 90px;
        }
    
    </style>
</head>

<body>
    <label for="">手机号:</label><input type="text"><br>
    <label for="">短信验证码:</label><input type="text"><br>
    <label for="">登陆密码:</label><input type="text"><br>
    <label for="">确认密码:</label><input type="text"><br>
</body>

</html>

效果如下：

但是这样文字却没有完全对齐，文字对齐可以使用全角输入法输入空格，这种方法有一定的局限性。

上图就是在手机号中间输入全角空格调整出来的，但是这样的方法不适用于字数较多的，例如下面的确认登录。可以使用letter-spacing调整字间距的属性

这里提供一个案例便于理解：

<head>
</head>
<style type="text/css">
.f6{
    text-align: center;  
    width: 6em; /*这个值是看最长能显示几个文字，如x，则为x em*/ 
}
.f5{
    letter-spacing:0.25em;  /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（6-5）/(5-1)=0.25em */ 
    margin-right:-0.25em;  /*同上*/
}
.f4{
    letter-spacing:0.67em;   
    margin-right:-0.67em;
}
.f3{
    letter-spacing:1.5em;   
    margin-right:-1.5em;
}
.f2{
    letter-spacing:4em;   
    margin-right:-4em; 
}
</style>
<body>
<div class="div1">
    <ul>
    <li><span class="f6">扣税凭证种类</span></li>
    <li><span class="f5">进项税性质</span></li>
    <li><span class="f4">项目名称</span></li>
    <li><span class="f2">部门</span></li>
    <li><span class="f3">报销人</span></li>
    </ul>
</div>
<body>

效果图：

原理：通过字间距来均匀分布每个字的间距，达到对齐效果。

以上就是在品优购项目中个人觉得值得总结的要点。

标签：em,文字,font,项目,添加,right,对齐,电商,品优购
来源： https://blog.csdn.net/weixin_45990864/article/details/119457896