前端学习之品优购项目（三）——列表页搭建

最新推荐文章于 2023-12-02 23:23:34 发布
最新推荐文章于 2023-12-02 23:23:34 发布
阅读量792 收藏 8
点赞数
分类专栏： 前端学习 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cai_Smallwhite/article/details/109002648
版权

一、准备工作

之前在首页做了这样一个商品菜单：在这里插入图片描述
现在我们要做的就是点击商品菜单的“手机”链接，跳转到手机的商页，点击“清洁用品”，跳转到清洁用品的列表页blablabla。
在这里插入图片描述

需要注意以下几点：
在这里插入图片描述
做好上面几步后就可以进入正题了。

二、一些相对于首页的修改

1、头部“秒杀”小模块

列表页相对于首页在品优购大图标后面多了个“秒杀”的图标，现在我们把它加上去。
做一个秒杀盒子sk，里面放入图标，给一个红色左边框，然后把盒子定位到品优购后面即可。
在这里插入图片描述

2、导航nav模块修改

导航模块跟首页有点出入，变成了这样：
在这里插入图片描述
可以这样做：
在这里插入图片描述
这里有两个要点：一是1号盒子和2号盒子的文字是底线对齐的，只需要调整2号盒子文字行高比1号盒子稍大即可；二是“更多分类”和后面的字体图标是一体的，因此要对a添加after伪元素而不是对li：

.sk_con ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}

但这样的行高会比nav高，可能会影响nav下面的盒子，因此最好对nav加上：

.nav {
    overflow: hidden;
}

三、列表页主体内容sk_container

你问我为什么手机列表页的标题是女鞋？那可能是做这个网页的美工太喜欢鞋子了蛤蛤蛤~
在这里插入图片描述
前两步不必说，第三步主要是做li里面的内容：
在这里插入图片描述
也好做……这里我就直接当时图片插入好了，以后有空再详细说。只注意一点：因为为sk_bd没有给它加高度，而里面的li又加了浮动，因此会影响下面的标准流盒子（footer），所以要记得给浮动元素的父亲添加清除浮动。

源码

html：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的猫猫都在这</title>
    <meta name="description" content="麦宠-专业的网上宠物商城,猫猫(英短、美短、布偶、暹罗、波斯……),狗狗(哈士奇、拉布拉多……),以及其他各类宠物.便捷、诚信的服务,为你提供愉悦的网上买宠的体验!" />
    <meta name="keywords" content="网上宠物交易,猫猫,狗狗,猪猪,仓鼠" />
    <link rel="shortcut icon" href="pig.ico" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li>
                        <a href="#">请登录</a> &nbsp; <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>
    </section>
    <!-- header头部模块制作 -->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords模块制作 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>
        <!-- 秒杀模块 -->
        <div class="sk">
            <img src="images/sk.png" alt="">
        </div>
    </header>
    <!-- nav模块制作 -->
    <nav class="nav">
        <div class="w">
            <div class="sk_list">
                <ul>
                    <li><a href="#">品优秒杀</a></li>
                    <li><a href="#">即将售罄</a></li>
                    <li><a href="#">超值低价</a></li>
                </ul>
            </div>
            <div class="sk_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">女鞋</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>
            </div>
        </div>
    </nav>
    <!-- 列表页主体制作 -->
    <div class=" w sk_container">
        <div class="sk_hd">
            <img src="upload/bg_03.png" alt="">
        </div>
        <div class="sk_bd">
            <ul class="clearfix">
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
                <li>
                    <img src="upload/list.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- footer底部模块 -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <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/wx_cz.jpg" alt=""> 品优购客户端
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

css：

.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px;
}

.nav {
    overflow: hidden;
}

.sk_list {
    float: left;
}

.sk_list ul li {
    float: left;
}

.sk_list ul li a {
    display: block;
    font-size: 16px;
    line-height: 47px;
    padding: 0 30px;
    font-weight: 700;
    color: #000000;
}

