Web前端—小兔鲜儿电商网站底部设计及网站中间过渡部分设计

版本说明

当前版本号[20231116]。

版本修改说明
20231116初版

目录

文章目录

  • 版本说明
  • 目录
    • 底部（footer）
      • 服务
      • 帮助中心
      • 版权
    • banner
      • 侧边栏
      • 圆点
    • 新鲜好物（goods）
      • 标题

底部（footer）

image-20231108115522309

结构：通栏 > 版心 > 服务（service）+ 帮助中心（help）+ 版权（copyright）

服务

1、将所需文字填入。

<!-- 底部 -->
		<div class="footer">
			<div class="wrapper">
				<!-- 服务 -->
				<div class="service">服务</div>
				<!-- 帮助中心 -->
				<div class="help">帮助中心</div>
				<!-- 版权 -->
				<div class="copyright">版权</div>
			</div>
		</div>

image-20231108235437973

2、画出底部的框.

/* 底部 */
.footer{
	height: 580px;
	background-color: #f5f5f5;
}

image-20231109084036352

3、为“服务”添加边框线。

/* 服务 */
.service{
	height: 158px;
	border-bottom: 1px solid #e8e8e8;
}

image-20231109084427816

4、布局“帮助中心”，而余下的空间分配给“版权”区域.

/* 帮助中心 */
.help{
	height: 300px;
	background-color: pink;
}

image-20231109084644278

5、设置宽、高。

.service li{
	width: 190px;
	height: 58px;
	background-color: greenyellow;
}

image-20231109085110714

6、修改成flex布局，并且进行居中对齐。

.service ul{
	display: flex;
	justify-content: space-evenly;
}

image-20231109085406923

7、使用精灵图将图标取出，再对应不同的选项提供不同的选择。

.service li{
	display: flex;
	width: 190px;
	height: 58px;
	background-color: greenyellow;
}

.service li h5{
	width: 58px;
	height: 58px;
	background-image: url(../images/sprite.png);
}

image-20231109085815971

8、调整位置。

margin-right: 20px;

image-20231109090029655

9、调整位置，把精灵图中的四个不同图标拿出来。

.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;
}

image-20231109090457130

10、为其增加内边距、高度和底部边框。

.service{
	padding: 60px 0;
	height: 178px;
	border-bottom: 1px solid #e8e8e8;
}

image-20231109090827393

帮助中心

1、设置左顶点与右顶点，并使用主轴对齐方式。

<!-- 帮助中心 -->
				<div class="help">
					<div class="left">1</div>
					<div class="right">2</div>
				</div>

/* 帮助中心 */
.help{
	display: flex;
	justify-content: space-between;
	height: 300px;
	background-color: pink;
}

image-20231109091230776

2、留出“购物指南”的位置。

<!-- 帮助中心 -->
				<div class="help">
					<div class="left">
						<dl>
							<dt>购物指南</dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
						</dl>
						<dl>
							<dt>购物指南</dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
						</dl>
						<dl>
							<dt>购物指南</dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
						</dl>
						<dl>
							<dt>购物指南</dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
						</dl>
					</div>
					<div class="right">2</div>

.help .left{
	display: flex;
}

image-20231109091831936

3、增加元素的右边距。

.help .left dl{
	margin-right: 84px;
}

image-20231109092436492

4、最后一个不需要右边距。

.help .left dl:last-child {
	margin-right: 0;
}

image-20231109092826972

5、增加元素的下边距，拉开与下面文字间的距离。

.help .left dt{
	margin-bottom: 30px;
	font-size: 18px;
}

image-20231109093043225

6、因为a有默认样式，如果不在a上面精确地修改字号，就会优先去使用默认的样式。

.help .left dd{
	margin-bottom: 10px;
}

.help .left a{
	color: #969696;
}

image-20231109093319346

7、增加字节图标。

<dl>
							<dt>购物指南</dt>
							<dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dt>
							<dd><a href="#">购物流程</a></dt>
							<dd><a href="#">购物流程</a></dt>
						</dl>

image-20231109093655688

