HTML练习

最新推荐文章于 2023-01-16 13:07:23 发布

Tsuyuri kanawu

最新推荐文章于 2023-01-16 13:07:23 发布

阅读量87

点赞数

分类专栏：笔记文章标签： css html css3

本文链接：https://blog.csdn.net/zwb1365237878/article/details/111330305

版权

笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

简单实现小米官网手机栏页面
官网图
在这里插入图片描述

HTML代码

<body>
		<div class="content">
			<div class="left"><img src="./pratice/alpha.jpg" ></div>
			<div class="right">
				<div class="picture">
					<img src="pratice/1.jpg" >
					<h3>Note 9 Pro</h3>
					<p> 一亿像素夜景相机</p>
					<p><span>1599元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/2.jpg" >
					<h3>Note 9</h3>
					<p> 天玑800U处理器</p>
					<p><span>1299元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/3.jpg" >
					<h3>Note 9 4G</h3>
					<p>6000mAh长续航</p>
					<p><span>999元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/4.jpg" >
					<h3>小米10至尊版</h3>
					<p> 120x变焦/120w秒冲</p>
					<p><span>5299元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/5.jpg" >
					<h3>Redmi K30S 至尊纪念版</h3>
					<p>144Hz变速高刷屏</p>
					<p><span>2599元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/6.jpg" >
					<h3>Redmi K30至尊版</h3>
					<p>120Hz弹出全面屏</p>
					<p><span>1999元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/7.jpg" >
					<h3>腾讯黑鲨3S</h3>
					<p>骁龙865处理器，120Hz刷新率</p>
					<p><span>3999元起</span></p>
				</div>
				<div class="picture">
					<img src="pratice/8.jpg" >
					<h3>Redmi 9A</h3>
					<p>5000mAh长循环大电量</p>
					<p><span>599元起</span></p>
				</div>
		</div>
	</body>

css代码

<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			transition: all ease 0.5s;
		}
		div.content{
			height:614px;
			width: 1240px;
			margin: 100px auto;
		}
		div.left{
			float: left;
			height: 610px;
			width: 234px;
			background-color: #00FFFF;
		}
		div.right{
			float: right;
			height: 610px;
			width:992px ;
		}
		div.right .picture{
			float: left;
			width: 234px;
			font-size: 14px;
			text-align: center;
		}
		.picture h3{
			color: #333;
		}
		.picture p{
			font-size: 12px;
			color: #b0b0b0;
			margin:10px 0;
		}
		.picture p span{
			color: #ff6700;
		}
		
		/* 动画效果 */
		div.left:hover{
			transform: translateY(-2px);
		}
		div.picture:hover{
			transform: translateY(-2px);
			box-shadow: 3px 3px 10px grey;
		}
		</style>

结果图
在这里插入图片描述阴影浮动效果截图

Tsuyuri kanawu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML练习

简单实现小米官网手机栏页面官网图HTML代码<body> <div class="content"> <div class="left"><img src="./pratice/alpha.jpg" ></div> <div class="right"> <div class="picture"> <img src="pratice/1.jpg" > <h
复制链接

扫一扫