HTML练习之路16(精美电商悬浮窗)

最新推荐文章于 2024-06-14 00:12:25 发布

沐曦可期

最新推荐文章于 2024-06-14 00:12:25 发布

阅读量3k

点赞数 4

文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/qq_62714412/article/details/122697441

版权

本次要完成如图所示的拼图效果：

本题我们采用无序列表的方法设计。

整体框架可以看成一个<ul>包裹五个<li>,下面的五行信息用<li>修饰即可（ul相当于为悬浮窗提供一个显示空间，li用于显示我们的内容）。

<ul>
	<li>服装鞋帽</li>
	<li>数码家电</li>
	<li>运动户外</li>
	<li>孕婴用品</li>
	<li>厨卫家居</li>
</ul>

由于需要添加的样式较少，所以我们直接使用内嵌式引入CSS样式。

首先，为避免浏览器默认边距的影响，先初始化浏览器默认边距：

*{
	padding: 0;    /*清除内边距*/
	margin: 0;    /*清除外边距*/
}

接下来，我们对整个结构设置显示范围，字体的类型和大小，并设置悬浮窗的背景图片。

body{
	width: 171px;
	height: 379px;
	font-size: 18px;
    font-family: "微软雅黑";
	background: url("../../../Documents/muxishiye/bg.jpg") left no-repeat; 
                    /*图片显示在左侧，且不平铺*/
	}

然后，我们针对<ul>标签，为它设置一个向上的外边距，让他不要紧贴顶部：

ul{margin-top: 280px;}

最后，我们针对<li>标签进行设置，我们给<li>一个宽度，防止他的内容超出背景范围：

width: 92px;

然后，我们将列表前的标识设置为没有，并设置白色字体，调节外边距后就可以了：

    list-style: none;
    margin-bottom: 14px;
	border-bottom: 2px dotted #C1B0B0;
	margin-left: 45px;
	color: aliceblue

效果图如下：

完整html参考源码和css源码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>精美电商悬浮框</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		
		body{
			width: 171px;
			height: 379px;
			font-size: 18px;
			background: url("../../../Documents/muxishiye/bg.jpg") left no-repeat;
			font-family: "微软雅黑";
			}

		ul{margin-top: 280px;}

		li{
			width: 92px;
			line-height: 26px;
			list-style: none;
			margin-bottom: 14px;
			border-bottom: 2px dotted #C1B0B0;
			margin-left: 45px;
			color: aliceblue
		}
	</style>
</head>

<body>
	<ul>
		<li>服装鞋帽</li>
		<li>数码家电</li>
		<li>运动户外</li>
		<li>孕婴用品</li>
		<li>厨卫家居</li>
	</ul>
</body>
</html>

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538 欢迎入群~）

沐曦可期

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML练习之路16(精美电商悬浮窗)

本次要完成如图所示的拼图效果：本题我们采用无序列表的方法设计。整体框架可以看成一个<ul>包裹五个<li>,下面的五行信息用<li>修饰即可（ul相当于为悬浮窗提供一个显示空间，li用于显示我们的内容）。<ul> <li>服装鞋帽</li> <li>数码家电</li> <li>运动户外</li> <li>孕婴用品</li> <li&
复制链接

扫一扫