移动端开发案例

2023-12-11 01:56| 来源: 网络整理| 查看: 265

1.移动端技术选型

方案：单独制作移动页面方案布局：流式布局

2.搭建相关文件夹结构

在这里插入图片描述其中index.html是京东首页，index.css是自己写的样式，另外一个css初始化文件可以从http://necolas.github.io/normalize.css//下载保存到相应位置. images主要是放置背景图，upload主要是放置一些产品图片

3.设置视口标签以及引入初始化样式

在这里插入图片描述 4.整体html结构

在这里插入图片描述

5.分析页面布局

移动端的布局和网页端的布局基本一样，也是大盒子套小盒子，综合应用流式、定位和移动进行布局，不同的是，移动端的布局是用百分比作为单位。 body初始化样式，

body { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; color: #666; line-height: 1.5; }

body必须先设置好，只有设置好了body后，才能写好里面的内容，body的宽度设置为100%后，里面的内容就默认和body一样宽了

5.1头部在这里插入图片描述 html结构

打开京东App，购物更轻松立即打开

css样式

.app { height: 45px; } .app ul li { float: left; height: 45px; line-height: 45px; background-color: #333333; text-align: center; color: #fff; } .app ul li:nth-child(1) { width: 8%; } .app ul li:nth-child(1) img { width: 10px; } .app ul li:nth-child(2) { width: 10%; } .app ul li:nth-child(2) img { width: 30px; vertical-align: middle; } .app ul li:nth-child(3) { width: 57%; } .app ul li:nth-child(4) { width: 25%; background-color: #F63515; }

首先将高度写死，然后将li设置浮动，水平居中和垂直居中，利用.app ul li:nth-child(n)对这4个部分的宽度设置百分比，li中的img需要缩放. 在这里插入图片描述 logo图片默认和文字的基线对齐，设置line-height是不能

【本文地址】

移动端开发案例

移动端开发案例

今日新闻

推荐新闻