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

news2024/11/23 4:51:41

版本说明

当前版本号[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;
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

rabbitMQ的Topic模式的生产者与消费者使用案例

rabbitMQ的Topic模式的生产者与消费者使用案例

topic模式 RoutingKey 按照英文单词点号多拼接规则填充。其中消费者匹配规则时候 * 代表一个单词&#xff0c;#表示多个单词 消费者C1的RoutingKey 规则按照*.orange.* 匹配 绑定队列Q1 package com.esint.rabbitmq.work05;import com.esint.rabbitmq.RabbitMQUtils; import …
阅读更多...
关于响应式编程ReactiveX，RxGo

关于响应式编程ReactiveX，RxGo

ReactiveX&#xff0c;简称为 Rx&#xff0c;是一个异步编程的 API。与 callback&#xff08;回调&#xff09;、promise&#xff08;JS 提供这种方式&#xff09;和 deferred&#xff08;Python 的 twisted 网络编程库就是使用这种方式&#xff09;这些异步编程方式有所不同&a…
阅读更多...
深度学习YOLO图像视频足球和人体检测 - python opencv 计算机竞赛

深度学习YOLO图像视频足球和人体检测 - python opencv 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov5算法5 数据集6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习YOLO图像视频足球和人体检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非…
阅读更多...
听GPT 讲Rust源代码--library/core/src(7)

听GPT 讲Rust源代码--library/core/src(7)

题图来自 Hello, crustaceans.[1] File: rust/library/core/src/ptr/metadata.rs 在Rust的源代码中&#xff0c;rust/library/core/src/ptr/metadata.rs 文件的作用是定义了与指针&#xff08;ptr&#xff09;和元数据&#xff08;metadata&#xff09;相关的结构体和 trait&am…
阅读更多...
30天黑客（网络安全）自学

30天黑客（网络安全）自学

前言 前几天发布了一篇 网络安全&#xff08;黑客&#xff09;自学 没想到收到了许多人的私信想要学习网安黑客技术&#xff01;却不知道从哪里开始学起&#xff01;怎么学 今天给大家分享一下&#xff0c;很多人上来就说想学习黑客&#xff0c;但是连方向都没搞清楚就开始学习…
阅读更多...
设计模式—结构型模式之外观模式（门面模式）

设计模式—结构型模式之外观模式（门面模式）

设计模式—结构型模式之外观模式&#xff08;门面模式&#xff09; 外观&#xff08;Facade&#xff09;模式又叫作门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。 例子 我们的电脑会有很多 组件&am…
阅读更多...
Linux网络之传输层协议tcp/udp

Linux网络之传输层协议tcp/udp

文章目录 目录 一、再谈端口号 1.端口号划分 2.知名端口号 3.netstat&#xff0c;pidof 二、UDP协议 1.udp协议格式 2.udp特点 3.基于udp的应用层协议 三、TCP协议 1.tcp报头 确认应答机制&#xff08;ACK) 超时重传机制 连接管理机制&#xff08;三次握手四次挥…
阅读更多...
【Proteus仿真】【Arduino单片机】HC05蓝牙通信

【Proteus仿真】【Arduino单片机】HC05蓝牙通信

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶、HC05蓝牙传感器等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示蓝牙接收数据。 二、软件设计 /* 作者…
阅读更多...
初始MySQL(六)(自增长,索引,事务,隔离级别)

初始MySQL(六)(自增长,索引,事务,隔离级别)

目录 自增长 索引 索引的原理: mysql索引的类型 添加/删除索引/查看索引 添加索引 删除索引 查看索引(没有生成或者问问什么时候存在) 小结 MySQL事务 关于事务的一些概念 mysql数据库控制台事务的几个重要操作 MySQL事务细节讨论 MySQL事务隔离级别 介绍 数据库…
阅读更多...
UI原型图

UI原型图

最近没啥项目&#xff0c;闲来无事&#xff0c;研究了一下原型图&#xff0c;万一以后年龄大了&#xff0c;代码敲不动还可以画画原型图&#xff0c;嘿嘿嘿 今天研究了两款画原型图的工具&#xff0c;即时设计-即时设计 - 可实时协作的专业 UI 设计工具 MODAO-墨刀 两款工具…
阅读更多...
数组相关面试题--5.合并两个有序数组

数组相关面试题--5.合并两个有序数组

5. 合并两个有序数组 88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 解题思路:1. 从后往前遍历数组&#xff0c;将nums1和nums2中的元素逐个比较将较大的元素往nums1末尾进行搬移2. 第一步结束后&#xff0c;nums2中可能会有数据没有搬移完&#xff0c;将nums…
阅读更多...
Docker的3主3从redis集群配置（扩容和缩容配置）

Docker的3主3从redis集群配置（扩容和缩容配置）

3主3从redis集群配置 1、关闭防火墙启动docker后台服务 systemctl start docker2、新建6个docker容器redis实例 docker run -d --name redis-node-1 --net host --privilegedtrue -v /data/redis/share/redis-node-1:/data redis:6.0.8 --cluster-enabled yes --appendonly …
阅读更多...
蓝凌OA sysUiComponent 任意文件上传漏洞复现

蓝凌OA sysUiComponent 任意文件上传漏洞复现

0x01 产品简介 蓝凌核心产品EKP平台定位为新一代数字化生态OA平台&#xff0c;数字化向纵深发展&#xff0c;正加速构建产业互联网&#xff0c;对企业协作能力提出更高要求&#xff0c;蓝凌新一代生态型OA平台能够支撑办公数字化、管理智能化、应用平台化、组织生态化&#xff…
阅读更多...
论文排版一步搞定之图表题注——（图标自动编号，引用题注）

论文排版一步搞定之图表题注——（图标自动编号，引用题注）

同学们在撰写研究生毕业大论文时&#xff0c;一定会进行章节的多次调整&#xff0c;不到最后一刻很难定稿。此时&#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…
阅读更多...
Tomcat web.xml文件中的mime-mapping

Tomcat web.xml文件中的mime-mapping

在Tomcat安装目录的conf/web.xml文件中&#xff0c;定义了大量的<mime-mapping>元素&#xff0c;例如&#xff1a; 其中<extension>指定了文件的扩展名&#xff0c;<mime-type>指定了mime类型&#xff0c;放在<mime-mapping>元素中&#xff0c;就是将…
阅读更多...
某60工业互联网安全测试技术学习记录

某60工业互联网安全测试技术学习记录

系列文章目录 文章目录 系列文章目录前言工业互联网安全测试技术安全工具分类常用安全工具介绍 主机安全测试5.1 主机安全测试概览5.2 通用主机安全测试技术主机信息扫描 5.3 Linux主机安全测试5.4 Android 安全测试5.5 Windows主机安全测试5.6 UNIX 主机安全测试 工业渗透测试…
阅读更多...
基于单片机的指纹密码锁（论文+源码）

基于单片机的指纹密码锁（论文+源码）

1.系统设计 基于单片机的指纹锁控制系统设计的整体框图如图2.1所示&#xff0c;主控制模块选用单片机STC89C52单片机&#xff0c;同时还包括AT24C02存储电路&#xff0c;指纹模块&#xff0c;LCD12864液晶&#xff0c;继电器&#xff0c;矩阵键盘等硬件电路。其中指纹模块和矩…
阅读更多...
分布式事务 - seata安装

分布式事务 - seata安装

分布式事务 - seata 一、本地事务与分布式事务 1.1、本地事务 本地事务&#xff0c;也就是传统的单机事务。在传统数据库事务中&#xff0c;必须要满足四个原则&#xff08;ACID&#xff09;。 1.2、分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构…
阅读更多...
【LeetCode刷题-滑动窗口】--567.字符串的排列

【LeetCode刷题-滑动窗口】--567.字符串的排列

567.字符串的排列 方法&#xff1a;滑动窗口 由于排列不会改变字符串中每个字符的个数&#xff0c;所以只有当两个字符串每个字符的个数均相等时&#xff0c;才是另一个字符串的排列 根据这一性质&#xff0c;记s1的长度为n&#xff0c;遍历s2中的每个长度为n的子串&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023