（23）-- 纯移动端制作

最新推荐文章于 2022-04-28 14:58:47 发布
最新推荐文章于 2022-04-28 14:58:47 发布
阅读量227 收藏 1
点赞数
分类专栏： Web基础 文章标签： 纯移动端 rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fredreck1919/article/details/79069433
版权

#用rem制作纯移动端购物主页


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>rem</title>
	<script src="./js/rem.js"></script>
	<style>
		body{
			margin:0;
			padding:0;
		}
		.wrap{
			
			height:1000px;
			
			
			padding-top:50px;
			padding-bottom: 50px;
		}
		.header{
			width: 100%;
			height:50px;
			
			position: fixed;
			top:0;
		}
		.content{    
			height:1000px;
			
		}
		.footer{
			width:100%;
			height:50px;
			background:red;
			position: fixed;
			bottom:0;
		}
		.logo{
			width: 3.75rem;
			height:45px;
			background:url(./img/logo.png) no-repeat;
			background-size:100% 100%; 
			float:left;
		}
		.head-right{
			float:left;
			height:30px;

			width:14.0rem;
			
			border:3px solid red;
			margin-top:8px;
			font-size: 16px;
			line-height: 30px;
			text-indent: 8px;

		}
		
		}
		.banner{
			width:100%;
			height:8.5rem;
		}
		.banner img{
			width:100%;
			
		}
		.Class{
			height:200px;
			margin-top: 20px;
			
		}
		.Class ul{
			margin:0;
			padding: 0;
			list-style: none;

		}
		.Class ul li{
			float: left;
			line-height: 50px;
			padding: 6px;
}
		.active{
			height:280px;
			

		}
		.title{
			height:40px;
			background:#bababa;
			line-height: 40px;
			text-align: center;
			
		}
		.xq{
			height:200px;
			
			margin-top: 30px;
		}
		.xq ul{
			margin:0;
			padding: 0;
			list-style: none;

		}
		.xq ul li{
			float: left;
			line-height: 50px;
			padding: 6px;
}
		
		.ft_top{
			height:15px;
			float: left;
			/*margin-top: 3px;*/
		}
		.ft_top ul{
			margin:0;
			padding: 0;
			list-style: none;

		}
		.ft_top ul li{
			float: left;
			line-height: 25px;
			/*padding: 20px;*/
			padding-left: 60px;
			padding-top: 5px;
			font-size: 10px;
			text-align: center;
}
		.ft_bottom{
			height:15px;
			float: left;

		}
		.ft_bottom ul{
			margin:0;
			padding: 0;
			list-style: none;

		}
		.ft_bottom ul li{
			float: left;
			line-height: 35px;
			
			padding-left: 45px;
			font-size: 15px;
			text-align: center;
}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="header">
			<div class="logo"></div>
			<div class="head-right">搜索
				
			</div>
		</div>
		<div class="content">
			<div class="banner">
				<img src="./img/ad1.jpg" alt="">
			</div>
			<div class="Class">
				<ul>
					<li ><img src="./img/class1.jpg" ></li>
					<li><img src="./img/class2.jpg" ></li>
					<li><img src="./img/class3.jpg" ></li>
					<li><img src="./img/class4.jpg" ></li>
					<li>商品分类</li>
					<li>大优聚惠</li>
					<li>个人中心</li>
					<li>投资理财</li>
				</ul>
			</div>
			<div class="active">
				<div class="title">活动</div>
				<div class="xq">
					<ul>
					<li ><img src="./img/activity1.jpg" ></li>
					<li><img src="./img/activity2.jpg" ></li>
					<li><img src="./img/activity3.jpg" ></li>
					<li><img src="./img/activity4.jpg" ></li>
					<li>春节送礼</li>
					<li>春节送礼</li>
					<li>春节送礼</li>
					<li>春节送礼</li>
				</ul>
				</div>
			</div>
			<div class="active">
				<div class="title">甜点</div>
				<div class="xq">
					<ul>
						<li>赣南大橙</li>
						<li>大兴蓝莓</li>
						<li>费巧克力</li>
						<li>进口鸡面</li>
						<li ><img src="./img/money1.jpg" ></li>
						<li><img src="./img//money2.jpg" ></li>
						<li><img src="./img//money3.jpg" ></li>
						<li><img src="./img//money4.jpg" ></li>
					
					</ul>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="ft_top">
					<ul>
						<li ><img src="./img/home1.png" ></li>
						<li><img src="./img/home2.png" ></li>
						<li><img src="./img/home3.png" ></li>
						<li><img src="./img/home4.png" ></li>
					
					</ul>
					
			</div>
			<div class="ft_bottom">
					<ul>
						<li >首页</li>
						<li>分类</li>
						<li>购物车</li>
						<li>我的</li>
					</ul>
			</div>
		</div>
	</div>
