品优购静态网页项目(1)

追梦杰尼龟

已于 2022-03-25 15:58:45 修改

阅读量517

点赞数 1

分类专栏： css 文章标签： css css3 html

于 2022-03-24 22:14:08 首次发布

本文链接：https://blog.csdn.net/Czc1357618897/article/details/123721439

版权

css 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

品优购项目--有所收获的部分

- 目前完成的部分

目前完成的部分

在这里插入图片描述

一：快捷导航部分

在这里插入图片描述
代码：
html:

	<!-- 快捷导航部分 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎你! &nbsp;</li>
                    <li><a href="#">请登录 &nbsp;</a><a href="#" class="style_red">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                    <ul>
                        <li>我的订单</li>
                        <li></li>
                        <li class="arrow-icon">我的品优购 </li>
                        <li></li>
                        <li>品优购会员 </li>
                        <li></li>
                        <li>企业采购</li>
                        <li></li>
                        <li class="arrow-icon">关注品优购</li>
                        <li></li>
                        <li class="arrow-icon">客户服务</li>
                        <li></li>
                        <li class="arrow-icon">网站导航</li>
                    </ul>
            </div>
        </div>

css:

/* 快捷导航 */
.shortcut {
    font-size: 12px;
    color: #666666;
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
/* 添加浮动 */
.fl {
    float: left;
}
.fr {
    float: right;
}
.shortcut ul li {
    float: left;
}
/* 样式红色 */
.style_red {
    color: #c81623;
}
/* 选择偶数的li */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    margin: 9px 14px 0;
    background-color: #666;
}
/* ::after双伪元素 给li后面设置小三角*/
.arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

在这里插入图片描述

对于这一模块，用的是无序列表，竖线也是用li制作，加上竖线一共是13个li，对于选择偶数li用的是CSS3新增的结构伪类选择器，
nth-child（n）匹配父元素中的第n个子元素
n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素
n可以是关键字：even偶数，odd奇数
n可以是公式：2n-1（偶数）， 2n+1（奇数）， n+5（从第5个开始到最后）…

还有就是部分有下三角这个符号用的是字体图标
给所需要的li加上arrow-icon的类名，然后用::after双伪元素给li后面设置小三角
使用::after双伪元素一定要有content: ‘’;属性
对于使用字体图标也需要字体样式font-family属性

二：header头部部分

在这里插入图片描述

头部部分的logo模块
在这里插入图片描述
html:

 <!-- logo部分制作 -->
        <div class="logo">
            <!-- logo SEO优化 h1标签里面放a标签 a标签里面再引入logo -->
            <h1><a href="index.html" title="品优购">品优购</a></h1>
        </div>

这里并不是直接使用img标签引入图标
为了网站SEO优化，提高logo的优先级，需要在h1标签中放a标签再引入logo ，a标签是为了当点击logo时候能够回到首页，因为这一块都属于公共样式

购物车部分
在这里插入图片描述
html:

<!-- 购物车部分 -->
        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>

css:

