本次要完成如图所示的拼图效果:
本题我们采用无序列表的方法设计。
整体框架可以看成一个<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 欢迎入群~)