8、来设置 right 内容。

<div class="right">
						<ul>
							<li>1</li>
							<li>2</li>
						</ul>
					</div>

/* right */
.help .right ul{
	display: flex;
}

image-20231109094142979

9、给第一个 li 增加右边距。

.help .right ul li:first-child{
	margin-right: 55px;
}

image-20231109094512514

10、把右边的图片及文字的样式修改好。

.help .right .pic{
	margin-bottom: 10px;
	width: 120px;
	height: 120px;
}

.help .right p{
	color: #969696;
	text-align: center;
}

image-20231110114812513

版权

1、初步设置。

<!-- 版权 -->
				<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>

image-20231109095840064

2、使文本内容在元素中居中对齐。

/* 版权 */
.copyright{
	text-align: center;
}

image-20231109095938236

3、“关于我们” 与“版权区域”分开。

.copyright p{
	margin-bottom: 10px;
	color: #a1a1a1;
}

image-20231109100022429

4、使元素的外边距为0像素，左边距和右边距均为10像素。

.copyright p a{
	margin: 0 10px;
	color: #a1a1a1;
}

image-20231109100121952

image-20231109100208802

banner

image-20231109113143368

结构：通栏 > 版心 > 轮播图（ul.pic）+ 侧导航（subnav > ul）+ 圆点指示器（ol） 布局：定位（子绝父相）

1、初步设置。

<!-- banner -->
		<div class="banner">
			<div class="wrapper">1</div>
		</div>

/* 首页内容的样式 */
/* banner */
.banner{
	height: 500px;
	background-color: #f5f5f5;
}

.banner .wrapper{
	height: 500px;
	background-color: pink;
}

image-20231109114009469

2、添加图片进去。

<!-- 图片 -->
				<ul class="pic">
					<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
					<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
					<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
				</ul>

.banner .wrapper{
	height: 500px;
	background-color: pink;
	overflow: hidden;
}

/* banner 图片 */
.banner .pic{
	display: flex;
	/* flex布局 ，父级宽度不够，
	子级被挤小，不想挤小就增大父级尺寸*/
	width: 3720px;
}

image-20231109114837100

3、注：如果不增大父级尺寸，以及不隐藏多出的图片，会出现无法占据整页的现象：

image-20231109115340118

侧边栏

1、记住要遵守“子绝父相”的原则。

<!-- 侧导航 -->
				<div class="subnav">1</div>

.banner .wrapper{
	position: relative;
	height: 500px;
	background-color: pink;
	overflow: hidden;
}

/* 侧导航 */
.subnav{
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
	height: 500px;
	background-color: rgb(0, 0, 0,0.42);
}

image-20231109115904241

2、开始建立侧边栏。

<ul>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
					</ul>

.subnav li{
	height: 50px;
	background-color: pink;
	line-height: 50px;
}

image-20231109141406859

3、给第一个栏进行设置。

<li>
							<div>
								<a href="#">生鲜</a>
								<a href="#">水果</a>
								<a href="#">蔬菜</a>
							</div>
							<span class="iconfont icon-arrow-right-bold"></span>
						</li>

.subnav li{
	display: flex;
	padding-left: 30px;
	padding-right: 18px;
	height: 50px;
	background-color: pink;
	line-height: 50px;
}

image-20231109142322279

4、进行对齐，并且修改字体颜色。

.subnav li{
	display: flex;
	padding-left: 30px;
	padding-right: 18px;
	height: 50px;
	justify-content: space-between;
	background-color: pink;
	line-height: 50px;
	color: #fff;
}

/* 默认所有a都是小字，分类就是大字 */
.subnav li a{
	margin-right: 5px;
	font-size: 14px;
	color: #fff;
}

image-20231109143133381

5、给首个词修改样式，比如增加字体大小。

<a href="#" class="classify">生鲜</a>

.subnav li .classify{
	margin-right: 14px;
	font-size: 16px;
}

image-20231109143341914

6、添加好10个li后，再把背景色给去掉。

image-20231109143646450

7、对字体图标进行修改样式。

