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

一、效果分析

根据效果图使用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;