2021-08-12

最新推荐文章于 2021-12-21 17:10:32 发布

李王一

最新推荐文章于 2021-12-21 17:10:32 发布

阅读量73

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_51081867/article/details/119650451

版权

这是一个使用HTML和CSS实现的小米手机产品展示页面布局示例。页面包含左侧一个固定宽度的图片区域，右侧是一个浮动布局的网格系统，展示了多款小米手机产品，包括型号、特点和价格。鼠标悬停时，图片会添加阴影效果，提升用户体验。

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

仿小米手机版块

下面展示主要代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 1226px;
				height: 615px;
				background-color: blue;
				margin: 0 auto;
			}
			.box .left {
				float: left;
				width: 292px;
				height: 615px;
				margin-right: 10px;
			}
			.box .right {
				float: right;
				width: 910px;
				height: 615px;
				background-color: blue;
			}
			.box .right ul li {
				float: left;
				width: 220px;
				height: 303px;
				background-color: #5500ff;
				list-style: none;
				margin-right: 10px;
				margin-bottom: 10px;
			}
			.box .right ul .four {
				margin-right: 0px;
			}
			.box .right ul .eight {
				margin-right: 0px;
			}
			.left img {
				height: 615px;
			}
			.left img:hover {
				box-shadow: 5px 5px 5px  #666;
			}
			.right img {
				width: 220px;
				margin-bottom: 2px;
			}
			.right h4 {
				font-weight: 400;
				text-align: center;
				margin-bottom: 2px;
			}
			.right h6 {
				text-align: center;
				color: #7D7D7D;
				margin-bottom: 2px;
			}
			.right h5 {
				color: #FF0000;
				text-align: center;
			}
			.right ul li:hover {
				box-shadow: 5px 5px 5px  #666;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<a href="#"><img src="img/left1.png" ></a>
			</div>
			<div class="right">
				<ul>
					<li class="one"><a href="#"><img src="img/right1.png" ></a><h4>xiaomi MIX4</h4><h6>CUP全面屏</h6><h5>4999元起</h5></li>
					<li class="two"><a href="#"><img src="img/right2%20.png" ></a><h4>note 10 Pro</h4><h6>天玑1100年度旗舰店</h6><h5>1699元起</h5></li>
					<li class="three"><a href="#"><img src="img/right3.png" ></a><h4>Redmi Note 10 5G</h4><h6>5G 小金刚|期间长续航</h6><h5>1099元起</h5></li>
					<li class="four"><a href="#"><img src="img/right4%20.png" ></a><h4>小米MIX FLOD</h4><h6>折叠大屏}自研芯片</h6><h5>9999元起</h5></li>
					<li class="five"><a href="#"><img src="img/right5.png" ></a><h4>小米11 Pro</h4><h6>1/1.12''GN2|xiaolong 888</h6><h5>4999元起</h5></li>
					<li class="six"><a href="#"><img src="img/right6%20.png" ></a><h4>小米11 青春版</h4><h6>小米11 青春版 轻薄</h6><h5>2099元起</h5></li>
					<li class="seven"><a href="#"><img src="img/right7.png" ></a><h4>小米11 Ultra</h4><h6>1/1.12''GN2|2K四微曲屏</h6><h5>5499元起</h5></li>
					<li class="eight"><a href="#"><img src="img/right8.png" ></a><h4>K40 游戏增强版</h4><h6>轻薄电竞设计</h6><h5>1999元起</h5></li>
				</ul>
			</div>
		</div>
	</body>
</html>

结果图：
在这里插入图片描述

李王一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-12

仿小米手机版块下面展示主要代码。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 1226px; height: 615px; b
复制链接

扫一扫