.subnav li .iconfont{
	font-size: 14px;
}

image-20231109143828105

8、鼠标悬停，变换颜色。

.subnav li:hover{
	background-color: #00be92;
}

image-20231109144044317

圆点

结构：ol > li > i（li 是大圆，i 是小圆

1、初步建立。

				<!-- 圆点显示器 -->
				<ol>
					<li><i>1</i></li>
					<li><i>1</i></li>
					<li><i>1</i></li>
				</ol>

/* 圆点指示器 */
.banner ol{
	position: absolute;
	bottom: 17px;
	right: 16px;
}

image-20231109144928224

2、画出圆点。

.banner ol li{
	margin-left: 8px;
	width: 22px;
	height: 22px;
	background-color: pink;
	border-radius: 50%;
}

image-20231109145238924

3.设置透明度，形成一种大圆套小圆的现象。

.banner ol i{
	display: block;
	margin: 4px;
	width: 14px;
	height: 14px;
	background-color: rgb(255, 255, 255,0.5);
	border-radius: 50%;
}

image-20231109145704349

4、换好底色，并且给第一个设置特别的样式。

/* 圆点指示器 */
.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%;
}

.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;
}

image-20231109150129193

新鲜好物（goods）

标题

结构：标题（title） + 内容（bd）

提示：多区域样式共用

image-20231109150355066

1、初步设置。

<!-- 新鲜好物 -->
		<div class="goods wrapper">
			<!-- 标题 -->
			<div class="title">1</div>
		</div>

/* 标题(公共) */
.title{
	margin-top: 40px;
	margin-bottom: 30px;
	height: 42px;
	background-color: pink;
}

image-20231109151059381

2、标题的左、右部分都分出来。

.title{
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	margin-bottom: 30px;
	height: 42px;
	background-color: pink;
}

image-20231109151253574

3、套进文字后，把首个词的字体大小及样式进行改变。

.title .left h3{
	margin-right: 35px;
	font-size: 30px;
}

.title .left p{
	align-self: flex-end;
	color: #a1a1a1;
}

image-20231109151823840

4、设置右边的样式。

<div class="right">
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>

image-20231109152117517

5、居中。

/* 查看全部 */
.title .right .more{
	line-height: 42px;
}

image-20231109152215027

6、把字体改成了浅色，并且在文字及字体图标中增加了间距。

/* 查看全部 */
.title .right .more{
	line-height: 42px;
	color: #a1a1a1;
}

