随笔分类 - HTML
发表于 2020-12-13 22:22阅读:329评论:0推荐:0
摘要:一、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:
阅读全文 »
发表于 2020-12-13 22:21阅读:430评论:0推荐:0
摘要:1. 技术选型 2. 搭建相关文件夹结构 3. 引入视口标签以及初始化样式 4. 常用初始化样式 5. 首页布局分析以及搜索模块布局 index.css /*搜索模块*/ .search-index{ /*固定定位跟父级没有关系,它以屏幕为准*/ position: fixed; top: 0; l
阅读全文 »
发表于 2020-12-13 22:19阅读:199评论:0推荐:0
摘要:一、rem 基础 1. rem 单位 **em 😗* 相对于父元素的字体大小来说的 <div> <p></p> </div> div { font-size: 12px; } p { width: 10em; height: 10em; background-color: pink; } rem:
阅读全文 »
发表于 2020-12-13 22:18阅读:207评论:0推荐:0
摘要:一、技术选型 二、搭建相关文件夹 三、设置视口标签以及引入初始化样式文件和js文件 四、body 样式 五、rem 适配方案二 body样式修改 index.css body { min-width: 320px; max-width: 750px; /* flexible 给我们划分了 10 等份
阅读全文 »
发表于 2020-12-13 22:16阅读:508评论:0推荐:0
摘要:一、技术选型 二、搭建相关文件夹结构 三、设置视口标签以及引入初始化样式 四、设置公共common.less 文件 common.less //设置常见的屏幕尺寸大小,修改里面的html 文字大小 //因为在 pc 端也可以打开苏宁的移动端网页 //我们默认字体大小为 50 px html { fo
阅读全文 »
发表于 2020-12-13 21:23阅读:267评论:0推荐:0
摘要:一、响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 响应不同的设备来发生变化的 二、 响应式开发原理 三、响应式布局容器 栗子: <style> .co
阅读全文 »