品优购项目学习记录04--列表页
文章目录
- 1.品优购项目列表页制作准备工作
- 2.列表页header和nav修改
- 2.1 秒杀logo的制作
- 2.2 导航栏nav修改
- 3.列表页主体sk_container
1.品优购项目列表页制作准备工作
1.列表页面是新的页面,我们需要新建页面文件list.html
2.因为列表页的头部和底部基本一致,所以我们需要把首页中的头部和底部的结构复制过来
3.头部和底部的样式也需要,因此list.html中还需要引入commom.css
4.需要新的list.css样式文件,这是列表页专门的样式文件
2.列表页header和nav修改

2.1 秒杀logo的制作
1.定义一个小盒子,将“秒杀”图片装入该盒子中,并且将该盒子的左边框显示出来
2.将秒杀盒子使用定位的方法放在大盒子中,子绝父相
css代码如下:
.sk {position: absolute;top: 40px;left: 185px;width: 86px;height: 30px;border-left: 1px solid #c81523;text-align: center;line-height: 30px;
}
2.2 导航栏nav修改
将首页导航栏中的内容删除,重写为列表页写2个盒子
css代码
.sk_list ul li{float: left;font-size: 16px;font-weight: bold;margin-left: 28px;margin-right: 27px;line-height: 48px;
}
.sk_con ul li {float: left;font-size: 14px;margin-left: 30px;margin-right:14px ;line-height: 48px;
}
.sk_con ul li:last-child::after {font-family: 'icomoon';content: '\e91e';margin-left: 2px;
}
3.列表页主体sk_container