.title .right .more .iconfont{
	margin-left: 10px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/155126.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

阿里云ESSD云盘、高效云盘和SSD云盘介绍和IOPS性能参数表

阿里云ESSD云盘、高效云盘和SSD云盘介绍和IOPS性能参数表

阿里云服务器系统盘或数据盘支持多种云盘类型&#xff0c;如高效云盘、ESSD Entry云盘、SSD云盘、ESSD云盘、ESSD PL-X云盘及ESSD AutoPL云盘等&#xff0c;阿里云服务器网aliyunfuwuqi.com详细介绍不同云盘说明及单盘容量、最大/最小IOPS、最大/最小吞吐量、单路随机写平均时延…
阅读更多...
Accelerate 0.24.0文档 三：超大模型推理（内存估算、Sharded checkpoints、bitsandbytes量化、分布式推理）

Accelerate 0.24.0文档 三：超大模型推理（内存估算、Sharded checkpoints、bitsandbytes量化、分布式推理）

文章目录 一、内存估算1.1 Gradio Demos1.2 The Command 二、使用Accelerate加载超大模型2.1 模型加载的常规流程2.2 加载空模型2.3 分片检查点&#xff08;Sharded checkpoints&#xff09;2.4 示例&#xff1a;使用Accelerate推理GPT2-1.5B2.5 device_map 三、bitsandbytes量…
阅读更多...
shell脚本学习06（小滴课堂）

shell脚本学习06（小滴课堂）

fi是结束循环的意思。 这里脚本1&#xff1a;代表着脚本和1.txt文件处于同一目录下。 脚本2为绝对路径的写法。 在使用./进行启动时&#xff0c;我们需要给文件赋予执行权限。 把文件名改为2.txt: 什么都没有返回&#xff0c;说明文件已经不存在。 可以使用脚本2 if else的方式…
阅读更多...
基于单片机的智能家居安保系统（论文+源码）

基于单片机的智能家居安保系统（论文+源码）

1.系统设计 本次基于单片机的智能家居安保系统设计&#xff0c;在功能上如下&#xff1a; 1&#xff09;以51单片机为系统控制核心&#xff1b; 2&#xff09;温度传感器、人体红外静释电、烟雾传感器来实现检测目的&#xff1b; 3&#xff09;以GSM模块辅以按键来实现远/近程…
阅读更多...
Jenkinsfile+Dockerfile前端vue自动化部署

Jenkinsfile+Dockerfile前端vue自动化部署

前言 本篇主要介绍如何自动化部署前端vue项目 其中&#xff0c;有两种方案&#xff1a; 第一种是利用nginx进行静态资源转发&#xff1b;第二种方案是利用nodejs进行启动访问&#xff1b; 各个组件版本如下&#xff1a; Docker 最新版本&#xff1b;Jenkins 2.387.3nginx …
阅读更多...
SQL注入学习--GTFHub（布尔盲注+时间盲注+MySQL结构）

SQL注入学习--GTFHub（布尔盲注+时间盲注+MySQL结构）

目录 布尔盲注 手工注入 笔记 Boolean注入 # 使用脚本注入 sqlmap注入 使用Burpsuite进行半自动注入 时间盲注 手工注入 使用脚本注入 sqlmap注入 使用Burpsuite进行半自动注入 MySQL结构 手工注入 sqlmap注入 笔记 union 联合注入&#xff0c;手工注入的一般步骤 …
阅读更多...
conan 入门指南

conan 入门指南

conan 新手入门 1 需要注意的事项2 使用 Poco 库的 MD5 哈希计算器2.1 创建源文件2.2 搜索poco conan 库2.3 获取poco/1.9.4的元数据2.4 创建conanfile.txt2.5 安装依赖2.6 创建编译文件2.7 构建和运行程序 3 安装依赖程序4 检查依赖关系5 搜索软件包6 与其他配置一起构建 该篇…
阅读更多...
LeetCode（25）验证回文串【双指针】【简单】

LeetCode（25）验证回文串【双指针】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 验证回文串 1.题目 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&…
阅读更多...
2.FastRunner定时任务Celery+RabbitMQ

2.FastRunner定时任务Celery+RabbitMQ

注意&#xff1a;celery版本和Python冲突问题 不能用高版本Python 用3.5以下&#xff0c;因为项目的celery用的django-celery 3.2.2 python3.7 async关键字 冲突版本 celery3.x方案一&#xff1a; celery3.xpython3.6方案二 &#xff1a; celery4.xpython3.7 解决celery执…
阅读更多...
【Linux网络】搭建内外网的网关服务器，实现DNS分离解析与DHCP自动分配

【Linux网络】搭建内外网的网关服务器，实现DNS分离解析与DHCP自动分配

一、实验要求&#xff1a; 二、实验思路剖析&#xff1a; 网关服务器&#xff1a; 客户端准备&#xff1a; 实操&#xff1a; 第一步先安装dhcp服务和bind服务 第二步双网卡&#xff0c;配置网卡的ip地址 第三步&#xff1a;开始配置dhcp 第四步&#xff1a;做dns分离解析…
阅读更多...
聊一聊前端面临的安全威胁与解决对策

聊一聊前端面临的安全威胁与解决对策

前端是用户在使用您的网站或Web应用程序时首先体验到的东西。如果您的Web应用程序的前端受到侵害&#xff0c;它可能会影响整个布局&#xff0c;并造成糟糕的用户体验&#xff0c;可能难以恢复。集成前端安全变得越来越重要&#xff0c;本文将指导您通过可以应用于保护您的Web应…
阅读更多...
开源与闭源：数字化时代的辩论与未来走向

开源与闭源：数字化时代的辩论与未来走向

在当今的数字化时代&#xff0c;关于开源和闭源软件的辩论一直是技术界的热门话题。 特斯拉CEO马斯克最近也加入了这场辩论&#xff0c;公开表示OpenAI不应该闭源&#xff0c;而他自己的首款聊天机器人将选择开源。 这引发了人们对开源与闭源软件的进一步思考&#xff1a;开源是…
阅读更多...
让文字在盒子中水平居中与垂直居中

让文字在盒子中水平居中与垂直居中

简单方法&#xff1a; 1.先用text-align: center;将文字垂直居中。 2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。&#xff08;这里的X代表父元素的高度&#xff09; 举例&#xff1a; 对于该网页的代码如下&#xff1a; <!DOCTYPE html> <html&…
阅读更多...
【Android】使用XML资源文件存储配置项：降低代码耦合性并提高可重用性

【Android】使用XML资源文件存储配置项：降低代码耦合性并提高可重用性

前言 在Android开发中&#xff0c;我们经常需要存储一些配置项。 例如在创建Retrofit实例时&#xff0c;需要指定baseUrl。如果需要修改替换整个项目中的baseUrl&#xff0c;那将会是一件很痛苦的事情。 为了方便管理和维护这些配置项&#xff0c;我们可以使用资源文件来存储…
阅读更多...
如何在Docker部署Draw.io绘图工具并远程访问

如何在Docker部署Draw.io绘图工具并远程访问

文章目录 前言1. 使用Docker本地部署Drawio2. 安装cpolar内网穿透工具3. 配置Draw.io公网访问地址4. 公网远程访问Draw.io 前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软件为收费&#xff0…
阅读更多...
Golang 协程、主线程

Golang 协程、主线程

Go协程、Go主线程 1)Go主线程(有程序员直接称为线程/也可以理解成进程):一个Go线程上&#xff0c;可以起多个协程&#xff0c;你可以这样理解&#xff0c;协程是轻量级的线程。 2)Go协程的特点 有独立的栈空间 共享程序堆空间 调度由用户控制 协程是轻量级的线程 go线程-…
阅读更多...
Spring SPI

