CSS3练习--电商web
免责声明:本文仅做分享!
目录
小练--小兔鲜儿
目录构建
SEO 三大标签
Favicon 图标
布局网页
版心
快捷导航(shortcut)
头部(header)
logo
导航
搜索
购物车
服务区
帮助区
版权区
新鲜好物区
人气推荐区
热门品牌区
生鲜区
最新专题区
base.css(清除默认样式)
小兔鲜儿 - 新鲜 惠民 快捷! (itheima.net)
SEO、Favicon、小兔鲜儿
小练--小兔鲜儿
(电商web)
目录构建

SEO 三大标签
SEO:搜索引擎优化,提升网站百度搜索排名。
提升SEO的常见方法:
1. 竞价排名(花米)
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)
4. ……
网页头部 SEO 标签:
• title:网页标题标签
• description:网页描述
• keywords:网页关键词
<!-- meta:desc --><meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。"><!-- meta:kw --><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><!-- title --><title>小兔鲜儿-新鲜、惠民、快捷!</title>
Favicon 图标
网页图标,出现在浏览器标题栏,增加网站辨识度。
.ico
<!-- link:favicon --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
布局网页
版心
版心居中
/* 版心 */
.wrapper {margin: 0 auto;width: 1240px; /* 自己测量 */
}
快捷导航(shortcut)

通栏 > 版心 > 导航 ul > li > a
flex-end (右对齐)
--- 给 a 加边框线,而不给li加,让a的高与字的高一样大,高。
头部(header)
(头部的盒子尺寸,要整体布局。)

.header > logo + 导航(nav)+ 搜索(search) + 购物车(cart)

logo
display: block; 转成块级,这样就可以设置宽高。

导航
a 有底部10px间距。

搜索
input默认样式 (浏览器默认 先 生效默认样式!)

购物车

/* 购物车 */
.cart {position: relative;margin-top: 32px;
}.cart .iconfont {font-size: 24px;
}.cart i {position: absolute;/* 相对定位 */top: 1px;/* right 定位右对齐:如果文字多了,向左撑开,可能盖住其他的内容 *//* right: 1px; *//* left 定位左对齐:文字多了,向右撑开 */left: 15px;/* 一般要向左对齐,向右撑开,所以不右对齐 *//* 宽度不给,将来由内容撑开 */padding: 0 6px;height: 15px;background-color: #E26237;border-radius: 8px;font-size: 14px;color: #FFFEFE;line-height: 15px;/* 文字垂直居中 ,与高度一致 */
}
底部(footer)
---因为底部与头部类似,所以先完成底部。

<!-- 底部 --><div class="footer"><div class="wrapper"><!-- 服务 --><div class="service"><ul><li><h5></h5><p>价格亲民</p></li><li><h5></h5><p>物流快捷</p></li><li><h5></h5><p>品质新鲜</p></li><li><h5></h5><p>售后无忧</p></li></ul></div><!-- 帮助中心 --><div class="help"><div class="left"><dl><dt>购物指南</dt><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></dl><dl><dt>关于我们</dt><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></dl><dl><dt>服务热线</dt><dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd><dd><a href="#">客服电话 400-0000-000</a></dd><dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd></dl></div><div class="right"><ul><li><div class="pic"><img src="./images/wechat.png" alt=""></div><p>微信公众号</p></li><li><div class="pic"><img src="./images/app.png" alt=""></div><p>APP下载二维码</p></li></ul></div></div><!-- 版权 --><div class="copyright"><p><a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">售后服务</a>|<a href="#">配送与验收</a>|<a href="#">商务合作</a>|<a href="#">搜索推荐</a>|<a href="#">友情链接</a></p><p>CopyRight © 小兔鲜</p></div></div></div>
/* 底部 */
.footer {height: 580px;background-color: #F5F5F5;
}/* 服务 */
.service {padding: 60px 0;height: 178px;border-bottom: 1px solid #E8E8E8;
}.service ul {display: flex;justify-content: space-evenly;
}.service li {display: flex;width: 190px;height: 58px;/* background-color: pink; */
}.service li h5 {margin-right: 20px;width: 58px;height: 58px;background-image: url(../images/sprite.png);
}.service li p {font-size: 28px;line-height: 58px;
}.service li:nth-child(2) h5 {background-position: 0 -58px;
}.service li:nth-child(3) h5 {background-position: 0 -116px;
}.service li:nth-child(4) h5 {background-position: 0 -174px;
}/* 帮助中心 */
.help {display: flex;justify-content: space-between;padding-top: 60px;height: 300px;/* background-color: pink; */
}/* left */
.help .left {display: flex;
}.help .left dl {margin-right: 84px;
}.help .left dl:last-child {margin-right: 0;
}.help .left dt {margin-bottom: 30px;font-size: 18px;
}.help .left dd {margin-bottom: 10px;
}.help .left a {color: #969696;
}.help .left .iconfont {color: #5EB69C;
}/* right */
.help .right ul {display: flex;
}.help .right li:first-child {margin-right: 55px;
}.help .right .pic {margin-bottom: 10px;width: 120px;height: 120px;
}.help .right p {color: #969696;text-align: center;
}/* 版权 */
.copyright {text-align: center;
}.copyright p {margin-bottom: 10px;color: #A1A1A1;
}.copyright p a {margin: 0 10px;color: #A1A1A1;
}
服务区

