HTML和CSS实现手机图文列表

最新推荐文章于 2021-06-07 13:33:30 发布
最新推荐文章于 2021-06-07 13:33:30 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： 代码实例 文章标签： html css 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/109564728
版权

1.手机图文列表实现（仿小米官网）

HTML部分: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="小米文件列表.css">
	</head>
	<body>
		<div class="phone">
			<div class="phone_left">
				<img src="img/phone0.webp" alt="">
			</div>
			<div class="phone_right">
				<ul class = "phone_ul">
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone1.webp" alt="phone">
							</div>
							<h3 class = "title">小米10至尊版</h3>
							<p class = "desc">120X 变焦/120W秒冲/120Hz屏幕</p>
							<p class = "price">
								<span class="price1">5299</span>元起
								<!--<span class="price2">
									<span>2099</span>元
								</span>-->
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone2.webp" alt="phone">
							</div>
							<h3 class = "title">Redmi K30至尊版</h3>
							<p class = "desc">120Hz弹出全面屏,天机1000+旗舰处</p>
							<p class = "price">
								<span class="price1">1999</span>元起
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone3.webp" alt="phone">
							</div>
							<h3 class = "title">腾讯黑鲨3S</h3>
							<p class = "desc">骁龙865处理器,120Hz刷新率</p>
							<p class = "price">
								<span class="price1">3799</span>元起
								<span class="price2">
									<span>3999</span>元
								</span>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone4.webp" alt="phone">
							</div>
							<h3 class = "title">Redmi 9A</h3>
							<p class = "desc">5000mAh长循环大电量,6 53"超大护...</p>
							<p class = "price">
								<span class="price1">599</span>元起
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone5.webp" alt="phone">
							</div>
							<h3 class = "title">小米10青春版 5G</h3>
							<p class = "desc">50倍潜望式变焦/轻薄5G手机</p>
							<p class = "price">
								<span class="price1">1899</span>元起
								<span class="price2">
									<span>2099</span>元
								</span>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone6.webp" alt="phone">
							</div>
							<h3 class = "title">小米10</h3>
							<p class = "desc">驿龙865/1亿像素相机</p>
							<p class = "price">
								<span class="price1">3799</span>元起
								<span class="price2">
									<span>3999</span>元
								</span>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone7.webp" alt="phone">
							</div>
							<h3 class = "title">Redmi K30 Pro</h3>
							<p class = "desc">双模5G, 骁龙865, 弹出全面屏</p>
							<p class = "price">
								<span class="price1">2999</span>元起
								<span class="price2">
									<span>3699</span>元
								</span>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="phone_img">
								<img src="img/phone8.webp" alt="phone">
							</div>
							<h3 class = "title">Redmi K30 Pro 变焦版</h3>
							<p class = "desc">双模5G,骁龙865,弹出全面屏</p>
							<p class = "price">
								<span class="price1">3399</span>元起
								<span class = "price2">
									3999元
								</span>
							</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>  
</html>

CSS部分：

小米文件列表.css

*{
	margin:0;
	padding:0;
}
body{
	/*网页背景颜色*/
	background: #F5F5F5;
}
.phone{
	/*居中*/
	margin: 0 auto;
	width: 1226px;
	height: 628px;
}
.phone .phone_left{
	/*左浮动*/
	float:left;
}
.phone .phone_left img{
	width:234px;
	height: 614px;
}
.phone .phone_right{
	width: 992px;
	height: 614px;
	/*background: #87CFEB;*/
	text-align: center;
	/*列表浮动*/
	float:left;
}
.phone .phone_right .phone_ul li{
	width:234px;
	height: 260px;
	background: #fff;
	/*左右0上下20 内边距*/
	padding:20px 0;
	/*外边距 下左14*/
	margin:0 0 14px 14px;
	list-style: none;
	/*设置li进行浮动*/
    float:left;
}
.phone li a{
	/*取消文本下划线*/
	text-decoration: none;
}
.phone .phone_right li .phone_img{
	width:160px;
	height:160px;
	/*外边距 左右37 下18*/
	margin: 0 37px 18px;
}
.phone .phone_right li .phone_img img{
	width: 160px;
	height:160px;
}
.phone li a{
	text-decoration: none;
}
.phone .phone_right li .title{
	width:214px;
	height: 21px;
	font-size: 14px;
	color:#333;
	margin:0 10px 2px;
	font-weight: normal;
}
.phone .phone_right li .desc{
	width:214px;
	height:18px;
	color:#b0b0b0;
	font-size: 12px;
	margin: 0 10px 10px;
}
.phone .phone_right li .price{
	width:214px;
	height: 21px;
	color:#ff6700;
	font-size:14px;
	margin:0 10px 14px;	
}
.phone .phone_right li .price .price2{
	color:#b0b0b0;
	text-decoration: line-through;
}

 