/* 购物车部分 */
.shopcar {
    position: absolute;
    top: 26px;
    right: 60px;
    width: 141px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.shopcar::before {
    margin-right: 5px;
    color: #c81623;
    font-size: 13px;
    content: '\e93a';
    font-family: 'icomoon';
}
.shopcar::after {
    margin-left: 5px;
    content: '\e920';
    font-size: 15px;
    font-family: 'icomoon';
}
.count {
    position:absolute;
    line-height: 14px;
    top: -5px;
    left: 105px;
    height: 14px;
    color: #fff;
    background-color: #e6002e;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
    
}

首先是需要有一个类名为shopcar的盒子
在大盒子之中分三个部分，左边的图标，中间的文字和右边的小三角
这里对于左右的图标使用字体图标，使用::before和::after双伪元素选择器较为适合
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而优化HTML结构
但需要注意以下几点
1.before和after创建一个元素，但是属于行内元素
2.before和after必须有content属性
3.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
4.伪元素选择器和标签选择器一样，权重为1

对于右上角的小红点自然选择用定位
子盒子.count设置绝对定位，父盒子.shopcar设置相对定位
值得说的是对于小红点并不是圆型，需要设置boder-radius属性不给左下角设置属性值，其余三个角设置宽度一半的属性值即可

三：首页Main主要内容模块

在这里插入图片描述

轮播图部分
在这里插入图片描述
html:

<div class="focus">
                <ul>
                    <li class="promo">
                        <img src="upload/图层179.png" alt="">
                        <a href="#" class="prev"></a>
                        <a href="#" class="next"></a>
                        <ul>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </li>
                </ul>
            </div>

css:

/* 焦点图部分 */
.focus {
    float: left;
    width: 720px;
    height: 455px;
}
/* 轮播图 */
.focus .promo {
    /* 父盒子设置相对定位 */
    position: relative;
}
/* 左边小箭头 */
.focus .prev::before {
    /* 使用伪元素选择器 */
    position: absolute;
    /* 定位到父盒子中间的固定公式 */
    top: 50%;
    left: 0;
    margin-top: -25px;
    font-size: 30px;
    width: 50px;
    height: 50px;
    content: '\e91f';
    font-family: 'icomoon';
    /* 设置透明 */
    background: rgba(0,0,0,.3);
    /* 让左侧三角的盒子有弧度 */
    border-radius: 0 25px 25px 0;
}
/* 右边小箭头 */
.focus .next::after {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -25px;
    font-size: 30px;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,.3);
    border-radius: 25px 0 0 25px;
    content: '\e920';
    font-family: 'icomoon';
}
/* 下面选择点的父盒子 */
.promo ul {
    position: absolute;
    /* 定位到底部的中间 */
    left: 50%;
    margin-left: -155px;
    bottom: 25px;
    width: 310px;
    height: 20px;
    border-radius: 15px 15px 15px 15px;
    /* 设置半透明 */
    background: rgba(0,0,0,.3);
}
/* 小圆点 */
.promo ul li {
    /* 设置浮动在一行之中 */
    float: left;
    width: 16px;
    height: 16px;
    border-radius: 8px 8px 8px 8px;
    margin: 2px 10px;
    background: rgba(255,255,255,.3);
}
/* 结构伪类选择器选择第一个元素 */
.promo ul li:first-child {
    background-color: #c81623;
}

对于轮播图就比较经典了，之前有专门写过一篇博客
但这次相对上次代码就更加优化了，也使用到了很多新的选择器和新的属性
大部分解释都在代码的注释之中了
主要是使用了::before和::after伪元素选择器和结构伪类选择器

lifeservice模块
在这里插入图片描述
html：

                <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>机票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>加油卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i></i>
                            <p>火车票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i></i>
                            <p>理财</p>
                        </li>
                        <li>
                            <i></i>
                            <p>礼品卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>白条</p>
                        </li>
                    </ul>
                </div>

css：

/* .lifeservice部分 */
.lifeservice {
    height: 209px;
    border: 1px solid #ccc;
    border-top: 0;
    /* 因为一行四个li会超出lifeservice部分 所以将超出的隐藏 */
    overflow: hidden;
}
.lifeservice ul {
    /* 因为想要一行装够4个 那么给父盒子ul足够四个li的宽度即可 */
    width: 260px;
}
.lifeservice ul li {
    float: left;
    text-align: center;
    width: 64px;
    height: 71px;
    /* 只需要给每个li右边和下边的boder就可以了 */
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.lifeservice ul li i {
    display: inline-block;
    margin-top: 13px;
    width: 20px;
    height: 25px;
    background-color: #c81623;
    background: url(../images/images/icons.png) no-repeat -18px -16px;
}

对于这一模块，三行四列较为整齐，自然就想到是用到无序列表去做，给li设置宽度和高度然后添加浮动即可
但值得指出来的是边框，只需要给li右边框和下边框，就可以达到所需要的效果
还有就是如果所测量的li因为宽度不够而导致一行只能放三个的问题，那是因为父盒子不够放在四个的宽度，又因为浮动导致自动放到下一行
那么就需要给父盒子ul设置足够放在四个li的宽度，那么又回出现一个问题，每一行最后边就会有一小部分溢出，但又不想要那一小部分显示出来，那就需要设置overflow: hidden;属性来隐藏溢出的部分

对于每一个li里面的图片，这里使用到了精灵图的方式来引入
那么为什么需要精灵图？

一个网页之中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
即将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

四：底部footer部分

在这里插入图片描述

mod_help模块
在这里插入图片描述

html:

<div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><img src="images/images/wx.jpg" alt=""></dd>
                    <dd>品优购</dd>
                </dl>
            </div>

css:

/* mod_help部分 */
.mod_help {
    height: 188px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
}
.mod_help dl {
    float: left;
    padding: 22px 0 0 80px;
    width: 170px;
    
}
.mod_help dl dt {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 5px;
}
.mod_help dl dd img {
    width: 90px;
    height: 90px;
}
.mod_help dl:last-child {
    text-align: center;
}