Skip to content

Latest commit

 

History

History
99 lines (89 loc) · 1.87 KB

精美电商悬浮框，案例案例演示.md

File metadata and controls

99 lines (89 loc) · 1.87 KB
Raw

一、效果分析

根据效果图使用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.使用浏览器预览效果