- 1号盒子sk_container给宽度1200,不要给高度
- 2号盒子sk_hd,插入图片即可
- 3号盒子sk_bd,里面包含很多的ul和li
以下是一个li盒子的制作
html代码
<li><a href="#"><img src="images/手机.png" alt=""><p>Apple苹果iPhone 6s plus(A1699)32G 金色 移动联通电信4G手机</p></a><h1>¥6088</h1><h2>¥6988</h2><div class="jindutiao"><img src="images/圆角矩形.png" alt=""></div><div class="qianggou">立即抢购</div>
</li>
css部分
.sk_bd ul li{float: left;width: 290px;height: 460px;border:1px solid transparent;margin-right: 12px;
}
.sk_bd ul li:nth-child(4n) {margin-right: 0px;
}
.sk_bd ul li:hover {border: 1px solid #c81523;
}
.sk_bd ul li p {font-size: 14px;margin-left: 13px;
}
.sk_bd ul li h1 {display: inline-block;margin-left: 13px;color: #e60012;
}
.sk_bd ul li h2{display: inline-block;margin-left: 5px;text-decoration: line-through grey;
}
.jindutiao {margin-top: 10px;text-align: center;
}
.jindutiao::before {content: '已售87%';font-size: 14px;
}
.jindutiao::after {content: '剩余29件';font-size: 14px;
}
.qianggou {height: 50px;font-size: 20px;color: aliceblue;background-color: #c81523;text-align: center;line-height: 50px;margin-top: 12px;
}
相关文章:
品优购项目学习记录04--列表页
文章目录 1.品优购项目列表页制作准备工作2.列表页header和nav修改2.1 秒杀logo的制作2.2 导航栏nav修改 3.列表页主体sk_container 1.品优购项目列表页制作准备工作 1.列表页面是新的页面,我们需要新建页面文件list.html 2.因为列表页的头部和底部基本一致&#x…...
script标签type值application/json,importmap和module
type(默认text/javascript) 该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型(媒体类型); 如果没有定义这个属性,脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型&a…...
基于ArcGIS实现陕西省1:250000比例尺地形图分幅和编号
1地形图的分幅与编号原理 我国1:1000000地形图的分幅采用国际1:1000000地图分幅标准,而其他比例尺地形图分幅以1:1000000比例尺地形图为基准进行分幅。每幅1:1000000地形图范围是经差6、纬差4;纬度60~ 76之间经差12、纬差4;纬度76~ 88之间经…...
校园安全,一键报警主机助力保障
校园安全,一键报警主机助力保障 随着社会发展和科技进步,校园安全问题日益受到重视。如何保障师生们的安全成为了学校一项重要任务。而校园可视一键报警主机就是一种非常有效的安保设备。 这种报警主机集合了视频监控、安全防范、数据处理等多个功能&a…...
RabbitMQ养成记 (7. 消息可靠性投递)
消息可靠性 什么是消息的可靠性呢?? 简单来说就是 你的消息发放给 exchange 这个过程中 有可能丢失或者失败 这时候需要一个回调机制来监控 发送结果 必要时还要返回信息。 rabbitmq 给我们提供了两种: 首先是生产者到exchange发送过程的监…...
SpringBoot配置连接两个或多个数据库
在Spring Boot应用中连接多个数据库或数据源可以使用多种方式,下面介绍两种常用的方法: 1、使用Spring Boot官方支持的多数据源配置 Spring Boot提供了官方支持的多数据源配置,可以简单地配置和管理多个数据源。 需要在application.proper…...
Python面试题汇总:高效备战技巧
Python面试题汇总:高效备战技巧 一、基础知识准备1 语言特点及优缺点2 数据类型3 运算符4 控制流程语句5 函数 二、面向对象编程1 面向对象编程基础2 类的创建及继承3 魔术方法4 多态5 设计模式 三、常用数据结构与算法1 字符串、列表、字典、集合字符串列表字典集合…...
如何区分比特率、波特率和频谱带宽?
01、什么是比特率和波特率? 宽带网络里面提及的千兆即1000Mbit/s,一般描述的是我们家网络端口每秒最大可接收0、1比特(bit)的数量,即每秒可接收1000x106个比特。显而易见,比特率越高,每秒传送的…...
sklearn中的特征工程(过滤法、嵌入法和包装法)
目录 编辑特征工程的第一步:理解业务 Filter过滤法 编辑方差过滤 编辑- 相关性过滤 - 卡方过滤 - F检验 - 互信息法 编辑嵌入法(Embedded) 包装法(Wrapper) 特征工程的第一步:理解业务 如…...
Linux C/C++并发编程实战(0)谈谈并发与并行
作为并发编程的第一讲,比较轻松,我们先来谈谈什么是并发和并行。 并发(Concurrency)是指一个处理器同时处理多个任务。 并行(Parallelism)是指多个处理器或者是多核的处理器同时处理多个不同的任务。 并发…...
2023年5月天津/南京/成都/深圳CDGA/CDGP数据治理认证报名
6月18日DAMA-CDGA/CDGP数据治理认证考试开放报名中! 考试开放地区:北京、上海、广州、深圳、长沙、呼和浩特、杭州、南京、济南、成都、西安。其他地区凑人数中… DAMA-CDGA/CDGP数据治理认证班进行中,报名从速! DAMA认证为数据管…...
【MySQL】MySQL批量插入测试数据的几种方式
文章目录 前言一、表二、使用函数生成设置允许创建函数产生随机字符串产生随机数字 三、创建存储过程插入角色表插入用户表 四、执行存储过程小结五、使用 Navicat自带的数据生成 前言 在开发过程中我们不管是用来测试性能还是在生产环境中页面展示好看一点, 又或者学习验证某…...
PowerShell install 一键部署virtualbox
VirtualBox 前言 VirtualBox 是一款开源虚拟机软件。VirtualBox 是由德国 Innotek 公司开发,由Sun Microsystems公司出品的软件,使用Qt编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。Innotek 以 GNU General Public Licens…...
CTF权威指南 笔记 -第四章Linux安全机制-4.1-Stack Canaries
目录 Stack Canaries 简介 我们进行简单的例子 64 32 checksec Stack Canaries 是对抗栈溢出攻击的技术 SSP安全机制 Canary 的值 栈上的一个随机数 在程序启动时 随机生成并且保存在比返回地址更低值 栈溢出是从低地址向高地址进行溢出 如果攻击者要攻击 就一定要覆…...
KDZD400Q便携式三氯乙烯浓度检测仪
一、产品概述 检测仪用于快速检测多种气体浓度、温湿度测量并超标报警的场合。采用2.31寸高清彩屏实时显示,选用进口品牌的气体传感器,主要检测原理有:电化学、红外、催化燃烧、热导、PID 光离子等。 可以检测管道中或受限空间、大气环境中的…...
C++11 部分新特性
1. 关键字和语法 1.1 nullptr 空指针,能够和整数0进行区别,因为#define NULL 0 1.2 类中非静态成员变量定义时初始化 & 初始化列表 1.3 auto 可推导出右值类型,从而得知左边变量类型。 简单使用示例: auto func() {retur…...
selenium通过performance log获取状态码,Conten-Type,以及重定向路径
selenium的官方不提供获取状态码,Conten-Type,以及重定向路径的方法,并且官方说这些功能将来也不会有。java - How to get HTTP Response Code using Selenium WebDriver - Stack Overflow 非官方的方法大概有下面几种 1.通过requests重新请…...
GL绘制自定义线条3_自定义线帽
安卓Path搭配Paint可以设置线帽,我想能不能把我自己的线条绘制Demo也加上类似的功能。 线头规则描述: 1、设一个线宽一半的线段,坐标为(0, 0)到(-lineWidth / 2, 0)。 2、设步骤1的线段有一垂直于它的向量(0,1),然后传…...
【AGC】新版鸿蒙崩溃SDK集成使用方法
【背景】 我们知道AGC的Crash SDK都是需要强制集成华为分析SDK的,在使用时的崩溃数据上报都要依靠分析服务来完成,这就容易受到限制,有时出现无数据的情况就要依次排查崩溃SDK与分析SDK,比较麻烦。而就在不久前,鸿蒙崩…...
vue-7:组件库(移动端vant)(PC端element)
移动端vant 插件安装(按需导入) 重启生效 # 通过 npm 安装 npm i unplugin-vue-components -D# 通过 yarn 安装 yarn add unplugin-vue-components -D 导入基于 vite 的项目: 如果是基于 vite 的项目,在 vite.config.js 文件中…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
