小米官网商品列表过渡案例

最新推荐文章于 2021-05-09 00:19:12 发布

yjx_43750162

最新推荐文章于 2021-05-09 00:19:12 发布

阅读量705

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/87280024

版权

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ padding: 0; margin: 0

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			.items{
				width: 1250px;
				height: 320px;
				padding-left: 20px;
				margin:  100px auto;
			}
			.item{
				width: 230px ;
				height: 300px;
				text-align: center;
				margin-right: 20px;
				float: left;
				position: relative;
				top: 0;
				overflow: hidden;
			}
			.pic{
				margin-top: 30px;
			}
			.dics{
				position: absolute;
				bottom: -100px;
				width: 100%;
				height: 100px;
				background-color: #ff6700;
				transition: all 2s;
			}
			.item:hover .dics{
				bottom: 0px;
			}
		</style>
	</head>
	<body>
		<div class="items">
			<div class="item">
				<div class="pic">
					<img src="images/1.jpg" />
				</div>
				<div class="dics"

最低0.47元/天解锁文章

yjx_43750162

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
小米官网商品列表过渡案例

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body{ padding: 0; margin: 0
复制链接

扫一扫