HTML
关注
分享
扫一扫
文章平均质量分 84
杨贵妃会飞飞飞
越菜越爱
展开
-
移动 WEB 开发之 阿里百秀移动端页面制作
技术选型需求分析1.页面布局分析2. 屏幕划分页面制作1. 项目前期准备搭建项目结构创建 html 骨架结构以及引入相关样式<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie原创 2020-12-13 22:13:23 · 655 阅读 · 0 评论 -
移动 WEB 开发布局方式 ---- flex 布局
一、flex布局体验1.1 传统布局 flex 布局1. 2 初体验1. 搭建 HTML 结构<div> <span>1</span> <span>2</span> <span>3</span></div>2. 添加样式<style> div { width: 80%; height: 300px; b原创 2020-12-13 22:08:35 · 228 阅读 · 0 评论 -
使用 flex布局 制作携程网首页
1. 技术选型2. 搭建相关文件夹结构3. 引入视口标签以及初始化样式4. 常用初始化样式5. 首页布局分析以及搜索模块布局index.css/*搜索模块*/.search-index{ /*固定定位跟父级没有关系，它以屏幕为准*/ position: fixed; top: 0; left: 50%; /*固定的盒子应该有宽度*/ -webkit-transform: translateX(-50%); transform: ..原创 2020-12-13 22:07:28 · 674 阅读 · 0 评论 -
移动 WEB 开发布局方式 ---- rem 适配布局
一、rem 基础1. rem 单位em :相对于父元素的字体大小来说的<div> <p></p></div>div { font-size: 12px; } p { width: 10em; height: 10em; background-color: pink; }rem:相对于 html 元素字体大小来说的 html { .原创 2020-12-13 22:01:15 · 321 阅读 · 0 评论 -
使用 flexible.js + rem 制作苏宁移动端首页
一、技术选型二、搭建相关文件夹三、设置视口标签以及引入初始化样式文件和js文件四、body 样式五、rem 适配方案二 body样式修改index.cssbody { min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份 */ width: 10rem; margin: 0 auto; line-height: 1.5; font-family: Arial, He原创 2020-12-13 22:00:23 · 360 阅读 · 0 评论 -
移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作
一、技术选型二、搭建相关文件夹结构三、设置视口标签以及引入初始化样式四、设置公共common.less 文件common.less//设置常见的屏幕尺寸大小，修改里面的html 文字大小//因为在 pc 端也可以打开苏宁的移动端网页//我们默认字体大小为 50 px html { font-size: 50px;}//注意：这句话一定要写在最上面//定义划分的份数 15等份@no:15;//320 大小的屏幕@media screen and (min-widt原创 2020-12-13 21:57:51 · 821 阅读 · 2 评论 -
移动 WEB 开发布局方式 ---- 响应式布局
一个页面布局兼容了 PC端 iPad 端 和移动端所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型特点：响应式布局是不需要单独写移动端页面的响应不同的设备来发生变化的一、响应式开发1.1 响应式开发原理1.2 响应式布局容器栗子：<style> .container { height: 150px; background-color: pink; margin: 0 auto;原创 2020-12-13 21:21:20 · 238 阅读 · 0 评论