根据效果图使用html和css制作一个电商悬浮窗效果,外层使用一个大盒子<ul>
定义,内部插入5个<li>
列表并添加边框,最后插入图片背景。
1.使用Dreamweaver新建一个html5文档,修改标题为“电商悬浮框”搭建结构后引入对应的文字。
<style>
</style>
</head>
<body>
<ul>
<li>服装鞋帽</li>
<li>数码家电</li>
<li>运动户外</li>
<li>孕婴用品</li>
<li>厨卫家电</li>
</ul>
</body>
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.使用浏览器预览效果