```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="static/css/font-icon.css" />
<title>移动端布局参考方案(以商城为例)</title>
<style>
/* 初始化 */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #666;
}
html {
/* vw: 可视区宽度,100vw:表示占满100份 */
width: 100vw;
height: 100vh;
/* 在html中设置字体大小, 给后的rem单位用 */
font-size: 14px;
}
body {
min-width: 360px;
background-color: #fff;
display: flex;
flex-flow: column nowrap;
}
body > header {
background-color: #333;
color: white;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
position: fixed;
width: 95vw;
}
body > .slider {
height: 180px;
}
body > .slider > img {
width: 100%;
}
/* 主导航区 */
nav {
height: 200px;
display: flex;
/* 变成多行容器 */
flex-flow: row wrap;
}
nav > div {
/* 占宽度四分之一 */
width: 25vw;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
nav > div > a:first-of-type {
text-align: center;
}
nav > div img {
width: 50%;
}
.hot {
color: coral;
}
.title {
font-size: 1.2rem;
font-weight: normal;
text-align: center;
margin-top: 10px;
}
/* 热销区样式 */
.hot-goods {
border: 1px solid #cfcfcf;
margin-top: 10px;
font-size: 0.8rem;
display: flex;
flex-flow: row wrap;
}
.hot-goods img {
width: 100%;
}
.hot-goods > .goods-img {
padding: 10px;
box-sizing: border-box;
flex: 1 0 30vw;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.hot-goods > .goods-img > div {
display: flex;
justify-content: space-around;
}
/* 商品列表 */
.list-goods {
padding: 10px;
box-sizing: border-box;
border: 1px solid #cfcfcf;
font-size: 0.8rem;
margin-top: 10px;
display: flex;
flex-flow: column nowrap;
}
.list-goods > .goods-desc {
display: flex;
margin: 10px 0;
}
.list-goods img {
width: 100%;
}
.list-goods > .goods-desc > a {
padding: 10px;
box-sizing: border-box;
}
.list-goods > .goods-desc > a:hover {
color: lightseagreen;
}
/* 页脚 */
body > footer {
color: #666;
background-color: #efefef;
border-top: 1px solid #ccc;
height: 55px;
position: fixed;
bottom: 0;
width: 100vw;
display: flex;
justify-content: space-around;
}
body > footer > a {
margin-top: 10px;
font-size: 0.8rem;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
body > footer > a > span:first-of-type {
font-size: 1.6rem;
}
</style>
</head>
<body>
<!-- 页眉 -->
<header>
<a href="">LOGO</a>
<span class="iconfont"></span>
</header>
<!-- 轮播图 -->
<div class="slider">
<img src="static/images/banner.jpg" alt="" />
</div>
<!-- 主导航区 -->
<nav>
<div>
<a href=""><img src="static/images/link1.webp" alt="" /></a>
<a href="">超市精选</a>
</div>
<div>
<a href=""><img src="static/images/link2.webp" alt="" /></a>
<a href="">服装百货</a>
</div>
<div>
<a href=""><img src="static/images/link3.webp" alt="" /></a>
<a href="">优惠劵</a>
</div>
<div>
<a href=""><img src="static/images/link4.webp" alt="" /></a>
<a href="">超市精选</a>
</div>
<div>
<a href=""><img src="static/images/link1.webp" alt="" /></a>
<a href="">超市精选</a>
</div>
<div>
<a href=""><img src="static/images/link2.webp" alt="" /></a>
<a href="">服装百货</a>
</div>
<div>
<a href=""><img src="static/images/link3.webp" alt="" /></a>
<a href="">优惠劵</a>
</div>
<div>
<a href=""><img src="static/images/link4.webp" alt="" /></a>
<a href="">超市精选</a>
</div>
</nav>
<!-- 热销商品 -->
<h2 class="title">热销商品<span class="iconfont hot"></span></h2>
<!-- 热销商品 -->
<div class="hot-goods">
<div class="goods-img">
<a href=""><img src="static/images/goods1.jpg" alt="" /></a>
<p>Apple iPhone X 128G</p>
<div>
<span>4299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods1.jpg" alt="" /></a>
<p>Apple iPhone X 256G</p>
<div>
<span>6299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods1.jpg" alt="" /></a>
<p>Apple iPhone X 512G</p>
<div>
<span>8299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>Apple iPhone X 128G</p>
<div>
<span>4299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>Apple iPhone X 256G</p>
<div>
<span>6299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
<div class="goods-img">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<p>Apple iPhone X 512G</p>
<div>
<span>8299 元</span>
<span class="iconfont hot"></span>
</div>
</div>
</div>
<!-- 商品列表 -->
<h2 class="title">商品列表<span class="iconfont hot"></span></h2>
<div class="list-goods">
<div class="goods-desc">
<a href=""><img src="static/images/goods4.jpg" alt="" /></a>
<a href=""
>[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
以上都是我瞎编的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods3.jpg" alt="" /></a>
<a href=""
>[白条24期免息]Apple洗衣机,专业清洗苹果手机,
苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
以上都是我瞎编的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods5.png" alt="" /></a>
<a href=""
>[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
以上都是我瞎编的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
<div class="goods-desc">
<a href=""><img src="static/images/goods2.jpg" alt="" /></a>
<a href=""
>[白条24期免息]华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑
十代酷睿(i5 16G 512G MX250 触控屏 多屏协同)灰, 以上都是我瞎编的<span
class="iconfont hot"
style="vertical-align: middle;"
></span
></a
>
</div>
</div>
<!-- 页脚 -->
<footer>
<a href="">
<span class="iconfont hot"></span>
<span>首页</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>分类</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>购物车</span>
</a>
<a href="">
<span class="iconfont hot"></span>
<span>未登录</span>
</a>
</footer>
</body>
</html>
```
- 文档说明
- 开始
- linux
- 常用命令
- ps -ef
- lsof
- netstat
- 解压缩
- 复制
- 权限
- 其他
- lnmp集成安装
- supervisor
- 安装
- supervisor进程管理
- nginx
- 域名映射
- 负载均衡配置
- lnmp集成环境安装
- nginx源码安装
- location匹配
- 限流配置
- 日志配置
- 重定向配置
- 压缩策略
- nginx 正/反向代理
- HTTPS配置
- mysql
- navicat创建索引
- 设置外网链接mysql
- navicat破解
- sql语句学习
- 新建mysql用户并赋予权限
- php
- opcache
- 设计模式
- 在CentOS下安装crontab服务
- composer
- 基础
- 常用的包
- guzzle
- 二维码
- 公共方法
- 敏感词过滤
- IP访问频次限制
- CURL
- 支付
- 常用递归
- 数据排序
- 图片相关操作
- 权重分配
- 毫秒时间戳
- base64<=>图片
- 身份证号分析
- 手机号相关操作
- 项目搭建 公共处理函数
- JWT
- 系统函数
- json_encode / json_decode 相关
- 数字计算
- 数组排序
- php8
- jit特性
- php8源码编译安装
- laravel框架
- 常用artisan命令
- 常用查询
- 模型关联
- 创建公共方法
- 图片上传
- 中间件
- 路由配置
- jwt
- 队列
- 定时任务
- 日志模块
- laravel+swoole基本使用
- 拓展库
- 请求接口log
- laravel_octane
- 微信开发
- token配置验证
- easywechart 获取用户信息
- 三方包
- webman
- win下热更新代码
- 使用laravel db listen 监听sql语句
- guzzle
- 使用workman的httpCLient
- 修改队列后代码不生效
- workman
- 安装与使用
- websocket
- eleticsearch
- php-es 安装配置
- hyperf
- 热更新
- 安装报错
- swoole
- 安装
- win安装swoole-cli
- google登录
- golang
- 文档地址
- 标准库
- time
- 数据类型
- 基本数据类型
- 复合数据类型
- 协程&管道
- 协程基本使用
- 读写锁 RWMutex
- 互斥锁Mutex
- 管道的基本使用
- 管道select多路复用
- 协程加管道
- beego
- gin
- 安装
- 热更新
- 路由
- 中间件
- 控制器
- 模型
- 配置文件/conf
- gorm
- 初始化
- 控制器 模型查询封装
- 添加
- 修改
- 删除
- 联表查询
- 环境搭建
- Windows
- linux
- 全局异常捕捉
- javascript
- 常用函数
- vue
- vue-cli
- 生产环境 开发环境配置
- 组件通信
- 组件之间通信
- 父传子
- 子传父
- provide->inject （非父子）
- 引用元素和组件
- vue-原始写法
- template基本用法
- vue3+ts项目搭建
- vue3引入element-plus
- axios 封装网络请求
- computed 计算属性
- watch 监听
- 使用@符 代替文件引入路径
- vue开发中常用的插件
- vue 富文本编辑
- nuxt
- 学习笔记
- 新建项目踩坑整理
- css
- flex布局
- flex PC端基本布局
- flex 移动端基本布局
- 常用css属性
- 盒子模型与定位
- 小说分屏显示
- git
- 基本命令
- fetch
- 常用命令
- 每次都需要验证
- git pull 有冲突时
- .gitignore 修改后不生效
- 原理解析
- tcp与udp详解
- TCP三次握手四次挥手
- 缓存雪崩 穿透 更新详解
- 内存泄漏-内存溢出
- php_fpm fast_cgi cig
- redis
- 相关三方文章
- API对外接口文档示范
- elaticsearch
- 全文检索
- 简介
- 安装
- kibana
- 核心概念 索引 映射 文档
- 高级查询 Query DSL
- 索引原理
- 分词器
- 过滤查询
- 聚合查询
- 整合应用
- 集群
- docker
- docker 简介
- docker 安装
- docker 常用命令
- image 镜像命令
- Contrainer 容器命令
- docker-compose
- redis 相关
- 客户端安装
- Linux 环境下安装
- uni
- http请求封装
- ios打包
- 视频纵向播放
- 日记
- 工作日记
- 情感日志
- 压测
- ab
- ui
- thorui
- 开发规范
- 前端
- 后端
- 状态码
- 开发小组未来规划