--注意CSS精灵(雪碧图)的应用。

帮助区

分左右两部分.

版权区

小竖线 直接打 |

中间(banner)

通栏 > 版心 > 轮播图(ul.pic)+ 侧导航(subnav > ul)+ 圆点指示器(ol)
定位(子绝父相)

侧导航
右下角圆点指示器 ol > li > i(li 是大圆,i 是小圆)
/* banner */
.banner {height: 500px;background-color: #F5F5F5;
}.banner .wrapper {position: relative;height: 500px;background-color: pink;overflow: hidden;/* 隐藏溢出 */
}/* 图片 */
.banner .pic {display: flex;/* flex 布局,父级宽度不够,子级被挤小,不想挤小,增大父级尺寸 */width: 3720px;
}/* 侧导航 */
.subnav {position: absolute;left: 0;top: 0;width: 250px;height: 500px;background-color: rgba(0, 0, 0, 0.42);
}.subnav li {display: flex;justify-content: space-between;padding-left: 30px;padding-right: 12px;height: 50px;/* background-color: pink; */line-height: 50px;color: #fff;cursor: pointer;
}/* a所有都是小字,分类是大字 */
.subnav li a {margin-right: 5px;font-size: 14px;color: #fff;
}.subnav li .classify {margin-right: 14px;font-size: 16px;
}.subnav li .iconfont {font-size: 14px;
}.subnav li:hover {background-color: #00BE9A;
}/* 圆点指示器 */
.banner ol {position: absolute;bottom: 17px;right: 16px;display: flex;
}.banner ol li {margin-left: 8px;width: 22px;height: 22px;/* background-color: pink; */border-radius: 50%;cursor: pointer;
}.banner ol i {display: block;margin: 4px;width: 14px;height: 14px;background-color: rgba(255, 255, 255, 0.5);border-radius: 50%;
}/* 选中:li半透明; i白色 */
.banner ol .current {background-color: rgba(255, 255, 255, 0.5);
}.banner ol .current i {background-color: #fff;
}
新鲜好物区

标题(title) + 内容(bd)
(样式共用)
标题:

内容:

人气推荐区
与上面类似
热门品牌区

箭头--定位。


生鲜区

标题+内容
鼠标悬停显示 -- 》过渡效果。

/* 生鲜 */
.fresh .title {margin-top: 60px;margin-bottom: 20px;
}.title .right {display: flex;
}.title .right ul {display: flex;margin-top: 10px;margin-right: 58px;
}.title .right ul a {display: block;margin-left: 6px;padding: 0 7px;height: 20px;/* background-color: pink; */line-height: 20px;
}.title .right ul .active {background-color: #00BE9A;color: #fff;
}/* 生鲜内容 */
.content {display: flex;justify-content: space-between;
}.content .left {width: 248px;height: 610px;/* background-color: pink; */
}.content .right {width: 968px;height: 610px;/* background-color: pink; */
}.content .right ul {display: flex;flex-wrap: wrap;
}.content .right li {position: relative;padding: 10px 21px 0;width: 242px;height: 305px;border: 2px solid #fff;/* 为了隐藏绿色cover */overflow: hidden;
}/* 产品内容 */
.content .pic {width: 200px;height: 180px;
}.content .info {margin-top: 14px;margin-bottom: 5px;height: 60px;line-height: 19px;
}.content .price {color: #AF2F22;
}.content .price span {margin-left: 5px;font-size: 22px;
}/* 产品底部绿色区域 */
.content li .cover {position: absolute;left: 0;/* bottom: 0; */bottom: -86px;padding-top: 15px;width: 242px;height: 84px;background-color: #00BE9A;text-align: center;color: #fff;transition: all 0.5s;
}.content .cover p:nth-child(1) {font-size: 18px;
}.content .cover p:nth-child(2) {margin: 3px auto 6px;width: 120px;height: 1px;background-color: rgba(255, 255, 255, 0.11);
}.content .cover p:nth-child(3) {font-size: 13px;
}.content .cover p:nth-child(3) .iconfont {font-size: 14px;
}/* 鼠标悬停到li,显示cover,改变位置 */
.content .right li:hover .cover {bottom: 0;
}.content .right li:hover {border: 2px solid #00BE9A;
}
最新专题区

