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

已于 2023-11-23 15:17:57 修改
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 前端学习笔记（自用） 文章标签： 前端 大数据 html 前端框架 xhtml
于 2023-11-16 23:54:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65106708/article/details/134453210
版权

版本说明

当前版本号[20231117]。

版本修改说明
20231116初版
20231117补充完后面未发布的内容

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

目录

文章目录

底部（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;
}

banner

结构：通栏 > 版心 > 轮播图（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;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

圆点

结构：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;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、画出圆点。

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

image-20231109152420041

内容

1、初步建立。

<!-- 内容 -->
			<div class="bd">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>

.bd li{
	width: 304px;
	height: 404px;
	background-color: #eef9f4;
}

image-20231109203306106

2、项目将均匀分布在在弹性（flex）或网格（grid）容器的主轴上，项目之间没有额外的间距。

justify-content: space-between;

image-20231109203506075

3、插入图片及文字部分。

<!-- 内容 -->
			<div class="bd">
				<ul>
					<li>
						<a href="#">
							<div class="pic"><img src="../素材/文件素材/uploads/goods1.png" alt="">
							</div>
							<div class="txt">1</div>
						</a>
					</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>

.bd li .pic{
	width: 304px;
	height: 304px;
}

.bd li .txt{
	text-align: center;
}

image-20231109203922113

4、对文字样式进行补充。

<!-- 内容 -->
			<div class="bd">
				<ul>
					<li>
						<a href="#">
							<div class="pic"><img src="../素材/文件素材/uploads/goods1.png" alt="">
							</div>
							<div class="txt">
								<h4>KN95莫兰迪色防护口罩</h4>
								<p>￥79</p>
							</div>
						</a>
					</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>

.bd li h4{
	margin-top: 18px;
	margin-bottom: 8px;
	font-size: 20px;
}

image-20231109204616589

5、改变价格的颜色及符号的大小。

<div class="txt">
								<h4>KN95莫兰迪色防护口罩</h4>
								<p>￥<span>79</span></p>
							</div>

.goods .bd p{
	font-size: 18px;
	color: #aa2113;
} 

.goods .bd p span{
	margin-right: 3px;
	font-size: 22px;
}

image-20231109205210768

人气推荐

1、将之前的新鲜好物代码直接复制下来，然后再把标题改改。

image-20231109205856302

2、将背景颜色修改成白色，并且把右边的“查看全部”给删除。

/* 人气推荐 */
.recommend .bd li{
	background-color: #fff;
}

image-20231109210154029

3、改好字体颜色，加上右边距，美化下更好看点。

.recommend .bd p{
	color: #a1a1a1;
}

.recommend .bd p span{
	margin-right: 3px;
}

image-20231109210533966

热门品牌

1、把“热门品牌”的边框列出来。

<!-- 热门品牌 -->	
		<div class="brand">
			<div class="wrapper">1</div>
		</div>

/* 热门品牌 */
.brand{
	margin-top: 60px;
	height: 468px;
	background-color: #f5f5f5;
}

.brand .wrapper{
	height: 468px;
	background-color: pink;
}

image-20231109211332635

2、发现外边距塌陷。

<!-- 热门品牌 -->	
		<div class="brand">
			<div class="wrapper">
				<!-- 标题 -->
				<div class="title">
					<div class="left">
						<h3>热门品牌</h3>
						<p>新鲜出炉 品质靠谱</p>
					</div>
				</div>
			</div>
		</div>

image-20231109211734919

3、因此使用 overflow: hidden;。

.brand .wrapper{
	height: 468px;
	overflow: hidden;
	background-color: pink;
}

.brand .title{
	margin-bottom: 40px;
}

image-20231111141135185

4、对具有.brand .title选择器的元素设置为相对定位，并为其添加底部外边距对具有.brand .button选择器的元素设置为绝对定位，并将其向右和向下分别偏移。

.brand .title{
	position: relative;
	margin-bottom: 40px;
}

.brand .button{
	position: absolute;
	right: 0;
	bottom: -25px;
}

5、划定位置，改变底色。

<!-- 热门品牌 -->	
		<div class="brand">
			<div class="wrapper">
				<!-- 标题 -->
				<div class="title">
					<div class="left">
						<h3>热门品牌</h3>
						<p>新鲜出炉 品质靠谱</p>
					</div>
				
					<div class="button">
						<a href="#" class="prev">2222</a>
						<a href="#" class="next">2222</a>
					</div>
				</div>
			</div>
		</div>