</body>
</html>



兄弟连学python


Python学习交流、资源共享群：563626388 QQ


Fredreck1919
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端+京东移动端首页制作
Sweat_candy的博客
04-05 3549
一：移动端的viewport 手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的 1.viewport的概念:移动设备上,用来显示网页的区域. a)如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话 b)viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜. 2.修改viewport:我们可以通过meta标签去修改vi
制作移动端html,H5移动端各种各样的列表的制作方法(一)
weixin_33957089的博客
06-10 1139
H5移动端各种各样的列表的制作方法(一)前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程.本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程,包括本人的《CSS预...
我的第一次移动端页面制作 — 总结与思考
凹凸实验室
11-08 947
最近被分配到移动端开发组，支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作，下面就谈谈个人总结和思考。整体流程开会大体讲解、讨论与排期 -> 交互设计 -> 视觉设计 -> 页面页面制作 -> 前端开发 -> 测试每个步骤环环相扣，每个职位都需要和其前后的人沟通协调。测试遇到问题则会反馈到相应环节负责人。当然，涉及的职位也不仅于此，还有法务同事审核内容是...
移动端网页的基础制作
m0_50266751的博客
10-14 769
移动端不同于pc端，移动端的设备众多，不能将长宽高写为固定的宽高，那样的话在不同长宽高比的移动设备上就会显示差距较大，在移动端网页布局的显示不能追求完全的一致，只能是差距不大即可，这是有移动设备的种类繁多决定的。 比较好的布局原则是留白固定，宽高不可固定。 Viewport： 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的
制作移动端静态网页（房屋装饰网站）
m0_57823924的博客
04-28 2512
1.创建house.html 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- width=device-width 当前窗口宽度等于100% initial-scale=1 缩放级别为1--> <!-- 步骤一：适配移动端视口 --> <meta name="viewport" content="..
纯正蜂蜜制作工艺响应式网页模板-适配移动端设备-HTML网页源码.zip
最新发布
04-01
此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。...
react-native-tableview-simple：使用纯CSS制作的UITableView的灵活轻量的React Native组件
02-04
用纯CSS制成，目的是为桥接组件提供灵活，轻便的替代方案。 不要再害怕React-Native升级了！ 可能的用例可能是带有几行的“大约”或“设置”屏幕。 为了显示长数据列表，建议将FlatList组件与Cell和Separator组件...
纯数字键盘（兼容移动端）
12-07
这个名为“纯数字键盘（兼容移动端）”的项目提供了一个简洁、轻量级的解决方案，允许用户仅通过数字进行输入，特别适合于需要输入密码、验证码或者进行数值计算的场景。 项目的核心技术栈包括jQuery（jq）、HTML和...
仿携程网移动端网页——包含图片背景
09-23
4. **CSS动画和过渡**：为了提升用户体验，可能会用到CSS3的`transition`和`animation`属性，制作平滑的过渡效果和动画，比如按钮点击反馈、导航切换等。 5. **字体图标**：可能会使用Font Awesome或其他图标库，...
移动端炫酷布局+纯手写+简单易懂.zip
08-22
这个压缩包"移动端炫酷布局+纯手写+简单易懂.zip"提供了一种使用JavaScript库jQuery（简称JQ）实现的手工编写的布局解决方案，特别适合初学者理解和实践。通过这个项目，开发者可以学习到如何利用CSS3、jQuery和...
移动端网页制作
extendworld的博客
11-28 2301
移动端不同于pc端，移动端的设备众多，不能将长宽高写为固定的宽高，那样的话在不同长宽高比的移动设备上就会显示差距较大，在移动端网页布局的显示不能追求完全的一致，只能是差距不大即可，这是有移动设备的种类繁多决定的。比较好的布局原则是留白固定，宽高不可固定。Viewport：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每
如何制作移动端静态网页
weixin_42306249的博客
04-08 2959
开发移动端 兼容移动端主流浏览器，处理Webkit内核浏览器即可 移动端调试的方法 Chrome DevTools(谷歌浏览器)的模拟手机调试 搭建 本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 开发准备 视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题（iOS,Abdroid基本都将这个
（36）-- 城市级联
Fredreck1919的博客
02-28 7175
#连接数据库的城市级联&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;城市联动&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;select id=&quo
（27）-- 用Bootstrap写的OPPO官网商城
Fredreck1919的博客
01-23 2177
#用Bootstrap写的OPPO官网商城首页 Document body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 3000px; padding-top:20px; } .item1,
（28）-- 制作简易商品列表页
Fredreck1919的博客
01-24 2109
#用Bootstrap制作简易商品列表页 商品列表 body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 2000px; padding-top:20px; } .item1,.item2,.item3,.item4{
（22）-- 随机点名
Fredreck1919的博客
01-15 413
#用JS写的随机点名 随机点名 .nam{ width: 300px; height: 200px; border: 3px solid green; margin: 0 auto; margin-top: 100px; font-size: 50px; font-weight: 800; text-align: c
（20）-- 制作兄弟连首页
Fredreck1919的博客
01-12 343
#用HTML和CSS写的兄弟连官网首页 xdl 兄弟连旗下品牌：兄弟会 | 软件学院 | 工业机器人 | 猿代码 全国统一咨询热线 400-700-1307 三板挂牌公司 亿元级IT教育企业
（29）-- 商品详情
Fredreck1919的博客
01-24 276
#制作简易商品详情页 商品详情 body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 800px; padding-top:20px; } .item1,.ite
（24）-- 制作复杂选项卡
Fredreck1919的博客
01-16 265
#引入JavaScript制作复杂选项卡 选项卡 body,ul,li{ padding: 0; margin: 0; list-style: none; } .wrap{ width: 500px; height: 500px; border:1px solid red; margin:0 auto; margin-top
vue-image-editor移动端不能使用
07-09
抱歉，我之前提到的 "vue-image-editor" 插件可能不适用于移动端。这是我的错误，对此表示歉意。 在移动端，你可以考虑使用以下一些适用于移动端的图片编辑库或工具： 1. PhotoEditor SDK：这是一个功能强大的移动端图片编辑库，支持多种编辑功能，包括裁剪、旋转、滤镜、调整亮度、对比度等。它提供了适用于 iOS 和 Android 的 SDK，可以轻松集成到你的 Vue 应用中。 2. Aviary：这是 Adobe 公司推出的一个移动端图片编辑 SDK，它提供了丰富的编辑工具和效果，包括裁剪、调整颜色、添加文字等。你可以使用 Aviary SDK 来实现移动端图片编辑功能。 3. imgix：这是一个强大的图片处理和编辑服务，它提供了多种图片处理功能，包括裁剪、缩放、调整色彩等。你可以使用它的 API 来集成图片编辑功能到你的移动端应用中。 请记住，在选择和使用这些库或工具时，务必阅读它们的文档和示例代码，以确保它们适用于你的项目需求和技术栈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值