.sk_con {
    float: left;
}

.sk_con ul li {
    float: left;
}

.sk_con ul li a {
    display: block;
    font-size: 14px;
    line-height: 49px;
    padding: 0 20px;
}

.sk_con ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}

.sk_bd ul li {
    overflow: hidden;
    float: left;
    margin-right: 13px;
    width: 290px;
    height: 460px;
    border: 1px solid transparent;
}

.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}

.sk_bd ul li:hover {
    border: 1px solid #c81523;
}
桦桦子
关注
专栏目录
超详细前端开发案例：品优购商场项目(一)
←か淡定☆ ヾ 的博客
10-19 1934
目录1. 品优购项目介绍2. 项目背景3. 设计目标4. 几点思考5. 代码规范6. 前期准备工作目录文件夹样式文件的分类7. 网站ico图标1). 使用ico图标2). 制作ico图标8. 网站优化三大标签1). 网页title 标题2. Description 网站说明3. Keywords 关键字4). 总结9. 字体图标1. 字体图标优点2. 字体图标使用流程3. 设计字体图标4. 上传生成字体包5. 下载兼容字体包6. 字体引入到HTML2. html标签内里面添加结构3. 在样式里面声明
品优购电商系统01---项目背景及项目初始化
我在阴山下
09-18 6039
今天就正式开始品优购的学习了，加油吧，Android转后台之路漫漫，坚持就是胜利！ 目标1：了解电商行业特点以及理解电商的模式 目标2：了解整体品优购的架构特点 目标3：能够运用Dubbox+SSM搭建分布式应用 目标4：搭建工程框架，完成品牌列表后端代码 文章目录1.1 电商行业技术特点1.2 主要电商模式2.品优购- 需求分析与系统设计2.1品优购简介2.1.1网站前台2.1.2 运营商后台...
PC端品优购网页（common.css）以及列表页面（list.css）
weixin_53317758的博客
04-05 781
疫情有反复了，谁能想到极少有疫情动态的江西能反复又反复，在不远处的南昌大学都有人确诊，学校的快递又不能收了，近期以“好好学习好好睡觉”来麻痹自己，解封的是遥不可期呢 main 主体模块制作 以前书写的就是模块化中的公共部分 main 主体模块是index里面专有的，注意需要新的样式文件index.css main 盒子宽度为980 像素 位置距离左边220px (magin-left) 给高度就不用清除浮动 下拉模块210以及10px留白 main 里面包含左侧盒子，左浮...
品优购商城——列表页
one_mystery的博客
10-04 976
效果图： 列表页文件 list.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表页-综合网购首选-正品低廉,品质保障,配送及时,轻松购物! </title> <meta name="description" content="品优购商城-专业的综合...
品优购静态页面--列表页
m0_50789696的博客
04-11 991
1 快捷导航模块 shortcut 与 index.html一样，直接复制粘贴，切记引入样式表 2 头部模块 header 与 index.html基本一样，多一个秒杀模块，采用定位 2.1 HTML 结构 <!-- 列表页的秒杀模块 --> <div class="sk"> <img src="./images/sk.png" alt=""> </div> 2...
品优购-列表页
weixin_46126804的博客
08-12 1339
遇到下面情况，是因为上面浮动的盒子高度溢出，下面盒子围绕上面浮动的盒子，解决方法：给上面盒子清超出部分隐藏 2. 鼠标移入会显示红色边框，不能直接设置 hover 边框。否则会鼠标移入出现抖动情况，这是因为原盒子没有设置边框。解决方法：给原盒子设置透明边框，边框由透明变为红色，不会出现抖动。 ...
品优购综合案例——列表页（html+CSS综合运用）自学系列
weixin_46972646的博客
12-23 889
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List</title> <link rel="stylesheet" href="css/base.cs
项目实战——项目名称：品优购
qq_58791266的博客
05-19 1227
1. 品优购项目整体介绍 （制作首页、列表页、注册页三个页面）2. 品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）3. 开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）
React Native电商项目实战——开篇
于连林520wcf的专栏
06-05 5718
React Native 简称 RN 是 FaceBook 发布的跨平台开发框架，它的设计理念是：使用 React Native 开发，既拥有Native 的良好人机交互体验，又保留了 React 开发效率。 RN 技术已经非常成熟，我们没什么理由拒绝使用 RN 搭建一个完整的项目，React Native 技术已经非常成熟。如果你具备前端或者移动端开发经验相信你很快就能上手。 先给自己...
Vue2电商前台项目（一）：项目前的初始化及搭建
weixin_42044763的博客
09-07 4695
文件夹：放置项目的依赖public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面src文件夹​ —assets文件夹：一般放置的是静态资源（一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面​ —components文件夹：一般放置的是非路由组件（全局组件）
品优购项目源码
01-30
品优购项目源码,sping+springMVC+Mybatis 前端使用angular js
lingfengxh:使用CSS3 HTML5编写品优购主页、列表页、注册页
08-04
你好呀 :waving_hand: :telescope: 我目前正在... :seedling: 我目前正在学习... :people_with_bunny_ears: 我正在寻找合作... :thinking_face: 我正在寻求帮助... :speech_balloon: 问我... :closed_mailbox_with_raised_flag: 如何联系我：... :grinning_face_with_smiling_eyes: 代词：... :high_voltage: 有趣的事实： ..
品优购项目资料大全
01-16
品优购项目资料大全，你值得拥有，网盘
list.html前端展示页面
12-03
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结。
黑马—品优购列表页制作
qq_38553293的博客
11-06 744
黑马品优购列表页
27.品优购列表页
potato123232的博客
03-31 154
目录 1 头部与尾部 2导航部分 3内容部分 1 头部与尾部 这两个地方是一样的 我们直接复制html并复用相关的css 有的版本logo的右侧还有一个 秒杀 的图像，那个如果要做的话直接插入图像然后进行定位就行，在我的代码中没有做 这个图像我html我不建议写到头部中，而是在和header平级的地方放一张图像，然后相对定位即可 原因是你不能把 秒杀 这张图像放在 头部的css中，那么你后期维护的话是不能再次进行复用的，与其不能方便复用还不如让页面效果与html和css...
品优购项目--列表页 list.
WangJiaYi948的博客
09-19 4900
效果图 HTML部分 list.html &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表页-手机页面！&lt;/title&gt; &lt;meta name="description&
品优购：主体页，列表页，注册页
最新发布
alicca的博客
12-02 924
3）注册核心内容里：一定加一个父盒子，父盒子给个宽度，在里面水平居中显示，在里面通过ul和li显示，每个li包含三块：label（行内元素）input和span；4）安全程度部分，再加一个li里面放三个span，依次添加三个类名，通过padding拓展开span的大小，并增加相应背景颜色；6）注意这里对input的text表单调整宽高是对于input设置的，而里面有text类型的还有checkbox类型的因此通过将input里的class设置为inp，防止把checkbox类型的框也带成同样格式；
前端练习项目——品优购 Day9 列表页搭建
Acc222222的博客
08-05 623
（1）列表页面是新的页面，我们需要新建页面文件list.html。 （2）他因为列表页的头部和底部与index.html基本一致，所以要把首页中的头部和底部结构复制过去。 （3）头部和底部的样式也需要，因此list.html还需要引入common.css （4）需要新的list.css样式文件，这是列表页专门的样式文件。 （5）还需要把meta的内容移植过来，更改一下即可。 <meta name="description" content="品优购 - 亚洲较大的网上交易平
黑马品优购项目技术选型与框架搭建解析
"黑马品优购项目是一个综合性的电商平台建设，涵盖了前后端开发、数据库设计、分布式服务等多个技术领域。" 该项目的技术选型主要包括以下几个关键部分： 1. **前端**：选择了AngularJS作为主要的前端框架，搭配...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值