.brand .button a{
	width: 20px;
	height: 20px;
}

.brand .button .prev{
	background-color: #ddd;
}

.brand .button .next{
	background-color: #00be9a;
}

5、划定位置，改变底色。对图标（i标签），使用Font Awesome图标库中带有左右箭头的图标用于按钮使用，用来导航或翻页操作。

<div class="button">
						<a href="#" class="prev">
							<i class="iconfont icon-arrow-left-bold"></i>
						</a>
						<a href="#" class="next">
							<i class="iconfont icon-arrow-right-bold"></i>
						</a>
					</div>

6、调整居中位置以及元素的左边距。

.brand .button a{
	margin-left: 12px;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: #fff;
}

7、插入图片。

<!-- 内容 -->
				<div class="bd">
					<ul>
						<li><a href="#"><img src="../xtx-pc/uploads/hot1.png" alt=""></a></li>
						<li><a href="#"><img src="../xtx-pc/uploads/hot1.png" alt=""></a></li>
						<li><a href="#"><img src="../xtx-pc/uploads/hot1.png" alt=""></a></li>
						<li><a href="#"><img src="../xtx-pc/uploads/hot1.png" alt=""></a></li>
						<li><a href="#"><img src="../xtx-pc/uploads/hot1.png" alt=""></a></li>
					</ul>
				</div>

8、设置宽高。

.brand .bd li{
	width: 244px;
	height: 306px;
}

9、把底色注销掉。

生鲜

1、用之前设置标题的‘套路’，进行细微的修改。

<!-- 生鲜 -->
		<div class="fresh wrapper">
			<!-- 标题 -->
			<div class="title">
				<div class="left">
					<h3>生鲜</h3>
				</div>
				<div class="right">
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>
			</div>
		</div>

image-20231111144458075

2、设置其上、底部边距。

/* 生鲜 */
.fresh .title{
	margin-top: 60px;
	margin-bottom: 20px;
}

image-20231111144834544

3、设置多个标签用于“热门”安排。

<!-- 生鲜 -->
		<div class="fresh wrapper">
			<!-- 标题 -->
			<div class="title">
				<div class="left">
					<h3>生鲜</h3>
				</div>
				<div class="right">
					<ul>
						<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>
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>
			</div>
		</div>

/* 生鲜 */
.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;
	height: 28px;
	background-color: pink;
}

image-20231114104144210

4、搞定文字的间距和垂直的居中。

.title .right ul a{
	display: block;
	margin-left: 6px;
	height: 20px;
	background-color: pink;
	padding: 0 7px;
	line-height: 20px;
}

image-20231114104433091

5、给第一个“热门”标注特别的颜色和样式。

<li><a href="#" class="active">热门</a></li>

.title .right ul .active{
	background-color: #008e9a;
	color: #fff;
}

image-20231114104929834

生鲜内容

1、初步设计。

<!-- 内容 -->
			<div class="content">
				<div class="left">1</div>
				<div class="right">2</div>
			</div>

/* 生鲜——内容 */
.fresh .content{
	display: flex;
}

image-20231114105348203

2、主轴对齐。

justify-content: space-between;

3、“内容”部分一分为二。

<!-- 内容 -->
			<div class="content">
				<div class="left">
					<a href="#"><img src="../xtx-pc/uploads/fresh_left.png" alt=""></a>
				</div>
				<div class="right">
					<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>
					</ul>
				</div>
			</div>

.content .left{
	width: 248px;
	height: 610px;
	background-color: pink;
}

.content .right{
	width:968px;
	height: 610px;
	background-color: skyblue;
}

image-20231114110544180

4、给右边设置成八个间框，并且让容器于的元素在一行内自动换行。

.content .right ul{
	display: flex;
	flex-wrap: wrap;
}

.content .right li{
	width: 242px;
	height: 305px;
	border: 2px solid lightgreen;
}

image-20231114111138374

5、把背景颜色注销掉，再设置元素的内边距。

.content .right{
	width:968px;
	height:610px;
	/* background-color: skyblue; */
}

.content .right ul{
	display: flex;
	flex-wrap: wrap;
}