Spring SPI

SPI 服务供给接口&#xff08;Service Provider Interface&#xff09;。是Java 1.5新添加的一个内置标准&#xff0c;允许不同的开发者去实现某个特定的服务。 1 SPI 介绍 一个接口&#xff0c;可能会有许多个实现&#xff0c;我们在编写代码时希望能动态切换具体实现&#…
阅读更多...
前端开发学习 (一) 搭建Vue基础环境

前端开发学习 (一) 搭建Vue基础环境

一、环境搭建 1、安装nodejs #下载地址 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi 2、配置环境变量 上面下载完安装包后自行安装&#xff0c;安装完成后安装下图操作添加环境变量 #查看版本 node --version v20.9.0# npm --version 10.1.03、配置npm加速源 np…
阅读更多...
【Ubuntu】Windows远程Ubuntu系统

【Ubuntu】Windows远程Ubuntu系统

步骤 开启ssh服务并开放22端口关闭防火墙ufw或iptables &#xff1b;或者将远程端口添加到入站与出站规则安装xrdp并将xrdp用户添加到ssl-cert用户组mstsc 远程&#xff0c;输入账号密码 1、开启ssh服务 1.1. 查看ssh是否已经开启 sudo ps -e | grep ssh如果最后返回是sshd…
阅读更多...
SQL基础理论篇（六）：多表的连接方式

SQL基础理论篇（六）：多表的连接方式

文章目录 简介笛卡尔积等值连接非等值连接外连接自连接其他SQL92与SQL99中连接的区别不同DBMS下使用连接的注意事项参考文献 简介 SQL92中提供了5类连接方式&#xff0c;分别是笛卡尔积、等值连接、非等值连接、外连接(左连接、右连接、全外连接(full outer join、全连接))和自…
阅读更多...
最新文章

Copyright @ 2022~2023