ul > li * 3
渐变???颜色

/* 最新专题 */
.topic {margin-bottom: 40px;
}.topic .title {margin-top: 100px;
}.topic-bd ul {display: flex;justify-content: space-between;
}.topic-bd li {width: 405px;height: 355px;/* background-color: pink; */
}.topic-bd .pic {position: relative;width: 405px;height: 288px;
}.topic-bd .txt {display: flex;justify-content: space-between;align-items: center;padding: 0 15px;width: 405px;height: 67px;/* background-color: skyblue; */font-size: 14px;color: #666;
}.topic-bd .txt .left {display: flex;
}.topic-bd .txt .left p {margin-right: 20px;
}.topic-bd .txt .left p:nth-child(1) i {color: #AA2113;
}/* 定位区域 - 文字 */
.topic-bd .cover {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;width: 405px;height: 90px;background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
}.topic-bd .cover .left {color: #fff;
}.topic-bd .cover .left h4 {margin-bottom: 6px;font-size: 20px;
}.topic-bd .cover .right {padding: 0 7px;height: 25px;background-color: #fff;color: #AA2113;font-size: 15px;
}.topic-bd .cover .right span {font-size: 18px;
}
base.css(清除默认样式)
/* 去除常见标签默认的 margin 和 padding */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {font: 16px/1.5 "Microsoft Yahei","Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color: #333;
}/* 去除列表默认样式 */
ul,
ol {list-style: none;
}/* 去除默认的倾斜效果 */
em,
i {font-style: normal;
}/* 去除a标签默认下划线,并设置默认文字颜色 */
a {text-decoration: none;color: #333;
}/* 设置img的垂直对齐方式为居中对齐,去除img默认下间隙 */
img {width: 100%;height: 100%;vertical-align: middle;
}/* 去除input默认样式 */
input {border: none;outline: none;color: #333;
}h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 400;
}
相关文章:
CSS3练习--电商web
免责声明:本文仅做分享! 目录 小练--小兔鲜儿 目录构建 SEO 三大标签 Favicon 图标 布局网页 版心 快捷导航(shortcut) 头部(header) logo 导航 搜索 购物车 底部(footer࿰…...
Linux 默认内核版本更改
随笔记录 目录 1. 背景介绍 2. 解决方法 2.1 查看所有可用版本 2.2 安装指定版本内核 2.3 检查当前内核列表 2.4 检查当前默认内核 2.5 设置新的默认内核 2.6 确认内核是否成功加载 2.7 重启 2.8 删除其他版本内核 1. 背景介绍 linux 一般安装多个内核版本&…...
【ubuntu】修改用户名、主机名、主文件夹名、登录名、密码
目录 1.他们是什么 2.修改方法 2.1 修改用户密码 2.2 修改主机名 2.2.1 切换到root用户 2.2.2 修改名称 2.3 修改用户名 主文件夹名 登录名 2.2.1 sudoers 2.2.2 passwd 2.2.3 shadow 2.2.4 group 2.2.5 修改主文件夹名 3.重启 1.他们是什么 (1…...
深入理解JavaScript 的原型继承
JavaScript 的原型链继承机制和 Java 的类继承机制有明显的区别,虽然它们都用于实现对象之间的继承,但它们的实现方式、概念以及运行机制都不同。 1. JavaScript 的原型继承 JavaScript 是基于原型链的继承,主要依赖对象的 __proto__ 属性或…...
Error while loading conda entry point: conda-libmamba-solver
问题 解决方法 conda install --solverclassic conda-forge::conda-libmamba-solver conda-forge::libmamba conda-forge::libmambapy conda-forge::libarchive...
FANUC机器人—PCDK
前言 FANUC提供了一种使用其 PC 开发人员套件 (PCDK) 从 PC 命令和配置机器人的简单方法。该套件允许 PC 访问机器人上的变量、寄存器、IO、程序、位置和警报;接下来,我将如何开始使用 C#。 连接到机器人 将以下突出显示的行添加…...
如何在wsl中使用beyond compare
寫一個名為bc4的文件,內容如下: #!/bin/sh /mnt/c/Program\ Files/Beyond\ Compare\ 4/BComp.com $(wslpath -aw $1) $(wslpath -aw $2)bc4 file1 file2參考:https://forum.scootersoftware.com/forum/beyond-compare-4-discussion/version-…...
CNN+Transformer在自然语言处理中的具体应用
在自然语言处理(NLP)领域,CNN(卷积神经网络)和Transformer架构各自有着广泛的应用。NLP中的具体应用: CNN在NLP中的应用 1.文本分类:CNN可以用于文本分类任务,如情感分析、垃圾邮件…...
DotNetty ChannelRead接收数据为null
问题:C#使用Dotnetty和Java netty服务器通讯,结果能正确发送数据到服务器,却始终接收不到服务器返回的数据。 解决:一定一定要注意服务器和客户端使用的编码一定要完全一样才行 我先前在客户端添加了StringDecoder,服务器却没有…...
3分钟学会下载 blender
1. blender简介 Blender是一款开源的3D创作套件,它由Blender Foundation维护,并得到了全球志愿者和专业开发者的支持。Blender广泛应用于3D模型的制作、动画、渲染、视频编辑、游戏创建、模拟、 composting以及3D打印等多个领域。 功能特点:…...
实现Xshell与虚拟机中Linux服务器的连接(附常见错误解决)
前言 Xshell是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。 本文将介绍Xshell与虚拟机中Linux服务器连接…...
Rust 语言开发 ESP32C3 并在 Wokwi 电子模拟器上运行(esp-hal 非标准库、LCD1602、I2C)
文章目录 esp-rs 简介GithubRust 包仓库Rust 教程Wokwi 电子模拟器开发环境Rust 环境esp-rs 环境创建 ESP32C3 项目项目结构编译项目命令运行模拟器ESP32C3 烧录 esp-rs 简介 esp-rs 是一个专注于为 Espressif 系列芯片(如 ESP32、ESP32-S2、ESP32-C3 等࿰…...
项目-坦克大战笔记-墙体销毁以及人机销毁
在子弹撞到墙或者人机身上时会将碰撞到的墙体或者人机销毁 我们需要做到几点 检测子弹碰撞到的墙体或者人机将物体获取到 每帧遍历墙体列表与人机列表,检测被碰撞的墙,创建一个方法返回值为对应类型将被碰撞的物体返回出来 public static gudin wallp…...
硬件设计-利用环路设计优化PLL的输出性能
目录 前言 问题描述 问题分析步骤 杂散源头排查 245.76M 参考相噪: 30.72M VCXO的相噪性能测试如下: 解决方案 前言 LMK04832是TI 新发布的低抖动双环去抖模拟时钟, 其最高输出频率可以到达3250MHz, 输出抖动极低,3200MHz…...
Vue入门-Node.js安装
进入Node.js中文网 点击进入Node.js中文网 或者手动输入网址: https://www.nodejs.com.cn/download.html 点击下载64位安装包: 下载好之后双击进行安装 可选择个性化安装或默认安装 直接点【Next】按钮,此处可根据个人需求…...
OpenCV threhold()函数
OpenCV threhold()函数的主要用途是将灰度图转换为二值图像,实现灰度图的二值化,在机器视觉中使用频度较高,如尺寸量测,物体识别等。其原型如下: 函数参数: src 输入数组(多通道、8 位或 32 位浮点…...
Qt教程(002):Qt项目创建于框架介绍
二、创建Qt项目 2.1 创建项目 【1、New Project】 【2、选择Qt Widgets Application】 【3、设置项目名称和保存路径】 注意,项目名称和路径不要带中文。 【4、选择QWidget】 带菜单栏的窗口QMainWindow空白窗口QWidget对话框窗口QDialog 【5、编译】 2.2 项目框…...
《C++游戏人工智能开发:开启智能游戏新纪元》
在当今的游戏世界中,人工智能(AI)已经成为了不可或缺的一部分。它能够为游戏增添深度、挑战性和真实感,让玩家沉浸其中,享受前所未有的游戏体验。而对于 C开发者来说,如何在 C中实现高效的游戏人工智能开发…...
SPSS and Origin Paired Samples T-Test
SPSS https://www.spss-tutorials.com/spss-paired-samples-t-test/ Testing the Normality Assumption We can now test the normality assumption by running a Shapiro-Wilk test ora Kolmogorov-Smirnov test. Origin分析 两个软件计算的一样...
速成java记录(上)
简单学一下,要求不高,能看懂java代码就行。 (太不容易了,已经好久没写博客了,希望以后可以坚持) /*** 文档注释* Author zmj* Data 2024/10/5 15:46 下午* Version 1.0*/import java.util.Scanner;//输入…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
MySQL 主从同步异常处理
阅读原文:https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主,遇到的这个错误: Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一,通常表示ÿ…...