.content .right li{
	padding: 10px 21px 0;
	width: 242px;
	height: 305px;
	border: 2px solid lightgreen;
}

image-20231114193425639

6、把“生鲜”右边每个栏的图片及文字标注好。

<li>
							<a href="#">
								<div class="pic"><img src="../xtx-pc/uploads/fresh1.png" alt=""></div>
								<div class="txt">
									<div class="info">
										<h4>双味千层，手抓饼烤肉组合</h4>
										<p>240g/袋 4片袋</p>
										<p>加热即食</p>
									</div>
								</div>
							</a>
						</li>

.content .pic{
	width: 200px;
	height: 180px;
}

image-20231114194341294

7、增加价钱标签。

<li>
							<a href="#">
								<div class="pic"><img src="../xtx-pc/uploads/fresh1.png" alt=""></div>
								<div class="txt">
									<div class="info">
										<h4>双味千层，手抓饼烤肉组合</h4>
										<p>240g/袋 4片袋</p>
										<p>加热即食</p>
									</div>
									<p class="price">￥<span>89.99</span></p>
								</div>
							</a>
						</li>

image-20231114194649719

8、改变价格样式。

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

image-20231114195155210

9、设置“找相似”的提醒。

.content .right li{
	position: relative;
	padding: 10px 21px 0;
	width: 242px;
	height: 305px;
	border: 2px solid lightgreen;
}

/* 产品底部绿色区域 */
.content li .cover{
	position: absolute;
	left: 0;
	bottom: 0;
	padding-top: 15px;
	width: 242px;
	height: 84px;
	background-color: #00be9a;
	text-align: center;
	color: #fff;
}

.content .cover p:nth-child(1){
	font-style: 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;
}

<div class="cover">
	<p>找相似</p>
	<p></p>
	<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>

image-20231114203200853

10、当鼠标滑动时，就能看到。

.content .right li{
	position: relative;
	padding: 10px 21px 0;
	width: 242px;
	height: 305px;
	border: 2px solid lightgreen;
	/* 为了隐藏绿色cover */
	overflow: hidden;
}

/* 产品底部绿色区域 */
.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;
}

/* 鼠标悬停到li，显示cover，改变位置 */
.content .right li:hover .cover{
	bottom: 0px;
}

image-20231114204350709

11、把绿色的框隐藏，制作成当鼠标滑动时，才显示。

.content .right li{
	position: relative;
	padding: 10px 21px 0;
	width: 242px;
	height: 305px;
	/* border: 2px solid lightgreen; */
	/* 为了隐藏绿色cover */
	overflow: hidden;
}
.content .right li:hover{
	border: 2px solid #00be9a;
}

image-20231114204654262

最新专题

1、设置标题。

<!-- 最新专题 -->
		<div class="topic wrapper">
			<div class="title">
				<div class="left">
					<h3>最新专题</h3>
				</div>
				<div class="right">
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>
			</div>
		</div>

/* 最新专题 */
.topic{
	margin-bottom: 40px;
}

.topic .title{
	margin-top: 100px;
}

image-20231114205523929

2、设置内容。

<!-- 最新专题 -->
		<div class="topic wrapper">
			<div class="title">
				<div class="left">
					<h3>最新专题</h3>
				</div>
				<div class="right">
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>
			</div>
			<div class="topic-hd">
				<ul>
					<li>1</li>
					<li>1</li>
					<li>1</li>
				</ul>
			</div>
		</div>

image-20231114205909026

3、分成三部分。

.topic-hd ul{
	display: flex;
	justify-content: space-between;
}

.topic-hd li{
	width: 405px;
	height: 355px;
	background-color: pink;
}

image-20231114210457972

4、插入图片及文字栏。

<div class="topic-hd">
				<ul>
					<li>
						<a href="#">
							<div class="pic"><img src="../xtx-pc/uploads/topic1.png" alt=""></div>
							<div class="txt">1</div>
						</a>
					</li>
					<li>1</li>
					<li>1</li>
				</ul>
			</div>

.topic-hd .pic{
	width: 405px;
	height: 288px;
}

.topic-hd .txt{
	width: 405px;
	height: 67px;
	background-color: skyblue;
}

image-20231114211024136

5、设置flex布局。

.topic-hd .txt{
	display: flex;
	width: 405px;
	height: 67px;
	background-color: skyblue;
}

image-20231114211421433

6、侧轴居中对齐。

