前端学习-品优购实践

weixin_57896572

于 2022-10-21 20:05:32 发布

阅读量233

点赞数

文章标签：前端学习 css3 html5

本文链接：https://blog.csdn.net/weixin_57896572/article/details/127238917

版权

1. li 后面的小竖线

1）用 li 的边框实现

float: left;
line-height: 12px;
padding: 0px 15px;
margin-top: 8px;
height: 12px;
border-right: 1px solid #666666;

设置好外边距和内边距以及高度，来控制小短线的高度。

2）用多个 li 来实现

给 li 设置高度，然后给偶数的 li 设置为宽度为1px，高度指定，颜色指定，再加上边距即可。

width:1px;
height:12px;
background-color:#666;
margin:9px 15px 0;

3）用伪元素实现

给伪元素设置宽度和高度，并用定位的方式将其定位到右端

/* 给前3个li加右边灰色边框线*/
ul li:nth-child(-n+3)::after {
    content:'';
    position:absolute;
    width:1px;
    height:134px;
    top:10px;
    right:0;
}

2 LOGO SEO 优化

为了优化网页的SEO，书写LOGO时，要遵循以下规则：

logo 里面先放一个h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要；
h1 里面再放一个链接，可以返回首页的，把Logo 背景图片给链接即可；
为了搜索引擎收录网站，在链接里面要放文字（网站名称），但是文字不要显示出来；
方法1：text-indent 移到盒子外面，即：text-indent:-9999px，然后overflow:hidden;
方法2：直接设置font-size:0;
最后给链接设置title属性，让鼠标放到logo上时可以看到提示文字。

<div class="logo">
    <h1><a href="index.html" title="品优购商场">品优购商城</a></h1>
</div>

.logo {
    position: absolute;
    width: 171px;
    height: 61px;
}

.logo a {
    /*将a转换成块级盒子，可以设置宽度和高度*/
    display: block;
    width: 171px;
    height: 61px;
    /*将logo背景图片给a*/
    background: url(../images/logo.png) no-repeat;
    font-size: 0;
}

3 购物车小圆点

一般用绝对定位，子绝父绝也是可以的。通常不会设置宽度，因为数量会变化，所以设置为宽度随着内容变化。通常用 i 。

<i class="count">8</i>

.count {
    position: absolute;
    top: -8px;
    /* 通常设置左对齐，这样数字多了会往右边走*/
    left: 105px;
    /* 小红点是随着数量变化的，所以不要给宽度，让盒子内容自己撑开 */
    height: 14px;
    line-height: 14px;
    /* 好看些 */
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
    background-color: #e60012;
    color: #fff;
}