32.项目实战-品优购_品优购 csdn-CSDN博客

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128321394

项目源码

品优购

项目地址

https://youthddup.gitee.io/shopping_pygs

开发设计

按照功能进行模块区分，模块开发，提高代码的复用性
在这里插入图片描述

相关概念

1、网站favicon图标

favicon.ico一般用于作为网站标志的缩略图，显示在浏览器的地址栏或标签上
目前主要的浏览器都支持favicon.ico图标
步骤：

制作favicon图标
准备png图片，利用第三方网站转换如：http://www.bitbug.net
或者软件：
将图标放到网站根目录下
HTML页面引入favicon图标

<link rel="shortcut icon" href="/favicon.ico" />

小技巧：
图标出不来：试试清除浏览器缓存ctrl+f5

2、网站TDK三大标签SEO优化

SEO:搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度优化，帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度
页面必须有三个标签用来符合SEO优化

title网站标题

建议：网站名（产品名）-网站的介绍（尽量不超过30个汉字）
由seo人员写

description网站说明

由seo人员写，前端留出标签位置

keyword关键字

页面关键词，最好限制为6-8个关键词，用英文逗号分割
由seo人员写

如京东：

在这里插入图片描述

模块划分

1 首页

快捷导航shortcut

头部模块header

logo模块

要符合seo优化：

logo里要先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1里再放一个链接，可以返回首页，将logo背景图给链接即可
为了搜索引擎收录，链接里要放文字（网站名称），可以用：
（1）text-indent移到盒子外面text-indent:-9999px,然后overflow:hidden
(2)直接给font-size:0;就看不到文字了
最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

search搜索模块

input要清除默认边框border和边框线outline

button,
input {
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

hotwords热词

shopcars购物车模块

购物车产品数量，不给盒子宽度，让盒子宽度随着数量的大小自动伸缩，8，888888等

.count{
    position: absolute;
    top:-7px;
    left: 105px;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
    color: #fff;
    background-color: #c81623;
    border-radius: 8px 8px 8px 0;
}

在这里插入图片描述

导航栏模块nav

dropdown

navitems导航栏组

footer页面底部模块

mod_service服务模块

精灵图

mod_help帮助模块

mod_copyright版权模块

家用电器模块

main主模块

focus主图模块

newsflash快报模块

news-hd 快报模块

news-bd快报模块

lifeservice生活服务模块

块元素不能用text-align：center

.news .lifeservice ul li{
    float: left;
    width: 61px;
    height: 70px;
    border: 1px solid #dfdbdb;
    text-align: center;
}
.lifeservice ul li i{
    display: inline-block;
    margin-top: 14px;
    width:24px;
    height: 28px;
    background-color: pink;
    background: url(../images/icons.png) no-repeat -17px -14px;
}

bargin折扣模块

recommand推荐模块

楼层区floor制作

floor的高度由内容决定，不用给固定高度

1层家用电器模块jiadian

选项卡tab_list和tab_content

在这里插入图片描述
一般情况下，a标签如果包含有宽度的盒子，需要将a转为块级元素

2 列表页

秒杀sk

列表导航sk_list

列表内容sk_continer

sk_hd列表内容标题

sk_bd列表内容主体

高度用内容撑开，不要写死高度，因为不知道有多少商品。
要清除浮动，否则因为没有设置height的原因，footer会顶上去

<ul class="clearfix">
                    <li>
                        <img src="./upload/xiaomi.jpeg" alt="">
                    </li>
                    <li><img src="./upload/xiaomi.jpeg" alt=""></li>
                    <li>3</li>
                    <li>4</li>
                </ul>

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

消除盒子边框之间视觉上的缝隙：
在这里插入图片描述
原因，li设置边框时会有默认的1px的边框，因此两个盒子之间会有一个缝隙

.sk_continer .sk_bd ul li{
    float: left;
    width: 289px;
    height: 461px;
    border: 1px transparent solid;
    margin: -1px 0;/*消除盒子边框重叠*/
    margin-right: 13px;
}

在这里插入图片描述
消除进度条的缝隙：

原因：子盒子和父盒子之间有一个默认的距离

.sk_continer .sk_bd ul li .bar_in{
    width: 100px;
    height: 11px;
    background-color: red;
    border-radius: 6px 0 0 6px;
    margin-top: -0.5px;
}