.topic-hd .txt{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	width: 405px;
	height: 67px;
	background-color: skyblue;
}

image-20231114211735034

7、图片下的内容列出来。

<div class="txt">
								<div class="left">
									<p>
										<i class="iconfont icon-favorites-fill"></i>
										<span>1220</span>
									</p>
									<p>
										<i class="iconfont icon-favorites-fill"></i>
										<span>1220</span>
									</p>
								</div>
								<div class="right">
									<p>
										<i class="iconfont icon-favorites-fill"></i>
										<span>1220</span>
									</p>
								</div>
							</div>

.topic-hd .txt .left{
	display: flex;
}

image-20231114212201066

8、改变字体图标之间的间距以及大小。

.topic-hd .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-hd .txt .left{
	display: flex;
}

.topic-hd .txt .left p{
	margin-right: 20px;
}

image-20231114212513029

9、改变第一个字体图标的颜色。

.topic-hd .txt .left p:nth-child(1) i{
	color: #aa2113;
}

image-20231114212842217

10、复制三份出来。

image-20231114212958698

11、添加图片中的文字。

<a href="#">
							<div class="pic">
								<img src="../xtx-pc/uploads/topic1.png" alt="">
								<!-- 定位区域 -->
								<div class="cover">111111111</div>
								<div class="txt">
									<div class="left">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
									<div class="right">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
							</div>
							</div>
						</a>

/* 定位区域-文字 */
.topic-hd .cover{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 405px;
	height: 90px;
	background-image: linear-gradient(180deg, rgba(137,137,137,0.00)0%,
	rgba(0,0,0,0.90) 100%);
}

.topic-hd .pic{
	position: relative;
	width: 405px;
	height: 288px;
}

image-20231116084746803

12、设置成左、右部分。

<div class="cover">
									<div class="left">1111</div>
									<div class="right">2222</div>
								</div>

/* 定位区域-文字 */
.topic-hd .cover{
	position: absolute;
	left: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
	bottom: 0;
	width: 405px;
	height: 90px;
	background-image: linear-gradient(180deg, rgba(137,137,137,0.00)0%,
	rgba(0,0,0,0.90) 100%);
}

image-20231116085052100

13、侧轴居中。

align-items: center;

image-20231116085211076

14、补充文字。

<div class="left">
										<h4>吃这些美食才不算辜负自己</h4>
										<p>餐厨起居洗护好物</p>
									</div>

.topic-hd .cover .left {
	color: #fff;
}

.topic-hd .cover .left h4{
	font-size: 20px;
}

image-20231116085603577

15、空出右边的价格栏。

.topic-hd .cover .right{
	padding: 0 7px;
	height: 25px;
	background-color: #fff;
}

image-20231116085905846

16、设置价钱。

<div class="right">
										￥<span>29.9</span><span>起</span></div>
									</div>

.topic-hd .cover .right{
	padding: 0 7px;
	height: 25px;
	color: #aa2113;
	font-size: 15px;
	background-color: #fff;
}

.topic-hd .cover .right span{
	font-size: 18px;
}

image-20231116090455737

17、复制三份。

<!-- 最新专题 -->
		<div class="topic wrapper">
			<div class="title">
				<div class="left">
					<h3>最新专题</h3>
				</div>
				<div class="right">
					<a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
				</div>
			</div>
			<div class="topic-hd">
				<ul>
					
					<li>
						<a href="#">
							<div class="pic">
								<img src="../xtx-pc/uploads/topic1.png" alt="">
								<!-- 定位区域 -->
								<div class="cover">
									<div class="left">
										<h4>吃这些美食才不算辜负自己</h4>
										<p>餐厨起居洗护好物</p>
									</div>
									<div class="right">
										￥<span>29.9</span><span>起</span></div>
									</div>
							</div>
								<div class="txt">
									<div class="left">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
									<div class="right">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
								</div>
						</a>
					</li>	
					
					<li>
						<a href="#">
							<div class="pic">
								<img src="../xtx-pc/uploads/topic1.png" alt="">
								<!-- 定位区域 -->
								<div class="cover">
									<div class="left">
										<h4>吃这些美食才不算辜负自己</h4>
										<p>餐厨起居洗护好物</p>
									</div>
									<div class="right">
										￥<span>29.9</span><span>起</span></div>
									</div>
							</div>
								<div class="txt">
									<div class="left">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
									<div class="right">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
								</div>
						</a>
					</li>
					
					<li>
						<a href="#">
							<div class="pic">
								<img src="../xtx-pc/uploads/topic1.png" alt="">
								<!-- 定位区域 -->
								<div class="cover">
									<div class="left">
										<h4>吃这些美食才不算辜负自己</h4>
										<p>餐厨起居洗护好物</p>
									</div>
									<div class="right">
										￥<span>29.9</span><span>起</span></div>
									</div>
							</div>
								<div class="txt">
									<div class="left">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
									<div class="right">
										<p>
											<i class="iconfont icon-favorites-fill"></i>
											<span>1220</span>
										</p>
									</div>
								</div>
						</a>
					</li>
				</ul>
			</div>
		</div>

