html5+css/电商悬浮框案例制作

noahsark747

已于 2022-04-14 17:17:21 修改

阅读量2.7k

点赞数 4

文章标签： css html5 css3

于 2022-02-05 15:50:26 首次发布

本文链接：https://blog.csdn.net/No1banana/article/details/122790860

版权

一、效果分析

根据效果图使用html和css制作一个电商悬浮窗效果，外层使用一个大盒子<ul>定义，内部插入5个<li>列表并添加边框，最后插入图片背景。

二、制作结构

1.使用Dreamweaver新建一个html5文档，修改标题为“电商悬浮框”搭建结构后引入对应的文字。
在这里插入图片描述

2.定义整个body的公共的样式，在用并集选择器清除对应标签的样式

<style>
	ul,li,body{
		margin: 0;
		padding: 0;
		list-style: none;/*清除列表的样式为none*/
		/*定义公共的样式*/
	}
	body{
		font-size: 16px;
		font-family: "黑体";
		color: #999;
		/*定义公共的样式*/
	}
	ul{
		width: 171px;
		height: 489px;
		background: url("bg.jpg") no-repeat
	}
</style>

3.最后调整各元素对应的位置，不断调整达到最终效果

<html>
<head>
<meta charset="UTF-8">
<title>电商悬浮框</title>
	<style>
		ul,li,body{
			margin: 0;
			padding: 0;
			list-style: none;/**/
			/*定义公共的样式*/
		}
		body{
			font-size: 16px;
			font-family: "黑体";
			color: #FFF;
			/*定义公共的样式*/
		}
		ul{
			width: 120px;
			height: 295px;
			background: url("bg.jpg") no-repeat center center;
			padding-top: 194px;
			padding-left: 45px;
			/*引入ul的背景图片设置不平铺与图片大小*/
		}
		li{
			width: 80px;
			height:40px;
			text-align: center;
			line-height: 40px;
			border-bottom: 1px #FFF solid;
			/*调整各列表对应的位置，添加边框*/
		}
	</style>
</head>
<body>
	<ul>
		<li>服装鞋帽</li>
		<li>数码家电</li>
		<li>运动户外</li>
		<li>孕婴用品</li>
		<li>厨卫家电</li>
	</ul>
</body>
</html>

4.使用浏览器预览效果

在这里插入图片描述

//欢迎加我VX进群交流
vx账号：-Sep07

noahsark747

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
html5+css/电商悬浮框案例制作

一、效果分析根据效果图使用html和css制作一个电商悬浮窗效果，外层使用一个大盒子<ul>定义，内部插入5个<li>列表并添加边框，最后插入图片背景。二、制作结构1.使用Dreamweaver新建一个html5文档，修改标题为“电商悬浮框”搭建结构后引入对应的文字。2.定义整个body的公共的样式，在用并集选择器清除对应标签的样式<style> ul,li,body{ margin: 0; padding: 0; list-style: non
复制链接

扫一扫

html5+css/电商悬浮框案例制作

一、效果分析

二、制作结构

“相关推荐”对你有帮助么？