夹心776655
关注
专栏目录
HTML-图文列表
weixin_45750514的博客
08-12 784
手机版列表html
12-29
微信公众号中的列表显示html，包含html、css及分页显示
手机版图文列表html,图文列表.html
weixin_39877050的博客
06-07 220
*{margin: 0;padding: 0;}a{font-size: 14px;font-family: "microsoft yahei";line-height: 1.8;text-decoration: none;color: #333;}ul li{list-style: none;}.ck_list{margin: 0 auto;width: 90%;}.ck_list li img...
html生成手机客户端,javascript实现html手机端列表选项
weixin_33199315的博客
06-05 434
javascript实现html手机端列表选项发布时间：2020-06-26 00:45:34来源：亿速云阅读：133作者：Leah这篇文章运用简单易懂的例子给大家介绍javascript实现html手机端列表选项，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。html部分：定位城市上海市css部分：*{margin: 0;padding: 0;list-style: none...
CSS3产品图文列表响应式布局
07-24
【CSS3产品图文列表响应式布局】是一种现代网页设计技术，它主要利用了CSS3的新特性来实现网页元素在不同设备和屏幕尺寸下自动调整布局，以提供最佳的视觉体验。这种布局方式广泛应用于购物商城的商品列表展示和企业...
CSS3社交图文卡片式布局特效
07-24
3. **图文列表**：CSS3的Flexbox或Grid布局能轻松实现图文混排。Flexbox用于一维布局，如水平或垂直排列的卡片；Grid布局则适用于二维布局，可以更灵活地控制卡片在网格中的位置。 4. **动画效果**：CSS3的过渡...
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
CSS3产品图文列表响应式布局.zip
最新发布
10-08
总之，"CSS3产品图文列表响应式布局"是一个结合了现代前端技术的解决方案，旨在提供跨平台的一致性和优秀的用户体验。通过利用CSS3的高级功能和jQuery的便利性，开发者可以创建出适应性强、互动性好且视觉效果出众的...
html5+css3圆角图文展示卡片层叠滑动切换特效.zip
09-26
在“html5+css3圆角图文展示卡片层叠滑动切换特效.zip”这个压缩包中，我们可以看到一个利用这两种技术实现的动态展示卡片的特效。这种特效通常用于产品展示、信息分类或者新闻滚动等场景，可以吸引用户注意力，提高...
手机网站列表HTML5页面
11-03
手机网站列表HTML5页面 手机网站列表HTML5页面 手机网站列表HTML5页面
html5手机端查看图片
12-23
HTML5,手机端查看图片，可全屏，放大，下载，等等操作
CSS3 手机端直接使用的列表左滑删除特效.rar
07-10
html5 CSS3 实现手机端直接使用的列表左滑删除特效，模拟了手机上很多软件列表，比如QQ好友列表、微信消息列表、联系人列表等向左侧滑，显示删除按钮的功能，本效果在打开后，即时添加列表项，然后在任意列表项上向左滑，在列表右侧会显示出删除按钮，这是目前手机上已经普遍应用的一个功能。适用浏览器：FireFox、Chrome、Safari、Opera等。
百度相框图片列表切换展示 html+css
08-24
模仿百度的图片切换效果，实现相框图片列表切换，html5+css3 界面精美
CSS 网页布局中的图文列表实现代码
09-25
div+css布局实例:常用图文混排--搜狐图文.
前端(二）移动端布局实例及常用css列表-学习笔记整理
码python的Vinsmoke
05-10 1024
移动端页面布局 需求：以如下天天生鲜首页效果图为例，制作相应的静态页面 项目目录如下： ├─css ├─images ├─js └─index.html 目录结构说明： css中用于存放相应的css文件，通过link标签引入到html页面 <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
bscroll.js实现html手机端城市列表
Hhjian524的博客
03-04 1753
效果图 直接上代码： html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
HTML5 手机内容样式
一直专注于互联网
11-13 570
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0&
HTML——制作一个图片列表
dengyunhui1210的博客
06-06 1945
总结： 1）html有很多默认样式，然而实际应用中并不需要，因此要在制作样式之前清除掉默认样式。 2）注意清除margin-top塌陷 3）使用float：left后要使用clear：both清除其影响 4）注意要兼容IE <!DOCTYPE html> <html lang="en"> <head> <meta ch...
HTML5网页设计：DIV+CSS布局的体育运动主题静态网站
1. **DIV+CSS布局**：使用HTML的`<div>`元素作为容器，通过CSS来控制布局和样式，实现响应式和模块化的网页设计。 2. **CSS样式**：通过CSS定义字体、颜色、背景、边距、边框等属性，创建出视觉效果丰富的网页。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值