image-20231116091344149

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta:desc -->
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <!-- meta:kw -->
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <!-- link:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</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="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <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>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div>
    <!-- 购物车 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>

  <!-- 底部 -->
  <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>
</body>
</html>

完整资源可点击：点击跳转 进行查看。

放下华子我只抽RuiKe5
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web前端+css+html基础阶段小兔鲜项目+psd文件设计稿及项目源码
12-01
在实践项目“小兔鲜”中，你可以学习如何将PSD设计稿中的元素和布局转换为可交互的网页。这将涉及理解颜色理论、字体选择、响应式设计（使网页在不同设备上都能良好显示）和用户体验原则。同时，通过这个项目，你也...
前端Web开发HTML5+CSS3——小兔鲜儿首页
weixin_45594736的博客
12-03 134
小兔仙首页的实现
小兔鲜儿网站-网页源代码.zip
11-17
这段源代码是一款非常实用的网页制作工具，它以小兔鲜儿的形象为设计灵感，界面清新可爱，操作简单易懂。无论你是专业的网页设计师，还是初学者，都能在这个平台上轻松制作出属于自己的个性化网页。小兔鲜儿网页源...
前端静态页面小兔鲜项目.zip
03-22
小兔鲜项目是一个在线蔬菜水果购物平台，用户可以在该平台上浏览各种新鲜的蔬菜水果，并进行在线购买。为了让用户更好地了解和使用该平台，我们需要开发一个前端静态页面，提供以下功能： 1. 首页：展示平台的logo...
前端练手项目小兔鲜，推荐新手
12-24
"前端练手项目小兔鲜"是一个为新手设计的练习平台，旨在帮助初学者提升技能，熟悉实际开发流程。 【HTML基础】 HTML（HyperText Markup Language）是网页内容的基础结构，用于定义页面的各个元素，如标题、段落、...
小兔鲜电商项目（Vite + Vue3）-vue3-rabbit.zip
11-04
"小兔鲜电商项目"是利用现代前端技术栈Vite和Vue3构建的一个示例项目，旨在展示如何高效地开发一个功能完善的电商应用。Vite是由Vue.js创始人尤雨溪开发的新型前端构建工具，它引入了模块热更新、按需编译等特性，极...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 292
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
前端与HTML
m0_65544927的博客
07-21 520
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 239
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 228
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 248
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 974
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 911
CTFWP，ctfshow-web42
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 542
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 361
thinkphp8图片上传的验证
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 663
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
Known框架实战演练——进销存基础数据
knownchen的专栏
07-23 368
本文介绍如何实现进销存管理系统的基础数据模块，基础数据模块包括商品信息、供应商管理和客户管理3个菜单页面。供应商和客户字段相同，因此可共用一个页面组件类。
美团后端二面
weixin_46294086的博客
07-25 218
编程精选网（www.codehuber.com），程序员的终身学习网站已上线！后端技术】、【前端领域】感兴趣的小可爱，也欢迎关注❤️❤️❤️ 【JavaGPT】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💝💝💝！
Vue3可媲美Element Plus Tree组件实战之移除节点
最新发布
felix_alone2012的博客
07-25 539
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
小兔鲜儿psd设计稿
07-28
小兔鲜儿psd设计稿可以用于不同的项目，例如网站、应用程序、平面设计和品牌推广。设计师们可以根据需要进行修改和定制，以实现客户的要求和目标。设计稿的psd格式使得设计师可以轻松地编辑和调整设计，同时保留图层...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

放下华子我只抽RuiKe5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值