建c2c网站,wordpress pot文件,网站制作流程是什么,网站被百度惩罚放弃学习链接
Grid网格布局
前端五大主流网页布局
flex布局看这一篇就够了
grid布局看这一篇就够了
用六个案例学会响应式布局
伸缩盒响应式页面布局实战
实现响应式布局的五种方式 - csdn
如何完成响应式布局#xff0c;有几种方法#xff1f;看这个就够了
响应式布局总…学习链接
Grid网格布局
前端五大主流网页布局
flex布局看这一篇就够了
grid布局看这一篇就够了
用六个案例学会响应式布局
伸缩盒响应式页面布局实战
实现响应式布局的五种方式 - csdn
如何完成响应式布局有几种方法看这个就够了
响应式布局总结
Flexbox 打造栅格系统
CSS中 自定义属性变量详解
CSS 之 z-index 属性详解
CSS深入理解z-indexz-index相关知识总结 文章目录 学习链接第一章 介绍1、课程介绍现代布局四大核心技术课程收获涵盖内容 2、常见布局展示及技术分析PC端-版心PC端-后台移动端响应式扩展 第二章 CSS还原UI设计1、Photoshop还原ui设计2、蓝湖App3、PxCook自动标注工具4、imgcook设计稿智能平台 第三章 布局中的尺寸和位置长度单位与颜色分类长度绝对长度单位相对长度单位颜色颜色关键词RGB颜色HEX颜色HSL颜色 尺寸css盒模型组成CSS盒模型的注意点 块级盒子与内联盒子块级盒子的特性内联盒子的特性 自适应盒模型的特性标准盒模型与怪异盒模型 位置浮动样式详解浮动特性注意点定位样式详解相对定位及特性绝对定位及特性固定定位及特性黏性定位及特性 第四章 Flex布局主轴与交叉轴flex容器和flex子项 换行与缩写主轴对齐交叉轴对齐居中内联块的垂直方向上居中方法1弹性居中方法2弹性居中方法3行高居中方法4table-cell居中 块元素的水平垂直方向上居中方法1弹性居中方法2定位位移居中方法3定位 margin auto方法4flex margin auto居中 不定项居中方法1弹性居中方法2text-align居中法 均分列布局弹性布局浮动 计算 子项分组布局方法1flex flex方法2flex margin auto flex-grow扩展比例示例1示例2 flex-shrink收缩比例示例1示例2 flex-basis示例1示例2 flex缩写orderalign-self等高布局弹性布局floatpaddingmargin 两列与三列布局弹性布局floatmargin-leftfloatoverflow:hiddenfloat定位 stickyFooter布局弹性布局calcmin-height 溢出项布局弹性布局float布局inline-block布局 swiper轮播案例reset.css实践 知乎导航案例实践 第五章 Grid布局第六章 移动端适配布局移动端概念及UI设计稿尺寸逻辑像素与物理像素viewport视口750px的设计稿 rem布局方案移动端rem布局原理解析em单位rem单位 动态计算font-size动态设置根元素字体大小利用vw动态设置字体大小 测量rem数值及插件使用vsCode工具中的 px to rem 插件利用蓝湖、PxCook获取rem数值 rem综合案例:网易移动端步骤 vw布局方案移动端vw布局及插件使用vsCode工具中的 px-to-vw 插件pxcook vw综合案例:B站移动端 第七章 响应式布局媒体查询语法详解媒体类型媒体特性逻辑操作符 媒体查询的编写位置及顺序示例 响应断点(阈值)的设定示例 响应式栅格系统示例1示例2 响应式交互实现利用 :checked 伪类 ghost博客示例htmlgrid.cssreset.css ant-design后台管理界面示例效果图全部展示侧边栏可收缩主题色、固定内容、显示内容响应式变化 要点index.htmlglobal.cssindex.css 自定义变量前言1\. 变量的声明2\. var() 函数3\. 变量值的类型4\. 作用域5\. 响应式布局6\. JavaScript 操作7\. 兼容性处理 第一章 介绍
1、课程介绍
现代布局四大核心技术 课程收获 涵盖内容 2、常见布局展示及技术分析
PC端-版心
flex布局 grid布局 PC端-后台
flex布局 grid布局 移动端
等比缩放使用rem或vw/vh单位实现 响应式
同一套代码同时适应PC端和移动端
使用media媒体查询实现 扩展 第二章 CSS还原UI设计
1、Photoshop还原ui设计 尺寸文字颜色信息的获取 切图操作:启动生成器公勾选图像资源 首选项-增效工具-启用生成器文件-生成-图像资源选择图层并修改名字为icon.png即可在psd所在文件夹生成该图层对应的图片。修改图层名为200% icon.png即可生成2倍图。
2、蓝湖App
蓝湖是一款设计图的共享平台帮助互联网团队更好地管理设计图。自动生成设计图标注与团队共享设计图展示页面之间的跳转关系。蓝湖支持从Sketch、Ps、Xd一键共享、在线讨论蓝湖已经成为新一代产品设计的工作方式
访问地址:https://lanhuapp.com/
使用方式蓝湖官网下载ps插件登录账号上传打开
可以方便的进行rem与px之间单位换算在ps中的扩展插件-蓝湖标记为切图资源重新上传到web然后下载切图 3、PxCook自动标注工具
像素大厨是款适合设计师们使用的一款免费、交互流畅以及全平台支持的标注切图软件。功能多样化且非常实用操作上也很是简单它能够支持对Ps和Sketch设计元素尺寸、元素距离文本样式与颜色的智能标注并且还支持智能切图
ps安装pxcook插件
在ps中的扩展插件-pxcook标记为切图导出到pxcook pxcook可以直接打开psd文件 4、imgcook设计稿智能平台
imgcook 专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入通过智能化技术一键生成可维护的前端代码包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。目前此产品是阿里巴巴前端委员会智能化小组的服务化的内外落地产品
访问地址:https://www.imgcook.com/
可以直接生成前端代码
第三章 布局中的尺寸和位置
长度单位与颜色分类
长度 CSS中使用的每个属性都允许拥有一个或一组值例如color : red 代码中其中color为属性red为值。在CSS中有很多属性是用来控制位置和尺寸的所以它们的值必须是一个表示长度的数值而数值是需要添加单位的。 CSS中有两种长度单位——绝对长度单位和相对长度单位。重要的是要知道它们之间的区别以便理解它们控制的元素将变得有多大。
绝对长度单位 以下都是绝对长度单位——它们与其他任何东西都没有关系通常被认为总是相同的大小。
单位名称cm厘米mm毫米in英寸pt点px像素 这些绝对长度单位中除了px像素经常使用外其他并不常用。
相对长度单位 相对长度单位相对于其他一些东西比如父元素的字体大小或者视图端口的大小。使用相对单位的好处是经过一些仔细的规划您可以使文本或其他元素的大小与页面上的其他内容相对应。以下列出了常见相对单位。
单位名称em在font-size中使用是相对于父元素的字体大小在其他属性中使用是相对于自身的字体大小ex字符“x”的高度ch数字“0”的宽度rem根元素的字体大小lh元素的line-heightvw视窗宽度的1%vh视窗高度的1%vmin视窗较小尺寸的1%vmax视图大尺寸的1% 像rem和vw单位会在移动端布局中所使用本教程的第六章中将对rem和vw单位进行详细的讲解这里就不再赘述了。
颜色 在CSS中指定颜色的方法有很多其中一些是最近才实现的。在CSS中相同的颜色值可以在任何地方使用无论您指定的是文本颜色、背景颜色还是其他颜色。 现代计算机的标准颜色系统是24位的它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色每个通道有256个不同的值(256 x 256 x 256 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。
颜色关键词 可以直接在代码中使用颜色单词进行赋值例如color : red 这是一种指定颜色的简单易懂的方式。 RGB颜色 在CSS中可以使用公式rgb(red, green, blue)将颜色指定为RGB值。每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。 要显示黑色请将所有颜色参数设置为 0如下所示rgb(0, 0, 0)要显示白色请将所有颜色参数设置为 255如下所示rgb(255, 255, 255)。
HEX颜色 在CSS中可以使用#rrggbb格式的十六进制值指定颜色。其中 rr红色、gg绿色和 bb蓝色是介于 00 和 ff 之间的十六进制值与十进制 0-255 相同。 HSL颜色 在CSS中可以使用色相、饱和度和明度HSL来指定颜色格式如下hsla(hue, saturation, lightness)。 色相hue是色轮上从 0 到 360 的度数。0 是红色120 是绿色240 是蓝色。饱和度saturation是一个百分比值0 表示灰色阴影而 100 是全色。亮度lightness也是百分比0 是黑色50 是既不明也不暗100是白色。 本章当中将通过各种软件测量出UI设计图中的尺寸长度及颜色取值。
尺寸
css盒模型组成 在 CSS 中所有的元素都被一个个的“盒子(box)包围着理解这些“盒子”的基本原理是我们使用CSS实现准确布局、处理元素排列的关键 盒子的组成:content 内容、padding 内填充、border 边框、margin 外边距
CSS盒模型的注意点 padding不能为负值而margin可以为负值 盒子margin-left为负值时盒子自身会向左移动盒子margin-top为负值时盒子自身会向上移动盒子margin-right为负值时会让相邻盒子会向左移动盒子margin-top为负值时会让下面的盒子会向上移动 背景色会平铺到非margin的区域 border设置的颜色会盖住盒子设置的背景色 margin-top传递的现象及解决方案 margin-right、margin-left、margin-bottom没有传递的问题 1个div内套1个div内部div设置margin-top将会把外面div也向下拉 给外部div加上透明的border 给内部div使用padding代替margin-top 给外部div开启BFC 使用通用方法伪类它可同时解决margin-top传递和浮动元素导致父容器高度塌陷 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody { margin: 0; }.box1{ width:200px; background:pink; }.box2{width:100px;height:100px;background:skyblue;margin-top: 50px;}.clearfix::before,.clearfix::after {content: ;display: table;clear: both;}/style
/head
bodydiv classbox1 clearfixdiv classbox2/div/div
/body
/htmlmargin上下叠加的现象及解决方案 相邻盒子左右外边距没有这个问题1个div的下方有1个div上面div设置margin-bttom下面div设置margin-top那么这2个div上下边距取较大的值
块级盒子与内联盒子
在 CSS 中我们广泛地使用两种“盒子”块级盒子(blockbox)和 内联盒子(inline box)。这两种盒子会在页面中表现出不同的行为方式块级盒子:div、p、h1…内联盒子:span、a、strong
块级盒子的特性
独占一行支持所有样式不写宽度的时候跟父容器的宽度相同所占区域是一个矩形
内联盒子的特性 盒子不会产生换行 有些样式不支持例如:width、height等 对padding-top、padding-bottom有作用但不影响位置。对margint-top、margin-bottom没用 不写宽度的时候宽度由内容决定 所占的区域不一定是矩形 内部文字多时会自动折行 内联标签之间会有空隙 在写代码时2个span标签紧紧挨着不要换行或空格设置font-size为0再单独设置font-size
自适应盒模型的特性
自适应盒模型指的是当盒子不设置宽度时盒模型相关组成部分的处理方式是如何的
1个div内部有1个div默认内部div会占满外部div的宽度当内部div不设置具体宽度而设置margin、padding、border时宽度会自动计算
标准盒模型与怪异盒模型 在标准模型中如果你给盒设置 width 和 height实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小 content-box:width、height-content 在怪异模型中所有宽度都是可见宽度所以内容宽度是该宽度减去边框和填充部分 border-box :width、height - content padding border
应用1量取尺寸时不用再去计算一些值
应用2解决一些需要设置百分比和盒模型值
1个div内部套1个div内部div需要设置padding但是div不能超过外部div。做法有 内部div不设置具体宽度直接设置padding内部div设置了具体宽度同时设置border-box内部div设置具体宽度为calc(100% - 2padding)
位置
浮动样式详解
当元素被浮动时会脱离文档流根据float的值向左或向右移动直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止是CSS布局中实现左右布局的一种方式
文档流:文档流是元素在Web页面上的一种呈现方式按照出现的先后顺序进行排列
使用浮动后父容器高度会塌陷一般都需要清除浮动 clear属性 1个父容器div中上下2个div上面div开启向左浮动下面div默认会顶上去父容器的高度就不是上下2个div的高度之和了而是下面div的高度。此时下面div可以使用clear:left清除左边浮动就是下面div从上面div的底部开始排列而不会顶上去了。并且此时父容器的高度也被下面清除浮动的div撑起来了达到了等于上下div之和的效果。如果上面1个div向左浮动1个div向右浮动则最下面的div而已使用clear:both同时清除左右浮动 BFC 空标签 div styleclear:both;/div.clearfix:after{} .clearfix:after {content: ;clear: both;display: block; /* 块级盒子的clear:both才有效 */
}通用用法伪类 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody { margin: 0; }.box1{ width:200px; background:pink; border: 1px solid red; }.box2{width:100px;height:100px;background:skyblue;float: left}.clearfix::before,.clearfix::after {content: ;display: table;clear: both;}/style
/head
bodydiv classbox1 clearfixdiv classbox2/div/div
/body
/html浮动特性注意点 只会影响后面的元素 文本不会被浮动元素覆盖 具备内联盒子特性:宽度由内容决定 具备块级盒子特性:支持所有样式 浮动放不下会自动换行
定位样式详解
CSS position属性用于指定一个元素在文档中的定位方式其中toprightbottom 和left 属性则决定了该元素的最终位置 相对定位及特性
相对定位的元素是在文档中的正常位置偏移给定的值不影响其他元素布局相对于自身进行偏移
绝对定位及特性 绝对定位的元素脱离了文档流绝对定位元素不占据空间 具备内联盒子特性:宽度由内容决定 具备块级盒子特性:支持所有样式 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时则相对于可视区定位
固定定位及特性
固定定位与绝对定位相似但是会固定在可视区中具备内联盒子特性:宽度由内容决定具备块级盒子特性:支持所有样式固定定位元素不受祖先元素影响
黏性定位及特性
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位之后为固定定位
扩展学习:display、书写模式与逻辑属性、BFC、默认样式等
第四章 Flex布局
主轴与交叉轴 主轴默认从左往右可以修改这个默认的方向
flex容器和flex子项 flex-direction修改主轴方向rowrow-reversecolumncolumn-reverse
换行与缩写
flex-wrap控制换行
flex-grow[flex-directionflex-wrap]
主轴对齐
jusctify-content
取值分配空白空间flex-start元素沿着主轴起边排列flex-end元素沿着主轴终边排列center元素居中排列space-around空白分布到元素两侧绝对均匀分布space-between空白均匀分布到元素间两侧贴边space-evenly空白分布到元素的单侧均匀分布
交叉轴对齐
align-content 必须要加上flex:wrap这个align-content才会生效如果没加上flex:wrap这个align-content就不会生效。而只要加了flex:wrapalign-content的优先级高于align-items。 而align-items在flex:wrap或flex:nowrap都可以生效 align-content的flex-start、flex-end、center 是针对交叉轴方向多行时一起移动单行时align-content不生效而align-items的flex-start、flex-end、center也是针对交叉轴方向多行时每个单行都有效果单行时仅align-items能生效哦它们效果不一样
取值分配空白空间stretch默认值将元素的长度设置为相同的值前提是元素没有设置高度flex-start元素沿着辅轴起边排列flex-end元素沿着辅轴终边排列center元素居中排列space-around空白分布到元素两侧绝对均匀分布space-between空白均匀分布到元素间两侧贴边space-evenly空白分布到元素的单侧均匀分布
align-items
取值弹性元素在辅轴上的对齐方式stretch默认值将元素的长度设置为相同的值前提是元素没有设置高度flex-start元素不会拉伸沿着辅轴起边对齐flex-end元素不会拉伸沿着辅轴终边对齐center居中对齐baseline基线对齐
居中
内联块的垂直方向上居中
div classbox测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
/div方法1弹性居中
.box {width: 300px;height: 200px;background: skyblue;display: flex;align-items: center;
}方法2弹性居中
.box {width: 300px;height: 200px;background: skyblue;display: flex;flex-wrap: wrap;align-content: center;
}方法3行高居中
/* 缺点仅针对单行文字 */
.box {width: 300px;height: 200px;background: skyblue;line-height: 200px; /* 与height相等 */
}方法4table-cell居中
.box {width: 300px;height: 200px;background: skyblue;display:table-cell;vertical-align: middle;
}块元素的水平垂直方向上居中
div classboxdiv/div
/div方法1弹性居中
.box {width: 300px;height: 200px;background: skyblue;display: flex;justify-content: center;align-items: center;
}
.box div{width:100px;height:100px;background:pink;
}方法2定位位移居中
.box {width: 300px;height: 200px;background: skyblue;position: relative;
}
.box div{width:200px;height:50px;background:pink;position: absolute;left:50%; /* 用margin也可以但是要根据width和height值来相应改动 */top:50%;transform: translate(-50%,-50%);
}方法3定位 margin auto
.box {width: 300px;height: 200px;background: skyblue;position: relative;
}
.box div{width:200px;height:50px;background:pink;position: absolute;left:0;top:0;right:0;bottom:0;margin:auto;
}方法4flex margin auto居中
.box {width: 300px;height: 200px;background: skyblue;position: relative;display: flex;
}
.box div{width:200px;height:50px;background:pink;margin:auto;
}不定项居中
方法1弹性居中 !DOCTYPE html
html langenstyle.box {width: 300px;height: 150px;background: skyblue;display: flex;justify-content: center;align-items: flex-end;}.box div {width: 30px;height: 30px;background: pink;border-radius: 50%;margin:5px; /* margin产生间隙 */}/stylebodydiv classboxdiv/divdiv/divdiv/div/div/body/html方法2text-align居中法 !DOCTYPE html
html langenheadstyle.box {width: 300px;height: 150px;background: skyblue;position: relative;}.box section {text-align: center; /* 文字居中 */width:100%; /* 占满宽度 */position: absolute;bottom:0;font-size:0; /* font-size设置为0消除行内块元素之间的空隙 */}.box div {width: 30px;height: 30px;background: pink;border-radius: 50%;display: inline-block;font-size:16px; /* 恢复文字大小 */margin:5px;}/style/headbodydiv classboxsectiondiv/divdiv/divdiv/div/section/div/body/html均分列布局
弹性布局 !DOCTYPE html
html langenheadstyle.main{height:200px;background:skyblue;display: flex;justify-content: space-between;align-items: flex-end;padding:0 20px;}.main div{width:30px;height:30px;background:pink;border-radius: 50%;}/style/headbodydiv classmaindiv/divdiv/divdiv/divdiv/divdiv/div/div/body
/html浮动 计算 特别麻烦还需要计算不支持自动调节
!DOCTYPE html
html langen
headstyle.main{width:500px;height:200px;background:skyblue;overflow: hidden;padding:0 20px;box-sizing: border-box;}.main section{width:600px;}.main div{width:30px;height:30px;background:pink;border-radius: 50%;float:left;margin-right:77px;}/style/headbodydiv classmainsectiondiv/divdiv/divdiv/divdiv/divdiv/div/section/div/body
/html子项分组布局
方法1flex flex !DOCTYPE html
html langen
headstyle.main{height:200px;background: skyblue;display: flex;justify-content: space-between;align-items: center;}.main div:nth-of-type(2){display: flex;margin-left:10px;}.main .box{width:100px;height:100px;background:pink;}/style
/head
bodydiv classmaindiv classbox1/divdivdiv classbox2/divdiv classbox3/div/div/div/body
/html方法2flex margin auto !DOCTYPE html
html langenheadstyle.main{height:200px;background: skyblue;display: flex;align-items: center;}.main div{width:50px;height:100px;background:pink;margin-right:10px;}.main div:nth-of-type(3){margin-right: auto;}.main div:nth-of-type(6){margin-right: auto;}/style/headbodydiv classmaindiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div/body/htmlflex-grow扩展比例
默认值是0表示不占用剩余的空白间隙扩展自己的宽度
示例1
内部只有1个子元素时
!DOCTYPE html
html langen
headstyle.main {width: 500px;height: 300px;background: skyblue;display: flex;}.main div {width: 100px;height: 100px;background: pink;/* flex-grow: 0; 默认的 *//* 如果比例值为1就占满剩余的所有空间 *//* flex-grow: 1; *//* 400 * 0.5 - 200 100 - 300 *//* flex-grow: 0.5; */ /* 才知道原来可以写小数的写小数不会占满所有剩余空间 *//* 当比例值大于等于1的时候都会占满整个空间 */flex-grow : 2;}/style
/headbodydiv classmaindiv1/div/div/body/html示例2
内部有多个子元素时
!DOCTYPE html
html langenheadstyle.main2{width: 500px;height: 300px;background: skyblue;display: flex;}.main2 div:nth-of-type(1){width:200px;height:100px;background:pink;flex-grow: 0.2;}.main2 div:nth-of-type(2){width:100px;height:100px;background:pink;flex-grow: 0.1;}/style/headbodydiv classmain2div1/divdiv2/div/div/body/htmlflex-shrink收缩比例
默认值是1表示flex容器空间不足时元素的收缩比例
示例1
!DOCTYPE html
html langenheadstyle.main{width:500px;height:200px;background:skyblue;display: flex;}.main div{width:600px;height:100px;background:pink;/* flex-shrink : 1; 自动收缩跟容器大小相同 *//* flex-shrink: 0; */flex-shrink: 0.5;}/style/headbodydiv classmaindiv1/div/div/body
/html示例2
!DOCTYPE html
html langen
headstyle.main2{width:500px;height:200px;background:skyblue;display: flex;}.main2 div:nth-of-type(1){width:300px;height:100px;background:pink;flex-shrink: 0.2;}.main2 div:nth-of-type(2){width:400px;height:100px;background:pink;flex-shrink: 0.1;}/* 超出父容器 200 px *//* 300 400 - 500 - 200 */ /* 由于flex-shrink都是1, 所以按width来等比缩减 *//* 300 - 3/7 * 200 400 - 4/7 * 200 */ /* 这里计算的很准确 *//* 由于flex-shrink是2 * 300 和 1 * 400, 所以按width * flex-shrink来等比缩减 *//* 300 - 6/10 * 200400 - 4/10 * 200 */ /* 这里计算的很准确 *//style
/head
bodydiv classmain2div1/divdiv2/div/div/body
/htmlflex-basis
默认值是auto指定了flex元素在主轴方向上的初始大小
示例1
flex-basis会覆盖主轴方向上的值比如现在主轴方向是水平所以会覆盖width元素的宽度为200px。如果修改主轴方向为垂直所以会覆盖height那么元素的高度将为200
!DOCTYPE html
html langenheadstyle.main{width:500px;height:500px;background:skyblue;display: flex;flex-direction: column;}.main div{width:100px;height:100px;background:pink;flex-basis: 200px;}/style/headbodydiv classmaindiv/div/div/body
/html示例2
!DOCTYPE html
html langen
headstyle.main{width:500px;height:500px;background:skyblue;display: flex;align-items: flex-start;}.main div{background:pink;/* 当设置为0时 div的宽度将会保持1个最小的能容纳1个字的宽度 *//* 当设置为auto时div的宽度将自适应宽度 */flex-basis: 100%; /* 0% auto 200px 100% */}/style
/head
bodydiv classmaindiv测试文字/div/div/body
/htmlflex缩写
!DOCTYPE html
html langenheadstyle.main{width:500px;height:500px;background:skyblue;display: flex;align-items: flex-start;}.main div{background:pink;/* flex-grow: 1;flex-shrink: 1;flex-basis: 0%; */flex:1;/* flex-grow: 0;flex-shrink: 1;flex-basis: 0%; *//* flex:0; *//* flex-grow: 1;flex-shrink: 1;flex-basis: auto; *//* flex:auto; *//* flex-grow: 1;flex-shrink: 0;flex-basis: 50%; *//* flex:1 0 50%; */}/style/headbodydiv classmaindiv测试文字/div/div/body
/htmlorder
默认值是0改变某一个flex子项的排序位置 !DOCTYPE html
html langen
headstyle.main{width:500px;height:500px;background:skyblue;display: flex;}.main div{width:100px;height:100px;background:pink;}.main div:nth-of-type(1){order:1;}.main div:nth-of-type(4){order:-1;}/style
/head
bodydiv classmaindiv1/divdiv2/divdiv3/divdiv4/div/div
/body
/htmlalign-self 默认值是auto控制单独某一个flex子项的垂直对齐方式
!DOCTYPE html
html langenheadstyle.main{width:500px;height:500px;background:skyblue;display: flex;align-items: center;}.main div{width:100px;height:100px;background:pink;}.main div:nth-of-type(4){height:50px;/* align-self默认是auto表示等于align-items的值 *//* align-self: auto; */ align-self: flex-end;}/style/headbodydiv classmaindiv1/divdiv2/divdiv3/divdiv4/div/div/body
/html等高布局
弹性布局 flex布局下左右2个div当它们都未设置高度时默认就会以最高的弹性项等高。
!DOCTYPE html
html langenheadstyle.main{width:500px;background:skyblue;display: flex;justify-content: space-between;}.main div{width:100px;background:pink;}/style/headbodydiv classmaindivp测试内容/pp测试内容/pp测试内容/pp测试内容/p/divdivp测试内容/pp测试内容/pp测试内容/pp测试内容/pp测试内容/pp测试内容/p/div/div/body
/htmlfloatpaddingmargin
不推荐使用 !DOCTYPE html
html langenheadstyle.main{width:500px;background:skyblue;overflow: hidden;}.main div{width:100px;background:pink;float:left;/* 设置超大padding然后用margin-bottom抵消 */padding-bottom:2000px;margin-bottom:-2000px;}.main div:nth-of-type(2){float:right;}/style/headbodydiv classmaindivp测试内容/pp测试内容/pp测试内容/pp测试内容/p/divdivp测试内容/pp测试内容/pp测试内容/pp测试内容/pp测试内容/pp测试内容/p/div/div/body
/html两列与三列布局
弹性布局
左右两边固定大小中间自适应中间部分的宽度也可以使用calc来计算但是在弹性布局中就没必要去算了 !DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100vh; /* 占满可视区高度 */background:skyblue;display: flex;}.col1{width:200px;background:pink;}.col2{flex-grow: 1;background:springgreen;}.col3{width:100px;background: tomato;}/style/headbodydiv classmaindiv classcol1/divdiv classcol2/divdiv classcol3/div/div/body
/htmlfloatmargin-left
左侧固定宽度浮动右侧使用margin-left !DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100vh;background:skyblue;}.col1{width:200px;height:60%;float:left;background:pink;}.col2{height:100%;background:lightcoral;margin-left:200px;/* overflow: hidden; */}/style/headbodydiv classmaindiv classcol1/divdiv classcol2/div/div/body
/htmlfloatoverflow:hidden
左侧固定宽度浮动右侧使用overflow:hidden开启BFC !DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100vh;background:skyblue;}.col1{width:200px;height:60%;float:left;background:pink;}.col2{height:100%;background:lightcoral;overflow: hidden;}/style/headbodydiv classmaindiv classcol1/divdiv classcol2/div/div/body
/html
float定位
右侧使用定位实现其中left设置固定值其它都设置为0 !DOCTYPE html
html langenheadstylebody{margin:0;position: relative;}.main{height:100vh;background:skyblue;}.col1{width:200px;height:60%;float:left;background:pink;}.col2{height:100%;background:lightcoral;position: absolute;top: 0;right: 0;bottom: 0;left: 200px;}/style/headbodydiv classmaindiv classcol1/divdiv classcol2/div/div/body
/htmlstickyFooter布局
弹性布局
上面是页头下面是页脚当中间部分不够时页脚部分要在最下面当中间部分很多时也要把页脚挤到最下面 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{margin:0;}.main{/* 设置最小高度 */min-height:100vh;display: flex;/* 更改主轴方向 */flex-direction: column;}.main .header{height:100px;background:pink;}.main .content{/* 中间占满剩余高度 */flex-grow: 1;}.main .footer{height:100px;background:skyblue;}/style/headbodydiv classmaindiv classheader/divdiv classcontentp测试内容/pp测试内容/pp测试内容/pp测试内容/p/divdiv classfooter/div/div/body
/htmlcalcmin-height
上面是页头下面是页脚当中间部分不够时页脚部分要在最下面当中间部分很多时也要把页脚挤到最下面 !DOCTYPE html
html langenheadstylebody{margin:0;}.main .header{height:100px;background:pink;}.main .content{/* 设置最小高度 */min-height: calc(100vh - 200px);background-color: #bfa;}.main .footer{height:100px;background:skyblue;}/* 处理p标签的margin-top的传递导致出现滚动条问题 */.clearfix::before,.clearfix::after {content: ;display: table;clear: both;}/style/headbodydiv classmaindiv classheader/divdiv classcontent clearfixp测试内容/pp测试内容/pp测试内容/pp测试内容/pp测试内容/p/divdiv classfooter/div/div/body
/html溢出项布局
类似于这种 弹性布局
使用flex布局默认不换行设置弹性项不收缩 !DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100px;background:skyblue;display: flex;align-items: center;}.main div{width:100px;height:80px;background:pink;margin-right:10px;/* 不收缩 */flex-shrink: 0;}/style/headbodydiv classmaindiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div/body
/htmlfloat布局
利用浮动实现
!DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100px;background:skyblue;}.main section{/* 这里宽度需要自己计算 */width:2000px;}.main div{width:100px;height:80px;background:pink;margin-right:10px;/* 浮动 */float:left;}/style/headbodydiv classmainsectiondiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/section/div/body
/htmlinline-block布局 !DOCTYPE html
html langenheadstylebody{margin:0;}.main{height:100px;background:skyblue;/* 不换行 */white-space: nowrap; /* 取出行内块之间的空隙 */font-size: 0;}.main div{width:100px;height:80px;background:pink;display: inline-block;margin-right: 20px;font-size: 16px;}/style/headbodydiv classmaindiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div/body
/htmlswiper轮播案例 1、整个容器开启相对定位
2、底部开启绝对定位占满宽度100%设定高度使用flex布局水平垂直居中
3、左右两侧开启绝对定位占满高度100%使用flex布局垂直居中宽度由内容决定
1个div内套了好几个div外面div使用display:flexb布局后把里面div的宽度都设置为100%并且flex-shrink设置为0不让它们收缩。这样子元素肯定就溢出来了。这叫溢出性布局可以用于做轮播图。
!DOCTYPE html
html langenheadlink relstylesheet href./iconfont.csslink relstylesheet href./reset.cssstyle/* 整个容器开启相对定位 */.swiper-container{position: relative;}.swiper-wrapper{/* 使用flex布局 */display: flex;}.swiper-slide{/* 占满父元素的宽度 */width:100%;/* 让子元素不收缩这非常重要 */flex-shrink: 0;}.swiper-slide img{/* 图片占满父元素的宽度高度自适应 */width:100%;}/* 底部开启绝对定位占满宽度100%设定高度使用flex布局水平垂直居中 */.swiper-pagination{position: absolute;height: 28px;width: 100%;bottom:0;display: flex;justify-content: center;align-items: center;}.swiper-pagination-bullet{width:8px;height:8px;border-radius: 50%;background:#c6bcaf;margin:0 4px;}.swiper-pagination-bullet-active{background:white;}/* 左右两侧开启绝对定位占满高度100%使用flex布局水平垂直居中宽度由内容决定 */.swiper-button-prev, .swiper-button-next{position: absolute;top:0;height:100%;display: flex;align-items: center;}.swiper-button-prev{left:0;}.swiper-button-next{right:0;}.swiper-button-prev i, .swiper-button-next i{font-size:44px;color:white;}/style/headbodydiv classswiper-containerdiv classswiper-wrapperdiv classswiper-slideimg srcSwiper.png alt/divdiv classswiper-slideimg srcSwiper.png alt/divdiv classswiper-slideimg srcSwiper.png alt/div/div!-- 如果需要分页器 --div classswiper-paginationspan classswiper-pagination-bullet swiper-pagination-bullet-active/spanspan classswiper-pagination-bullet/spanspan classswiper-pagination-bullet/span/div!-- 如果需要导航按钮 --div classswiper-button-previ classiconfont icon-swiperhoutui/i/divdiv classswiper-button-nexti classiconfont icon-swiperqianjin/i/div/div/body
/htmlreset.css
charset utf-8;/* --------------------重置样式-------------------------------- */body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {margin : 0;padding: 0
}/*设置默认字体*/
body {font-size : 14px;font-style : normal;font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}/*字体太小用户体检不好让small恢复12px*/
small {font-size: 12px
}h1 {font-size: 18px
}h2 {font-size: 16px
}h3 {font-size: 14px
}h4,
h5,
h6 {font-size: 100%
}ul,
ol {list-style: none
}a {text-decoration : none;background-color: transparent
}a:hover,
a:active {outline-width : 0;text-decoration: none
}/*重置表格*/
table {border-collapse: collapse;border-spacing : 0
}/*重置hr*/
hr {border: 0;height: 1px
}/*图形图片*/
img {border-style: none
}img:not([src]) {display: none
}svg:not(:root) {overflow: hidden
}/*下面的操作是针对于html5页面布局准备的不支持ie6~8以及其他低版本的浏览器*/
html {/*禁用系统默认菜单*/-webkit-touch-callout : none;/*关闭iphone Android的浏览器纵向和横向模式中自动调整字体大小的功能*/-webkit-text-size-adjust: 100%
}input,
textarea,
button,
a {/*表单或者a标签在手机点击时会出现边框或彩色的背景区域意思是去除点击背景框*/-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block
}audio,
canvas,
progress,
video {display: inline-block
}audio:not([controls]),
video:not([controls]) {display: none;height : 0
}progress {vertical-align: baseline
}mark {background-color: #ff0;color : #000
}sub,
sup {position : relative;font-size : 75%;line-height : 0;vertical-align: baseline
}sub {bottom: -0.25em
}sup {top: -0.5em
}button,
input,
select,
textarea {font-size: 100%;outline : 0
}button,
input {overflow: visible
}button,
select {text-transform: none
}textarea {overflow: auto
}button,
html [typebutton],
[typereset],
[typesubmit] {-webkit-appearance: button
}button::-moz-focus-inner,
[typebutton]::-moz-focus-inner,
[typereset]::-moz-focus-inner,
[typesubmit]::-moz-focus-inner {border-style: none;padding : 0
}button:-moz-focusring,
[typebutton]:-moz-focusring,
[typereset]:-moz-focusring,
[typesubmit]:-moz-focusring {outline: 1px dotted ButtonText
}[typecheckbox],
[typeradio] {box-sizing: border-box;padding : 0
}[typenumber]::-webkit-inner-spin-button,
[typenumber]::-webkit-outer-spin-button {height: auto
}[typesearch] {-webkit-appearance: textfield;outline-offset : -2px
}[typesearch]::-webkit-search-cancel-button,
[typesearch]::-webkit-search-decoration {-webkit-appearance: none
}::-webkit-input-placeholder {color : inherit;opacity: .54
}::-webkit-file-upload-button {-webkit-appearance: button;font : inherit
}实践 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet href./iconfont.cssstylebody {margin: 0;}.container {width: 500px;height: 300px;margin: 10px auto;overflow: hidden;border: 1px solid red;position: relative;}.boxes {width: 100%;height: 100%;margin: auto;display: flex;transform: translateX(-1000px);}.box {width: 100%;flex-shrink: 0;}.box img {width: 100%;height: 100%;object-fit: cover;}.dots {position: absolute;bottom: 0;background-color: rgba(0, 0, 0, .3);height: 42px;width: 100%;display: flex;align-items: center;justify-content: center;}.dot {width: 8px;height: 8px;background-color: rgba(255, 255, 255, .6);border-radius: 50%;margin: 0 4px;cursor: pointer;}.btn {position: absolute;top: 0;height: 100%;background-color: rgba(0, 0, 0, .3);cursor: pointer;color: #fff;display: flex;align-items: center;}.btn i {font-size: 32px;}.btn.prev-btn {color: red;left: 0;}.btn.next-btn {color: blue;right: 0;}/style
/head
bodydiv classcontainerdiv classboxesdiv classboximg src./1.jpg alt/divdiv classboximg src./2.jpg alt/divdiv classboximg src./3.jpg alt/div/divdiv classdotsdiv classdot/divdiv classdot/divdiv classdot/div/divdiv classprev-btn btni classiconfont icon-swiperhoutui/i/divdiv classnext-btn btni classiconfont icon-swiperqianjin/i/div/div
/body
/html知乎导航案例
分为三个阶段
第一阶段两端变小
第二阶段两端不能再变小时中间空隙变小
第三阶段中间空隙没有了之后input输入框变小
最后input输入框不能再变小时出现滚动条 !DOCTYPE html
html langenheadlink relstylesheet href./iconfont.csslink relstylesheet href./reset.cssstylebody{background:#f6f6f6;}.header-container{background:#ffffff;}.header-wrapper{/* 整体水平居中 */margin:0 auto;/* 头部高度 */height: 52px;/* 设置最小宽度防止再小时文字错位 */min-width:1000px;/* 设置最大宽度 */max-width:1156px;display: flex;align-items: center;}/* 左侧 */.header-logo{margin-right: 40px;}.header-nav{display: flex;}.header-nav li{margin-right:30px;}.header-search{/* 中间搜索框部分占满剩余空间 */flex-grow:1;/* 开启flex布局并让子元素水平居中但是此时子元素是按内容展开宽度的但是子元素可以设置flex-grow:1占满宽度 */display: flex;justify-content: center;}.header-search-wrapper{/* 设置最大宽度 */max-width:482px;height:34px;flex-grow: 1;/* 开启flex布局让 input 和 放大镜图标 垂直居中*/display: flex;align-items:center;justify-content: space-between;background:#f6f6f6;border-radius: 100px;}.header-search-input{/* 去掉输入框的边框 */border:none;/* 去掉输入框的背景色 */background:none;margin:0 20px;}.header-search-wrapper i {margin:0 20px;}.header-btn{/* 由于2个button转成块元素了因此开启flex布局 */display: flex;}.header-btn-login{width:60px;height:32px;border:1px #0066ff solid;border-radius: 3px;color:#0066ff;/* 去掉按钮的背景色 */background:none;cursor: pointer;/* 转成块元素因为button属于内联元素与其它内联元素在一起默认会有空隙 */display: block;margin-left:20px;}.header-btn-zhihu{width:90px;height:32px;background:#0066ff;color:white;/* 去掉按钮的边框 */border:none;border-radius: 3px;display: block;margin-left:20px;cursor: pointer;}/style/headbodydiv classheader-containerdiv classheader-wrapperdiv classheader-logoa href#img src./logo.png alt/a/divul classheader-navli首页/lili会员/lili发现/lili等你来答/li/uldiv classheader-searchdiv classheader-search-wrapperinput classheader-search-input typetext placeholderi classiconfont icon-fangdajing/i/div/divdiv classheader-btnbutton classheader-btn-login登录/buttonbutton classheader-btn-zhihu加入知乎/button/div/div/div/body
/html实践
分为三个阶段
第一阶段两端变小
第二阶段两端不能再变小时中间空隙变小
第三阶段中间空隙没有了之后input输入框变小
最后input输入框不能再变小时出现滚动条
要达到上面三个阶段的变化最重要的是开启flex布局后给子元素添加flex-grow为1同时设定max-width这样这个子元素它就有了伸展的能力占满剩余空间又不能超过最大值。这样它的宽在容器宽度变大的过程中就可以由小变大但是又不会超出指定的大小。
min-width指定元素最小宽度防止宽度再下时避免文字错位。
过程分析
首先search-wrapper设置了flex-grow1所以占满所有剩余空间。
search-wrapper中套了1个search的div给这个search的div设置flex-grow1则这个search要占满search-wrapper的所有剩余空间此时给这个search同时设置max-width则这个search在占满剩余空间的同时又不能超出最大宽度。并且search处于search-wrapper水平居中的位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfont.cssstylebody {margin: 0;background-color: #f6f6f6;}.header-wrapper {background-color: #fff;}ulli {list-style: none;padding: 0;margin: 0;}ul {margin: 0;padding: 0;}a {text-decoration: none;color: #000;}input,button {border: none;background: none;outline: none;}.header-container {max-width: 1156px;min-width: 910px;margin: 0 auto;/* background-color: #e3e3e3; */height: 44px;display: flex;align-items: center;}.search-wrapper {flex: 1;/* background-color: #bfa; */height: 34px;display: flex;align-items: center;justify-content: center;}.search {max-width: 500px;flex-grow: 1;height: 100%;display: flex;align-items: center;background-color: #eee;border-radius: 20px;justify-content: space-between;}.search input {flex-grow: 1;min-width: 300px;height: 100%;box-sizing: border-box;padding-left: 20px;}.search i {color: #666;padding: 0 16px;}.header-container .header-logo {margin-right: 25px;}.nav-items ul {display: flex;}.nav-items ul li {margin: 0 15px;}.nav-items ul li a{color: #8590a6;}.btns {display: flex;}.btns button{color: #0066ff;height: 32px;border-radius: 3px;display: block;margin-left: 20px;}.btns .btn-login {border: 1px solid #0066ff;width: 60px;}.btns .btn-join {background-color: #0066ff;width: 88px;color: #fff;}/style
/head
bodydiv classheader-wrapperdiv classheader-containerdiv classheader-logoa href#img src./zhihu.png alt/a/divdiv classnav-itemsulli classnav-itema href#首页/a/lili classnav-itema href#会员/a/lili classnav-itema href#发现/a/lili classnav-itema href#等你来答/a/li/ul/divdiv classsearch-wrapperdiv classsearchinput typetext placeholder搜索问题、回答、专栏等i classiconfont icon-fangdajing/i/div/divdiv classbtnsbutton classbtn-login登录/buttonbutton classbtn-join加入知乎/button/div/div/div/body
/html第五章 Grid布局
CSS网格是一个用于web的二维布局系统。利用网格你可以把内容按照行与列的格式进行排版。另外网格还能非常轻松地实现一些复杂的布局
第六章 移动端适配布局
移动端概念及UI设计稿尺寸 移动端适配概念 随着移动互联网的发展移动端布局显得非常的重要。移动端布局并不复杂主要是现实各种设备的等比适配让所有移动端设备看起来是相同的
比如在下图中不同设备的尺寸宽度是不同的。如果要做到在不同设备做到都显示完美的网页使用像素这种绝对单位就不能很好的实现了它没法在不同设备下动态发生变化。所以要做到不同设备下的等比适配就要使用到相对单位rem 和 vw实现在不同设备动态控制尺寸大小的功能。 逻辑像素与物理像素
逻辑像素也叫“设备独立像素”对于前端来说就是css中的像素举例iphone6下的逻辑像素为375px。
物理像素即设备屏幕实际拥有的像素点一个设备生产出来他们的像素就已经确定了举例iphone6下的物理像素为750px。
可以发现iphone6下其物理像素是逻辑像素的2倍可用“设备像素比”来表示这个比值即物理像素除以逻辑像素的值可通过JavaScript代码window.devicePixelRatio来获取设备像素比。
那究竟逻辑像素与物理像素的关系是什么呢这里首先先确定什么是相对单位什么又是绝对单位。像m这种绝对单位定义是什么米的长度等于氪86原子的2P10和5d1能级之间跃迁的辐射在真空中波长的1650763.73倍。查到的m的定义如上也就是说在现实世界中m是一个固定的长度。
px全称为pixel像素长度像素长度那么就请问了一个超大屏幕的像素和你笔记本或者手机屏幕的像素大小相同吗也就是说1px在你手机屏幕上显示出来的长度可能为0.1mm在露天演出的电子屏幕上长度为5cm那么0.1mm和5cm相等吗
感觉px好像是一个相对单位但是如果放在网页或者设计人眼中可能就不一定了上面举得那个例子是物理像素在物理像素的背景下px确实是一个相对单位但是在逻辑像素上就不同了css中1px指的是逻辑像素浏览器会将你的逻辑像素转化成物理像素每个设备之间虽然物理像素点大小不一样但是用了逻辑像素的单位后显示的长度就会一样了。
在开发网页的时候写了10px在你的设备上逻辑1px为真实的1.2个像素大小实际看上去为10cm没问题换一个设备逻辑1px为真实的2.4个像素大小也就是说另外一个设备像素大小是你的设备一半那么对于他来说10px就是24个像素了但是实际大小仍然为10cm所以说在有逻辑像素的概念的前提下px是一个绝对长度单位。(引自知乎)
总结如下
逻辑像素CSS中的像素绝对单位保证不同设备下元素的尺寸是相同的css中1px指的是逻辑像素。物理像素设备屏幕实际拥有的像素点相对单位不同设备下物理像素大小不同。
viewport视口
一般移动设备的浏览器都默认设置了一个viewport元标签定义一个虚拟的布局视口layout viewport用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px所以PC上的网页基本能在手机上呈现只不过元素看上去很小一般默认可以通过手动缩放网页。 上面截图中的方块为100px但是在iphone6设备的默认视口下显示的非常小因为默认视口为980px。为了解决这个问题可通过meta标签来修改视口的尺寸大小vsCode工具初始创建HTML代码时自动添加。
meta nameviewport contentwidthdevice-width, initial-scale1.0widthdevice-width表示视口宽度为设备的宽也就是逻辑像素的大小。initial-scale1.0表示初始缩放比例为1即正常大小。下面是设置了viewport视口后的样子。 viewport可选的值有
属性值描述width正整数或devive-width定义视口的宽度单位为像素height正整数定义视口的高度单位为像素不常用initial-scale比例值定义初始缩放值minimum-scale比例值定义缩小最小比例maximum-scale比例值定义放大最大比例user-scalableyes/on定义是否允许用户手动缩放页面默认值yes
总结如下
在移动端布局中一定要提前设置好视口大小即vsCode默认添加形式meta nameviewport contentwidthdevice-width, initial-scale1.0这样可以保证CSS逻辑像素不会受到缩放处理。
750px的设计稿
通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计即750px。当然也可以按照逻辑像素进行设计即375px但是一般设计师不会这么干主要为了设计稿更加清晰。
所以前端在量取尺寸的时候需要除以2才能适配页面中的CSS逻辑像素值。好在现代UI工具如蓝湖、PxCook等都具备自动除以2的标注信息方式后面视频有详细介绍。 那么如何让唯一的一种设计稿尺寸去适配不同设备的像素呢让页面元素能够等比进行放大缩小呢可通过rem和vw这两种相对单位来进行实现这也是本章的重点学习内容。
总结如下
移动端UI设计稿尺寸大小为750px即设备的物理像素可使效果展示更加清晰。移动端需要实现像素换算和设备适配以及页面元素等比缩放布局等。
rem布局方案
移动端rem布局原理解析
em单位 浏览器设置的默认font-size大小为16px当边框设置为2em时边框的大小为32px。(浏览器设置的默认字体大小为16px可以改变) 当前元素的font-size设置为20px时当边框设置为2em时边框的大小为40px。 当前元素的font-size未设置时会先从最近的元素开始继承font-size再换算border的2em值 当font-size设置为2em时对应的是相对其父元素font-size的大小25px * 2 * 2 100 px rem单位 rem相对的是html元素所设置的font-size 如果html元素未设置font-size默认为16px可通过浏览器设置修改 动态计算font-size
当使用rem来布局时所有单位都写rem单位那么只需要修改html的font-size大小所有的单位会自动进行换算成px像素单位。
如果我们能动态修改html的font-size的大小那么就能够让同一套代码适配不同的设备了。
举个例子假设2个设备的宽度分别是300pxA设备宽和600pxB设备宽我们写的代码假设10rem表示占满屏幕宽度那么对于A设备来说只需要调节html的font-size为30px就行了对于B设备只需要调节html的font-size为60px就行了。此时使用的是同一套代码这套代码使用的是rem布局方式。
动态设置根元素字体大小
例如下方使用rem布局动态设置根元素字体大小 示例如果是iphone6则视口宽度是375px 假设参照的设计图是750px图上量的是100px那么应该取50px那么应该写多少rem呢 首先10rem 375px所以 10 / 375 rem 1px所以10 / 375 rem * 50 50px 所以 500 / 375 rem 1.333rem 50px所以图上量的100px应该写1.333rem长度 按上面适配好之后写的是1.333rem那就是 50 / 375 0.1333占比宽度为0.1333 适配转换比例过程 假设现在换了平板ipad mini它在开了理想视口的情况下布局视口设备横向独立像素值768 此时设置的rootFontsize就是76.8则1.333 * 76.8 像素 则在平板ipad mini占比宽度为 1.333 * 76.8 像素 / 768 0.1333 这与上面在iphone6的占比宽度是一致的 !DOCTYPE html
html langenheadmeta charsetUTF-8!-- 第一步开启理想视口 --meta nameviewport contentwidthdevice-widthtitleDocument/titlestyle* {margin: 0;padding: 0;}#demo {/* 未适配前的书写的代码width: 100px;height: 100px;margin: 0 auto;margin-top: 15px;background-color: #a2bbee; *//* 第二步换算成rem */width: 1.333rem;height: 100px; /* 假设不对高度作适配因此可以直接写 *//* margin: 0 auto; *//* margin-top: 0.4rem; */background-color: #a2bbee;/* 对于不需要适配的情况就不要使用rem了而是使用px *//* border: 1px solid black; */}body {/* 假设在375px的屏幕中字体大小应当设置为16px如果不对字体作适配的话那么在宽屏幕下16px就太小了。10rem 375px, 所以 10rem / 375 * 16 16px, 所以 0.4266667rem 16px*/font-size: 0.4266667rem;}/style/headbodydiv iddemo好的ok/div/bodyscriptfunction adapter() {// 获取布局视口宽度因为开启了理想视口(因此第一步就需要开启理想视口)就会有这个等式关系布局视口设备横向独立像素值// 如果没有开启理想视口那么默认就是980pxconst dpWidth document.documentElement.clientWidth // 因此这里拿到布局视口的宽度就是设备横向独立像素值// 计算根字体大小这是根据比例关系计算而来// 这样设置后10rem 就是占满整个宽度const rootFontsize dpWidth / 10// 设置根字体大小document.documentElement.style.fontSize rootFontsize pxconsole.log(dpWidth);} adapter()window.onresize adapter/script
/html
注只观察宽度和字体在宽度上所占的比例因为高度未作适配 利用vw动态设置字体大小 在iphone6中屏幕像素宽度为375px。100vw表示设备宽度。如果在750的设计图上是200px那么实际上应当是100px要表示100px则要用100vw / 375px * 100 26.66666vw所以100px就等于 26.66666vw。 如果对html设置font-size为26.66667vw而box宽和高设置为1rem即26.66666vw则宽和高为100px。 上面设定的结果1rem 100px 由于html的font-size设置为了26.66667vw所以默认字体大小都是100px这导致文字太大了因此要将文字大小重置为默认的16px就要设置为0.16rem。 适配转换比例过程 假设现在换了平板ipad mini它在开了理想视口的情况下布局视口设备横向独立像素值768即可推出 100vw 768px则根元素字体大小相当于 26.666667vw 768px / 100 * 26.66667又因为在当前ipad mini中仍然有1rem 26.666667vw 所以1rem 768px / 100 * 26.66667。那么在ipad mini中1rem占整个宽度比为0.2666667。而原来在375px下的1rem 是 100px它占100 / 375 0.2666667这与ipad mini中的计算是一致的也就是达到了等比例缩放的效果。 相比于上面使用动态设置根元素字体大小的方法而言这里并不需要监听窗口大小变化即可自动实现等比缩放。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin:0;padding:0;}html{/* font-size: 100vw; */ /* 在iphone6 - 375px的视口宽度 */font-size: 26.666667vw; /* 在iphone6 - 100px 对应 26.666667vw */}body{/* rem布局一定要在body重置font-size大小这里重置为16px */font-size: 0.16rem;}.box{width: 1rem; /* 页面可视区分成了100vw和100vh */height: 1rem;background: pink;}/style
/head
bodydiv classbox哈哈/div
/body
/html注可以看出比例是一致的 测量rem数值及插件使用
vsCode工具中的 px to rem 插件
这里使用《利用vw动态设置字体大小》中的计算逻辑。
1、安装插件 2、使用方法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylehtml {/* 手动加上 */font-size: 26.6666667vw;}body {/* rem布局一定要在body重置font-size大小 */font-size: 0.16rem;}.box {/* 选中样式, alt z 快捷键, 即可自动转换height: 144px;width: 144px; 注意如果设计稿是750px来规划的话那计算在iphone6的375px宽的屏幕上时量取的宽度应当要除以2再使用alt z作转换*/height: 1.44rem;width: 1.44rem;background-color: red;}/style
/head
bodydiv classbox/div
/body
/html利用蓝湖、PxCook获取rem数值 pxCook是最方便的可以直接显示结果直接进行rem单位的测量pxcook可以自动做到物理像素转逻辑像素的处理 rem综合案例:网易移动端 步骤
按宽750的设计稿适配375px的屏幕宽度。所以量取的尺寸除以2先写px单位。
设置html的font-size为font-size: 26.666667vw;来实现1rem100px理解100vw 375px推导出100vw / 375 1px所以100px 100 * 100vw / 375 26.666667vw
设置body的font-size为font-size0.16rem;来重置body字体大小
现在为止1rem 就代表 100px如果750宽的设计稿的宽度量出来是100px那么应当取50px然后换算成rem就是0.5rem。
这样的话每次量完还得自己计算下比较繁琐。所以可以先自己使用px单位完成布局。然后使用vsCode工具的px to rem插件全选样式alt z自动转换单位
效果如下实现了不同设备下的等比缩放。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfont/iconfont.csslink relstylesheet href./css/reset.cssstylehtml{font-size:26.666667vw;}body{font-size: 0.16rem;}a{color: #34372e;}.head{height: 0.43rem;background: #ef1b1a;color: white;display: flex;align-items: center;justify-content: space-between;padding: 0 0.1rem;}.head i {font-size: 0.18rem;}.head-user, .head-email{width: 25%;font-size: 0.14rem;}.head-email{text-align: right;}.head-logo{width: 50%;text-align: center;}.head-logo img{height: 0.21rem;}.nav{height: 0.46rem;border-bottom: 0.005rem #ededed solid;padding:0 0.1rem;display: flex;align-items: center; font-size: 0.18rem;}.nav li{flex-grow: 1;text-align: center;position: relative;}.nav li.active a{color: #ef191b;}.nav li.active::after{content: ;position: absolute;left:50%;bottom:-0.12rem;margin-left: -0.07rem;width: 0.15rem;height: 0.02rem;background: #ef191b;}.nav-sub{padding: 0.11rem 0.1rem 0.07rem 0.1rem;background: #f8f8f8;position: relative;}.nav-sub-list{display: grid;grid-template-columns: repeat(5, 1fr);grid-auto-rows: 0.35rem;}.nav-sub__closed{height: 0.7rem;overflow: hidden;}.nav-sub__closed .nav-sub-arrow{transform: rotate(0);}.nav-sub-arrow{position: absolute;right: 0.1rem;bottom: 0.2rem;transform: rotate(180deg);}.news{padding: 0 0.1rem;}.news-title{font-size: 0.18rem;line-height: 0.66rem;}.news-item{margin-bottom: 0.25rem;}.news-item-title{width: 2.95rem;line-height: 0.22rem;font-size: 0.17rem;margin-bottom: 0.08rem;font-weight: 400;}.news-item-info{font-size: 0.12rem;color: #b3b4b6;}.news-item-img img{width: 100%;margin-top: 0.05rem;margin-bottom: 0.09rem;}.news2-item{border-top: 0.005rem #f6f7f9 solid;padding: 0.1rem;display: flex;}.news2-item-content{flex-grow: 1;margin-right: 0.15rem;}.news2-item-title{line-height: 0.22rem;font-size: 0.17rem;margin-bottom: 0.08rem;font-weight: 400;}.news2-item-info{font-size: 0.12rem;color: #b3b4b6;display: flex;justify-content: space-between;align-items: center;}.news2-item-img{width: 1.17rem;}.news2-item-img img{width:100%;height:100%;object-fit: cover;}.app{color: #fb1515;border:0.005rem #fbbab8 solid;border-radius: 1rem;padding:0.02rem 0.05rem;}/style/headbodydiv classheaddiv classhead-useri classiconfont icon-yonghu/i/divdiv classhead-logoimg src./img/logo.png alt/divdiv classhead-emaili classiconfont icon-youxiang/i邮箱i classiconfont icon-jiantou/i/div/divul classnavli classactivea href#要闻/a/lilia href#推荐/a/lilia href#原创/a/lilia href#热点/a/li/uldiv classnav-subul classnav-sub-listlia href#新闻/a/lilia href#抗疫/a/lilia href#娱乐/a/lilia href#体育/a/lilia href#财经/a/lilia href#新闻/a/lilia href#抗疫/a/lilia href#娱乐/a/lilia href#体育/a/lilia href#财经/a/lilia href#新闻/a/lilia href#抗疫/a/lilia href#娱乐/a/lilia href#体育/a/lilia href#财经/a/li/uldiv classnav-sub-arrowi classiconfont icon-down-arrow/i/div/divdiv classnewsh2 classnews-title今日要闻/h2div classnews-itemh3 classnews-item-title测试文字测试文字/h3p classnews-item-info央视网 1小时前 879跟帖/p/divdiv classnews-itemh3 classnews-item-title测试文字测试文字/h3p classnews-item-info央视网 1小时前 879跟帖/p/divdiv classnews-itemh3 classnews-item-title测试文字测试文字测试文字测试文字测试文字测试文字/h3div classnews-item-imgimg src./img/news.jpg alt/divp classnews-item-info央视网 1小时前 879跟帖/p/div/divdiv classnews2div classnews2-itemdiv classnews2-item-contenth3 classnews2-item-title测试文字测试文字/h3p classnews2-item-infospan上游新闻 2287跟贴/spanspan classapp打开APP/span/p/divdiv classnews2-item-imgimg src./img/news2.jpg alt/div/divdiv classnews2-itemdiv classnews2-item-contenth3 classnews2-item-title测试文字测试文字/h3p classnews2-item-infospan上游新闻 2287跟贴/spanspan classapp打开APP/span/p/divdiv classnews2-item-imgimg src./img/news3.jpg alt/div/div/div/body
/htmlvw布局方案 vw单位它是将设备的屏幕宽度分为100份。 如果是在375像素的屏幕宽度下1vw就是3.75px。 如果是在414像素的屏幕宽度下1vw就是4.14px
所以除了使用rem实现等比缩放还可以使用vw布局方式实现等比缩放。 等比缩放的步骤是这样的 对于750宽的设计图在iphone6下开启了理想视口时宽度为375px。对于设计图上200px的宽应当设置为100px它应当占比宽度为100px / 375px 0.266667而100vw是表示整个宽度所以100px换算成vw单位就是26.6667vw。 基于上面换算之后得到的代码在ipad mini中由于宽度也是100vw因此占比本来就是一致的也就实现了等比例缩放。 这样看来vw就直接可以做到在不同屏幕下的等比缩放
移动端vw布局及插件使用
vsCode工具中的 px-to-vw 插件
1、使用时需要关闭px to rem插件
2、安装px-to-vw 插件并启用
3、使用方法将视口宽度设置为375px 下面演示在视口宽度为375px时对于750宽的设计图上200px的宽该如何使用vw来表示。
由于设计图是750宽当前视口宽度是375px因此200px在代码中应当设置为100px。
当所有样式都设置好后选中样式alt z即可转换
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 26.667vw; /* 宽100px */height: 26.667vw; /* 高100px */background: pink;}/style/headbodydiv classbox/div/body/htmlpxcook
当如果有psd源文件则可以使用你pxcook直接查看数值。 vw综合案例:B站移动端 750宽的设计图 步骤 750宽的设计图上量取具体宽度比如88px然后宽度除以2得到44px这是iphone6理想视口375px宽度下的尺寸。直接写44px全部写完之后alt z全部转换。
未转换前注意到导航那里没有遮住首页这2个字 转换后注意到导航那里都遮住了首页这2个字说明是等比例缩放的 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfont/iconfont.csslink relstylesheet href./css/reset.cssstylea{color: #4c514d;}.head{height: 11.733vw;display: flex;align-items: center;padding: 0 2.667vw;}.head-logo{margin-left: 2.133vw;margin-right: auto;}.head-logo i{font-size: 7.467vw;color: #f47296;}.head-search i{font-size: 5.867vw;color: #c9c9c9;}.head-login{margin-left: 5.333vw;background: #e8e8e8;font-size: 3.2vw;border-radius: 50%;padding: 1.867vw; }.head-login a{color: #f47296;}.head-app{margin-right: 0.533vw;margin-left: 5.333vw;background: #f47296;border-radius: 1.067vw;padding: 1.333vw 2.667vw;}.head-app a{color: #fffefc;}.nav{height: 10.667vw;border-bottom: 0.133vw solid #f3f3f3; padding: 0 2.667vw;position: relative;}.nav-list{height:100%;display: flex;align-items: center;overflow: hidden;}.nav-list li{width: 10.667vw;margin-right:5.333vw;flex-shrink: 0;text-align: center;position: relative;}.nav-list li.active a{color: #f47296;}.nav-list li.active::after{content: ;position: absolute;width: 11.733vw;height: 0.533vw;background: #f47296;bottom: -2.667vw;left: -0.533vw;}.nav-arrow{position: absolute;right: 0;top: 0;width: 10.667vw;height:100%;background: white;display: flex;align-items: center;justify-content: center;}.video{padding: 2.133vw 2.667vw;display: grid;grid-template-columns: 1fr 1fr;column-gap: 2.667vw;}.video-item-pic{display: grid;}.video-item-pic img{grid-area: 1/1/1/1;width:100%;height:100%;object-fit: cover;border-radius: 0.8vw;}.video-item-pic span{grid-area: 1/1/1/1;align-self: flex-end;color: white;display: flex;justify-content: space-between;align-items: center;padding: 0 0.533vw;}.video-item-pic i{margin-right: 1.333vw;}.video-item-title{margin-top: 1.867vw;margin-bottom: 4vw;font-size: 3.2vw;line-height: 4.267vw;}/style/headbodydiv classheaddiv classhead-logoi classiconfont icon-BILIBILI_LOGO/i/divdiv classhead-searchi classiconfont icon-fangdajing/i/divdiv classhead-logina href#登录/a/divdiv classhead-appa href#下载 App/a/div/divdiv classnavul classnav-listli classactivea href#首页/a/lilia href#动画/a/lilia href#番剧/a/lilia href#国创/a/lilia href#音乐/a/lilia href#首页/a/lilia href#动画/a/lilia href#番剧/a/lilia href#国创/a/lilia href#音乐/a/li/uldiv classnav-arrowi classiconfont icon-arrow-bottom/i/div/divul classvideoli classvideo-itemdiv classvideo-item-picimg src./img/video1.jpg altspanspani classiconfont icon-703bofang-fangxing-xianxing/i73.7万/spanspani classiconfont icon-xinxi/i5591/span/span/divh3 classvideo-item-titlea href#测试标题测试标题/a/h3/li.../ul/body
/html第七章 响应式布局
指网页能自动识别屏幕宽度、并做出相应调整的网页设计。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 媒体查询语法详解
媒体类型 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 仅屏幕显示时生效 */media screen {.box {font-size: 60px;color: red;}}/* 仅打印时生效 */media print {.box {font-size: 120px;color: green;}}/style
/head
bodydiv classbox文字/div
/body
/html媒体特性 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8style* {margin: 0;padding: 0;}h1 {height: 200px;background-color: gray;text-align: center;line-height: 200px;font-size: 100px;}/* 检测到视口的宽度小于等于700px时应用如下样式 */media (max-width:700px) {h1 {background-color: orange;}}/* 检测到视口的宽度为800px时应用如下样式 */media (width:800px) {h1 {background-color: green;}}/* 检测到视口的宽度大于等于900px时应用如下样式 */media (min-width:900px) {h1 {background-color: deepskyblue;}}/* 检测到视口的高度等于800px时应用如下样式 *//* media (height:800px){h1 {background-color: yellow;}} *//* 检测到屏幕的宽度等于1536px时应用如下样式 *//* media (device-width:1536px) {h1 {color: white;}} *//* 移动端竖屏时的样式 */media (orientation: portrait) {h1 {border-bottom: 10px solid red;}}/* 移动端横屏时的样式 */media (orientation: landscape) {h1 {border-right: 10px solid blue;}}/style/headbodyh1你好啊/h1/body
/html
逻辑操作符 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8!-- 使用link标签引入样式并且指定媒体查询的条件 --link relstylesheet href./a.css media(orientation: portrait)link relstylesheet href./b.css media(orientation: landscape)style* {margin: 0;padding: 0;}h1 {height: 200px;background-color: gray;text-align: center;line-height: 200px;font-size: 100px;}/* 且运算符 *//* media (min-width:700px) and (max-width:800px) {h1 {background-color: orange;}} *//* media screen and (min-width:700px) and (max-width:800px) {h1 {background-color: orange;}} *//* 或运算符 *//* media screen and (max-width:700px) or (min-width:800px) {h1 {background-color: orange;}} *//* 否定运算符 *//* media not screen {h1 {font-size: 120px;color: green;}} *//* 当屏幕小于800px时才生效 */media not screen and (min-width:800px) {h1 {background-color: orange;}}/* 肯定运算符 *//* media only screen and (width:800px) {h1 {background-color: orange;}} *//* 当屏幕在400像素或者800像素时应用该样式 */media screen and (max-width:400px), (min-width:800px) {h1 {background-color: orange;color: #fff;font-size: 16px;}}/style
/head
bodyh1你好啊/h1
/body
/html媒体查询的编写位置及顺序 添加到样式表的底部对CSS进行优先级的覆盖 媒体查询的样式一般写在正常样式的下方对正常样式进行覆盖 移动端 -PC端的适配原则:min-width从小到大 PC端 -移动端的适配原则:max-width从大到小
理解
media并不会提升所包裹的样式的优先级位于底下的样式的优先级会覆盖上面的样式可以通过打开F12查看到样式覆盖关系。当media设定的条件满足时就会剥离掉外面的media{}使得内部的样式在当前位置生效。但它仍然受优先级的影响。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* .box{width:100px;height:100px;background:blue;}media (min-width: 700px) {.box{background: pink;}} *//* .box{width:100px;height:100px;background:blue;}*//* 如何多条件的时候min-width编写顺序从小到大进行适配 *//* min-width方式移动优先的原则先编写移动端设备然后响应式过渡到PC端 *//* media (min-width: 700px) {.box{background: pink;}}media (min-width: 1000px) {.box{background: green;}} *//* 如何从PC端响应式过渡到移动端 max-width , 从大到小区编写 */.box{width:100px;height:100px;background:blue;}media (max-width: 1000px) {.box{background: pink;}}media (max-width: 700px) {.box{background: green;}} /style
/head
bodydiv classboxaaaaaa/div
/body
/html响应断点(阈值)的设定
Extra small 576pxSmall576px-smMedium 768px-mdLarge 992px-lgX-Large 1200px-xlXX-Large 1400px-xxl
示例 当屏幕大小发生变化时加上了指定类名的元素会隐藏
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.d-none{display: none;}/* 当屏幕宽度 576时加上这个d-sm-none样式会隐藏 */media (min-width: 576px){.d-sm-none{display: none;}}/* 当屏幕宽度 768时加上这个d-sm-none样式会隐藏 */media (min-width: 768px){.d-md-none{display: none;}}/* 当屏幕宽度 992时加上这个d-sm-none样式会隐藏 */media (min-width: 992px){.d-lg-none{display: none;}}media (min-width: 1200px){.d-xl-none{display: none;}}media (min-width: 1400px){.d-xxl-none{display: none;}}/style/headbodydiv classd-none11111/divdiv classd-sm-none22222/divdiv classd-md-none33333/divdiv classd-lg-none44444/divdiv classd-xl-none55555/divdiv classd-xxl-none66666/div/body
/html响应式栅格系统
示例1 默认.row div占满1行达到样式生效的条件样式类名才会起作用没达到样式生效的条件会使用默认的样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.row {background-color: skyblue;display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: 50px;grid-auto-rows: 50px;}.row div {background-color: pink;border: 2px solid #000;text-align: center;line-height: 50px;/* 默认占满1行 */grid-area: auto/auto/auto/span 12;}.row .col-1 { grid-area: auto/auto/auto/span 1;}.row .col-2 { grid-area: auto/auto/auto/span 2;}.row .col-3 { grid-area: auto/auto/auto/span 3; }.row .col-4 { grid-area: auto/auto/auto/span 4;}.row .col-5 { grid-area: auto/auto/auto/span 5;}.row .col-6 { grid-area: auto/auto/auto/span 6;}.row .col-7 { grid-area: auto/auto/auto/span 7;}.row .col-8 { grid-area: auto/auto/auto/span 8;}.row .col-9 { grid-area: auto/auto/auto/span 9;}.row .col-10 { grid-area: auto/auto/auto/span10;}.row .col-11 { grid-area: auto/auto/auto/span 11;}.row .col-12 { grid-area: auto/auto/auto/span 12;} /* 达到样式生效的条件样式类名才会起作用 */media (min-width: 576px) {.row .col-sm-1 { grid-area: auto/auto/auto/span 1;}.row .col-sm-2 { grid-area: auto/auto/auto/span 2;}.row .col-sm-3 { grid-area: auto/auto/auto/span 3; }.row .col-sm-4 { grid-area: auto/auto/auto/span 4;}.row .col-sm-5 { grid-area: auto/auto/auto/span 5;}.row .col-sm-6 { grid-area: auto/auto/auto/span 6;}.row .col-sm-7 { grid-area: auto/auto/auto/span 7;}.row .col-sm-8 { grid-area: auto/auto/auto/span 8;}.row .col-sm-9 { grid-area: auto/auto/auto/span 9;}.row .col-sm-10 { grid-area: auto/auto/auto/span10;}.row .col-sm-11 { grid-area: auto/auto/auto/span 11;}.row .col-sm-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 768px) {.row .col-md-1 { grid-area: auto/auto/auto/span 1;}.row .col-md-2 { grid-area: auto/auto/auto/span 2;}.row .col-md-3 { grid-area: auto/auto/auto/span 3; }.row .col-md-4 { grid-area: auto/auto/auto/span 4;}.row .col-md-5 { grid-area: auto/auto/auto/span 5;}.row .col-md-6 { grid-area: auto/auto/auto/span 6;}.row .col-md-7 { grid-area: auto/auto/auto/span 7;}.row .col-md-8 { grid-area: auto/auto/auto/span 8;}.row .col-md-9 { grid-area: auto/auto/auto/span 9;}.row .col-md-10 { grid-area: auto/auto/auto/span10;}.row .col-md-11 { grid-area: auto/auto/auto/span 11;}.row .col-md-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 992px) {.row .col-lg-1 { grid-area: auto/auto/auto/span 1;}.row .col-lg-2 { grid-area: auto/auto/auto/span 2;}.row .col-lg-3 { grid-area: auto/auto/auto/span 3; }.row .col-lg-4 { grid-area: auto/auto/auto/span 4;}.row .col-lg-5 { grid-area: auto/auto/auto/span 5;}.row .col-lg-6 { grid-area: auto/auto/auto/span 6;}.row .col-lg-7 { grid-area: auto/auto/auto/span 7;}.row .col-lg-8 { grid-area: auto/auto/auto/span 8;}.row .col-lg-9 { grid-area: auto/auto/auto/span 9;}.row .col-lg-10 { grid-area: auto/auto/auto/span10;}.row .col-lg-11 { grid-area: auto/auto/auto/span 11;}.row .col-lg-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 1200px) {.row .col-xl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xl-10 { grid-area: auto/auto/auto/span10;}.row .col-xl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xl-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 1400px) {.row .col-xxl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xxl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xxl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xxl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xxl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xxl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xxl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xxl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xxl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xxl-10 { grid-area: auto/auto/auto/span10;}.row .col-xxl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xxl-12 { grid-area: auto/auto/auto/span 12;} }/style/headbodydiv classrowdiv classdiv col-3col-3/divdiv classdiv col-3col-3/divdiv classdiv col-3col-3/divdiv classdiv col-3col-3/div/divdiv classrowdiv classdiv col-sm-3col-sm-3/divdiv classdiv col-sm-3col-sm-3/divdiv classdiv col-sm-3col-sm-3/divdiv classdiv col-sm-3col-sm-3/div/divdiv classrowdiv classdiv col-md-3col-md-3/divdiv classdiv col-md-3col-md-3/divdiv classdiv col-md-3col-md-3/divdiv classdiv col-md-3col-md-3/div/divdiv classrowdiv classdiv col-lg-3col-lg-3/divdiv classdiv col-lg-3col-lg-3/divdiv classdiv col-lg-3col-lg-3/divdiv classdiv col-lg-3col-lg-3/div/divdiv classrowdiv classdiv col-xl-3col-xl-3/divdiv classdiv col-xl-3col-xl-3/divdiv classdiv col-xl-3col-xl-3/divdiv classdiv col-xl-3col-xl-3/div/divdiv classrowdiv classdiv col-xxl-3col-xxl-3/divdiv classdiv col-xxl-3col-xxl-3/divdiv classdiv col-xxl-3col-xxl-3/divdiv classdiv col-xxl-3col-xxl-3/div/div/body
/html示例2 给1个元素添加多个样式添加的多个样式都有各自生效的条件当屏幕足够宽时能容纳多个元素当屏幕窄时只能容纳较少的元素
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.row {background-color: skyblue;display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: 50px;grid-auto-rows: 50px;}.row div {background-color: pink;border: 2px solid #000;text-align: center;line-height: 50px;/* 默认占满1行 */grid-area: auto/auto/auto/span 12;}.row .col-1 { grid-area: auto/auto/auto/span 1;}.row .col-2 { grid-area: auto/auto/auto/span 2;}.row .col-3 { grid-area: auto/auto/auto/span 3; }.row .col-4 { grid-area: auto/auto/auto/span 4;}.row .col-5 { grid-area: auto/auto/auto/span 5;}.row .col-6 { grid-area: auto/auto/auto/span 6;}.row .col-7 { grid-area: auto/auto/auto/span 7;}.row .col-8 { grid-area: auto/auto/auto/span 8;}.row .col-9 { grid-area: auto/auto/auto/span 9;}.row .col-10 { grid-area: auto/auto/auto/span10;}.row .col-11 { grid-area: auto/auto/auto/span 11;}.row .col-12 { grid-area: auto/auto/auto/span 12;} media (min-width: 576px) {.row .col-sm-1 { grid-area: auto/auto/auto/span 1;}.row .col-sm-2 { grid-area: auto/auto/auto/span 2;}.row .col-sm-3 { grid-area: auto/auto/auto/span 3; }.row .col-sm-4 { grid-area: auto/auto/auto/span 4;}.row .col-sm-5 { grid-area: auto/auto/auto/span 5;}.row .col-sm-6 { grid-area: auto/auto/auto/span 6;}.row .col-sm-7 { grid-area: auto/auto/auto/span 7;}.row .col-sm-8 { grid-area: auto/auto/auto/span 8;}.row .col-sm-9 { grid-area: auto/auto/auto/span 9;}.row .col-sm-10 { grid-area: auto/auto/auto/span10;}.row .col-sm-11 { grid-area: auto/auto/auto/span 11;}.row .col-sm-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 768px) {.row .col-md-1 { grid-area: auto/auto/auto/span 1;}.row .col-md-2 { grid-area: auto/auto/auto/span 2;}.row .col-md-3 { grid-area: auto/auto/auto/span 3; }.row .col-md-4 { grid-area: auto/auto/auto/span 4;}.row .col-md-5 { grid-area: auto/auto/auto/span 5;}.row .col-md-6 { grid-area: auto/auto/auto/span 6;}.row .col-md-7 { grid-area: auto/auto/auto/span 7;}.row .col-md-8 { grid-area: auto/auto/auto/span 8;}.row .col-md-9 { grid-area: auto/auto/auto/span 9;}.row .col-md-10 { grid-area: auto/auto/auto/span10;}.row .col-md-11 { grid-area: auto/auto/auto/span 11;}.row .col-md-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 992px) {.row .col-lg-1 { grid-area: auto/auto/auto/span 1;}.row .col-lg-2 { grid-area: auto/auto/auto/span 2;}.row .col-lg-3 { grid-area: auto/auto/auto/span 3; }.row .col-lg-4 { grid-area: auto/auto/auto/span 4;}.row .col-lg-5 { grid-area: auto/auto/auto/span 5;}.row .col-lg-6 { grid-area: auto/auto/auto/span 6;}.row .col-lg-7 { grid-area: auto/auto/auto/span 7;}.row .col-lg-8 { grid-area: auto/auto/auto/span 8;}.row .col-lg-9 { grid-area: auto/auto/auto/span 9;}.row .col-lg-10 { grid-area: auto/auto/auto/span10;}.row .col-lg-11 { grid-area: auto/auto/auto/span 11;}.row .col-lg-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 1200px) {.row .col-xl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xl-10 { grid-area: auto/auto/auto/span10;}.row .col-xl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xl-12 { grid-area: auto/auto/auto/span 12;} }media (min-width: 1400px) {.row .col-xxl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xxl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xxl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xxl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xxl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xxl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xxl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xxl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xxl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xxl-10 { grid-area: auto/auto/auto/span10;}.row .col-xxl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xxl-12 { grid-area: auto/auto/auto/span 12;} }/style/headbodydiv classrowdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/divdiv classcol-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2col/div/div/body
/html响应式交互实现
利用 :checked 伪类 1、刚开始屏幕比较小先让ul隐藏。input顺便也隐藏
2、屏幕比较小当复选框被勾选时ul要显示
3、当屏幕宽度变大时ul也要显示同时span隐藏
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 1、刚开始屏幕比较小先让ul隐藏。input复选框顺便也隐藏。 *//* 2、屏幕比较小当复选框被勾选时ul要显示 *//* 3、当屏幕宽度变大时ul也要显示同时span隐藏 */ul {display: none;}input{display: none;}input:checked ul {display: block;}media (min-width: 768px) {ul {display: block;}span {display: none;}}/style/headbodylabel forbtnspan菜单按钮/span/labelinput typecheckbox idbtn/ulli首页/lili文章/lili教程/lili关于/li/ul/body
/htmlghost博客示例
1、移动优先先写移动端样式再过渡到pc端样式。
2、高度是直接量取的尺寸使用px单位这样说来在不同手机屏幕上不是等比缩放的
3、input复选框 css控制菜单显示隐藏
4、写上media断点对应的样式
media (min-width: 576px) {} /* sm */
media (min-width: 768px) {} /* md */
media (min-width: 992px) {} /* lg */
media (min-width: 1200px) {} /* xl */
media (min-width: 1400px) {} /* xxl */5、文字也是直接使用的px单位 6、对于文章列表先实现在屏幕窄的时候的样式。 7、当屏幕宽度逐渐变大时我们希望能出现2列并且文章的宽度占2/3。
对于文章的宽度占2/3视频里面用的是前面提到的grid布局实现的栅格系统直接复制过来使用col-lg-8把main中的元素套1层这样当屏幕宽度992时一共12它就占8所以就站占2/3宽了。当屏幕992时由于col-lg-8样式不生效因此默认就占满宽度。但是这里最好还是用flex布局吧兼容性会更好。
并且这2列固定1个宽度且位于版心的位置。这个固定的宽度使用变量来做使用:root定义–container-width变量值刚开始为100%然后在main元素中使用var(–container-width)引用这个变量。接着在对应media(min-width:992px)的媒体查询中改为修改:root定义的–container-width的值值为940px。接着在对应media(min-width:992px)的媒体查询中改为修改:root定义的–container-width的值值为1160px。这样实现了在小屏幕上宽度占满而在大屏幕上占据2/3的宽度并且不同屏幕尺寸下的版心长度也会变化。还有要注意的是宽度设置为100%时是不包括父元素的padding的 8、现在做一些声明/下载/标签云部分需要在屏幕比较小的时候它们都位于文章的下方。当屏幕宽度主键变大时它们位于文章列表的右侧。很显然应该把它们都套在col-lg-4中当屏幕较小时占满宽度当屏幕变大时占4份即占1/3这样文章列表和右侧边栏就处于左右两列了。
但是左右两列还有个间距目前是通过左右两边的padding实现的可以这样理解左边占8份右边占4份然后8份其实就是1个整体给这个整体加上左右的padding。右边也是加上左右的padding。就实现了间距了。 9、底部的实现与文章列表的实现一致即第7步。footer-wrapper是整体的脚部foot-wrapper包裹footerfooter的宽度随着屏幕宽度变化在 99212001400断点处变宽并且始终水平居中。
又由于footer下包裹的直接子元素div添加了col-lg-4类名所以在屏幕992时将又原来的占满宽度而变成水平排列三份并且在每一份的左右都添加了padding。 html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet hrefcss/reset.csslink relstylesheet hreficonfont/iconfont.csslink relstylesheet href./css/grid.csstitleDocument/titlestyle:root {--container-width: 100%;--footer-width: 100%;}.column-gap {padding: 0 15px;}a {color: #505050;}button {outline: none;border: none;}body {background-color: #ebebeb;}/* 头部导航 */.header {height: 190px;background-color: #fff;border-bottom: 1px solid #ebebeb;display: flex;align-items: center;justify-content: center;}.header .header-logo {width: 200px;user-select: none;}.nav {padding: 0 15px;border-bottom: 2px solid #ebebeb;background-color: #fff;}.nav input {display: none;}.nav ul {display: none;}.nav input:checked .nav-list {display: block;}.nav-bar {height: 56px;display: flex;align-items: center;justify-content: center;}.nav-bar i {cursor: pointer;}.nav-list li {padding: 0 21px;height: 56px;line-height: 56px;position: relative;}.nav-list li.active::after {position: absolute;content: ;bottom: 0;left: 0;height: 2px ;width: 100%;background-color: #e67e22;}/* 文章列表 */.main {padding: 35px 15px;box-sizing: border-box;width: var(--container-width);margin: 0 auto;}.main-article {padding: 35px;background-color: #fff;border-radius: 6px;}.main-article h1 {font-size: 35px;font-weight: normal;text-align: center;}.main-article .info {color: #959595;text-align: center;line-height: 30px;margin-bottom: 20px;}.main-article .content {font-size: 18px;line-height: 1.5;}.main-article .read-btn {background-color: #e67e22;padding: 10px 18px;color: #fff;margin: 30px 0;cursor: pointer;}.main-article .article-footer {border-top: 1px solid #ebebeb;padding-top: 30px;}.main-article .article-footer a {margin: 0 5px;}.aside div {border-radius: 6px;padding: 35px;background-color: #fff;margin-bottom: 35px;}.aside div h3 {font-weight: normal;font-size: 20px;padding-bottom: 10px;position: relative;border-bottom: 1px solid #cccccc;}.aside div h3 {margin-bottom: 20px;}.aside div p {font-size: 15px;}.aside div h3::after {position: absolute;content: ;width: 100px;height: 1px;bottom: -1px;left: 0;border-bottom: 1px solid #e67e22;}.aside div button {width: 100%;height: 35px;color: #fff;background-color: #e67e22;cursor: pointer;}.aside .tag-cloud .tags a {border: 1px solid #ebebeb;display: inline-block;padding: 5px 10px;margin-right: 10px;margin-bottom: 10px;}.footer-wrapper {background-color: #202020;padding: 35px 0;}.footer {width: var(--footer-width);margin: 0 auto;}.footer div h3 {font-weight: normal;font-size: 20px;padding-bottom: 10px;position: relative;color: #fcfcfd;border-bottom: 1px solid #7c7c7c;}.footer div h3::after {position: absolute;content: ;width: 100px;height: 1px;bottom: -1px;left: 0;border-bottom: 1px solid #e67e22;}.footer div h3 {margin-bottom: 20px;}.footer div a {color: #959595;display: inline-block;margin-right: 20px;margin-bottom: 20px;}media (max-width: 576px) {h1 {font-size: 32px !important;}}media (min-width: 576px) {}media (min-width: 768px) {.nav-bar {display: none;}.nav ul.nav-list {display: flex;justify-content: center;align-items: center;}}media (min-width: 992px) {:root {--container-width: 940px;--footer-width: 940px;}}media (min-width: 1200px) {:root {--container-width: 1160px;--footer-width: 1160px;}}media (min-width: 1400px) {:root {--footer-width: 1360px;}}/style
/head
bodydiv classheaderimg classheader-logo src./img/ghost-logo.png alt/divdiv classnavdiv classnav-barlabel forcbxi classiconfont icon-zhedie/i/label/divinput typecheckbox idcbx ul classnav-listli classactivea href#首页/a/lilia href#论坛/a/lilia href#快捷手册/a/lilia href#中文文档/a/lilia href#关于/a/li/ul/divdiv classmain rowdiv classcol-lg-8 column-gapdiv classmain-articleh1 classtitle全新的 Ghost 文档上线/h1div classinfospan作者王赛/span • span2018年11月20日/span/divdiv classcontent我们的整个 Ghost 文档 已经全新改版了并且添加了一些新的补充包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕我们的改进包括 Ghost 安装和设/divbutton classread-btn阅读全文/buttondiv classarticle-footeri classiconfont icon-wenjianjia/ia href#Android/aa href#客户端/a/div/div/divdiv classcol-lg-4 column-gapdiv classasidediv classstatementh3声明/h3pGhost 中文版不再继续维护请去官方下载。/p/divdiv classdownloadh3下载/h3buttonGhost最新版/button/divdiv classtag-cloudh3标签云/h3div classtagsa href#客户端/aa href#Android/aa href#jQuery/aa href#Ghost 0.7 版本/aa href#开源/aa href#助手函数/aa href#客户端/aa href#客户端/aa href#Android/aa href#jQuery/aa href#Ghost 0.7 版本/aa href#开源/aa href#助手函数/aa href#客户端/a/div/div/div/div/divdiv classfooter-wrapperdiv classfooter rowdiv classfriend-links col-lg-4 column-gaph3友链/h3div classlinksa href#Bootstrap中文网/aa href#React/aa href#Vue.js/aa href#Svelte/aa href#Preact/aa href#Babel/aa href#Webpack/aa href#Rollup.js/aa href#Bootstrap中文网/aa href#React/aa href#Vue.js/aa href#Svelte/aa href#Preact/aa href#Babel/aa href#Webpack/aa href#Rollup.js/a/div/divdiv classtag-clouds col-lg-4 column-gaph3友链/h3div classtagsa href#客户端/aa href#Android/aa href#jQuery/aa href#Ghost 0.7 版本/aa href#开源/aa href#助手函数/aa href#客户端/aa href#客户端/aa href#Android/aa href#jQuery/aa href#Ghost 0.7 版本/aa href#开源/aa href#助手函数/aa href#客户端/a/div/divdiv classpartners col-lg-4 column-gaph3合作伙伴/h3div classtagsa href#腾讯/aa href#阿里巴巴/aa href#百度/a/div/div/div/div
/body
/htmlgrid.css
.row {/* background-color: skyblue; */display: grid;grid-template-columns: repeat(12, 1fr);
}
.row [class*col-] {/* background-color: pink; *//* 默认占满1行 */grid-area: auto/auto/auto/span 12;
}.row .col-1 { grid-area: auto/auto/auto/span 1;}
.row .col-2 { grid-area: auto/auto/auto/span 2;}
.row .col-3 { grid-area: auto/auto/auto/span 3; }
.row .col-4 { grid-area: auto/auto/auto/span 4;}
.row .col-5 { grid-area: auto/auto/auto/span 5;}
.row .col-6 { grid-area: auto/auto/auto/span 6;}
.row .col-7 { grid-area: auto/auto/auto/span 7;}
.row .col-8 { grid-area: auto/auto/auto/span 8;}
.row .col-9 { grid-area: auto/auto/auto/span 9;}
.row .col-10 { grid-area: auto/auto/auto/span10;}
.row .col-11 { grid-area: auto/auto/auto/span 11;}
.row .col-12 { grid-area: auto/auto/auto/span 12;} media (min-width: 576px) {.row .col-sm-1 { grid-area: auto/auto/auto/span 1;}.row .col-sm-2 { grid-area: auto/auto/auto/span 2;}.row .col-sm-3 { grid-area: auto/auto/auto/span 3; }.row .col-sm-4 { grid-area: auto/auto/auto/span 4;}.row .col-sm-5 { grid-area: auto/auto/auto/span 5;}.row .col-sm-6 { grid-area: auto/auto/auto/span 6;}.row .col-sm-7 { grid-area: auto/auto/auto/span 7;}.row .col-sm-8 { grid-area: auto/auto/auto/span 8;}.row .col-sm-9 { grid-area: auto/auto/auto/span 9;}.row .col-sm-10 { grid-area: auto/auto/auto/span10;}.row .col-sm-11 { grid-area: auto/auto/auto/span 11;}.row .col-sm-12 { grid-area: auto/auto/auto/span 12;}
}
media (min-width: 768px) {.row .col-md-1 { grid-area: auto/auto/auto/span 1;}.row .col-md-2 { grid-area: auto/auto/auto/span 2;}.row .col-md-3 { grid-area: auto/auto/auto/span 3; }.row .col-md-4 { grid-area: auto/auto/auto/span 4;}.row .col-md-5 { grid-area: auto/auto/auto/span 5;}.row .col-md-6 { grid-area: auto/auto/auto/span 6;}.row .col-md-7 { grid-area: auto/auto/auto/span 7;}.row .col-md-8 { grid-area: auto/auto/auto/span 8;}.row .col-md-9 { grid-area: auto/auto/auto/span 9;}.row .col-md-10 { grid-area: auto/auto/auto/span10;}.row .col-md-11 { grid-area: auto/auto/auto/span 11;}.row .col-md-12 { grid-area: auto/auto/auto/span 12;}
}
media (min-width: 992px) {.row .col-lg-1 { grid-area: auto/auto/auto/span 1;}.row .col-lg-2 { grid-area: auto/auto/auto/span 2;}.row .col-lg-3 { grid-area: auto/auto/auto/span 3; }.row .col-lg-4 { grid-area: auto/auto/auto/span 4;}.row .col-lg-5 { grid-area: auto/auto/auto/span 5;}.row .col-lg-6 { grid-area: auto/auto/auto/span 6;}.row .col-lg-7 { grid-area: auto/auto/auto/span 7;}.row .col-lg-8 { grid-area: auto/auto/auto/span 8;}.row .col-lg-9 { grid-area: auto/auto/auto/span 9;}.row .col-lg-10 { grid-area: auto/auto/auto/span10;}.row .col-lg-11 { grid-area: auto/auto/auto/span 11;}.row .col-lg-12 { grid-area: auto/auto/auto/span 12;}
}
media (min-width: 1200px) {.row .col-xl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xl-10 { grid-area: auto/auto/auto/span10;}.row .col-xl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xl-12 { grid-area: auto/auto/auto/span 12;}
}
media (min-width: 1400px) {.row .col-xxl-1 { grid-area: auto/auto/auto/span 1;}.row .col-xxl-2 { grid-area: auto/auto/auto/span 2;}.row .col-xxl-3 { grid-area: auto/auto/auto/span 3; }.row .col-xxl-4 { grid-area: auto/auto/auto/span 4;}.row .col-xxl-5 { grid-area: auto/auto/auto/span 5;}.row .col-xxl-6 { grid-area: auto/auto/auto/span 6;}.row .col-xxl-7 { grid-area: auto/auto/auto/span 7;}.row .col-xxl-8 { grid-area: auto/auto/auto/span 8;}.row .col-xxl-9 { grid-area: auto/auto/auto/span 9;}.row .col-xxl-10 { grid-area: auto/auto/auto/span10;}.row .col-xxl-11 { grid-area: auto/auto/auto/span 11;}.row .col-xxl-12 { grid-area: auto/auto/auto/span 12;}
}reset.css
charset utf-8;/* --------------------重置样式-------------------------------- */body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {margin : 0;padding: 0
}/*设置默认字体*/
body {font-size : 14px;font-style : normal;font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}/*字体太小用户体检不好让small恢复12px*/
small {font-size: 12px
}h1 {font-size: 18px
}h2 {font-size: 16px
}h3 {font-size: 14px
}h4,
h5,
h6 {font-size: 100%
}ul,
ol {list-style: none
}a {text-decoration : none;background-color: transparent
}a:hover,
a:active {outline-width : 0;text-decoration: none
}/*重置表格*/
table {border-collapse: collapse;border-spacing : 0
}/*重置hr*/
hr {border: 0;height: 1px
}/*图形图片*/
img {border-style: none
}img:not([src]) {display: none
}svg:not(:root) {overflow: hidden
}/*下面的操作是针对于html5页面布局准备的不支持ie6~8以及其他低版本的浏览器*/
html {/*禁用系统默认菜单*/-webkit-touch-callout : none;/*关闭iphone Android的浏览器纵向和横向模式中自动调整字体大小的功能*/-webkit-text-size-adjust: 100%
}input,
textarea,
button,
a {/*表单或者a标签在手机点击时会出现边框或彩色的背景区域意思是去除点击背景框*/-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block
}audio,
canvas,
progress,
video {display: inline-block
}audio:not([controls]),
video:not([controls]) {display: none;height : 0
}progress {vertical-align: baseline
}mark {background-color: #ff0;color : #000
}sub,
sup {position : relative;font-size : 75%;line-height : 0;vertical-align: baseline
}sub {bottom: -0.25em
}sup {top: -0.5em
}button,
input,
select,
textarea {font-size: 100%;outline : 0
}button,
input {overflow: visible
}button,
select {text-transform: none
}textarea {overflow: auto
}button,
html [typebutton],
[typereset],
[typesubmit] {-webkit-appearance: button
}button::-moz-focus-inner,
[typebutton]::-moz-focus-inner,
[typereset]::-moz-focus-inner,
[typesubmit]::-moz-focus-inner {border-style: none;padding : 0
}button:-moz-focusring,
[typebutton]:-moz-focusring,
[typereset]:-moz-focusring,
[typesubmit]:-moz-focusring {outline: 1px dotted ButtonText
}[typecheckbox],
[typeradio] {box-sizing: border-box;padding : 0
}[typenumber]::-webkit-inner-spin-button,
[typenumber]::-webkit-outer-spin-button {height: auto
}[typesearch] {-webkit-appearance: textfield;outline-offset : -2px
}[typesearch]::-webkit-search-cancel-button,
[typesearch]::-webkit-search-decoration {-webkit-appearance: none
}::-webkit-input-placeholder {color : inherit;opacity: .54
}::-webkit-file-upload-button {-webkit-appearance: button;font : inherit
}ant-design后台管理界面示例
效果图
全部展示 侧边栏可收缩 主题色、固定内容、显示内容
显示内容是否显示侧边栏侧边栏的显示和隐藏、是否显示内容头部内容头部的显示和隐藏
固定内容固定侧边菜单侧边栏是否可随滚动条上下移动或者固定不动、固定内容头部内容头部是否可随滚动条上下移动或者固定不动 响应式变化 要点
1、引入reset.css重置样式
2、引入iconfont.css使用字体图标
3、display:flex能轻松实现等高布局因此左边侧边栏右边内容就采用flex布局了。设置容器的min-height为100vh则两列最小高度也最小为100vh。
4、当元素使用固定定位后元素的宽度将由内容撑开元素的父div使用overflow:hidden将隐藏不了fixed中的的内容所以可以将固定定位元素的width改为inherit不能改为100%否则会相对于页面宽度的100%改为inherit生效的前提必须是建立再父容器有明确设置width的值它将与父容器一致然后溢出隐藏
5、使用样式类名去控制侧标栏折叠状态和固定状态达到切换样式类名即可修改状态的目的这点很重要。
6、侧边栏控制的g-ant-sider__wrap设置高度为100%。当g-ant-sider__wrap是固定定位时是可视区的高度当g-ant-sider__wrap不是固定定位时是父元素的高度此时又因为整体高度min-height为100vh并且使用的时flex布局左侧侧边栏没有设置高度所以左侧侧边栏最小高度也是100vh所以就占满了整个高度
7、display:none控制元素隐藏display:block控制元素显示样式类名中分别使用这2个样式通过切换样式类名即可实现元素的显示和隐藏
8、加上去掉 控制状态的样式类名检查效果是否符合要求对不符合要求的情况进行修改
9、使用js给元素绑定点击事件通过元素.classList.toggle(‘样式类名’)切换样式类名来控制显示状态通过元素.元素.className样式类名1 样式类名2…修改元素样式这中方法可以直接全部覆盖原来的所有类名。
10、flex:1 overflow:auto实现菜单过多时出现侧边栏出现滚动条
11、自定义滚动条样式并且只在指定区域下生效
ul.m-menu::-webkit-scrollbar {width : 6px;height: 6px;
}ul.m-menu::-webkit-scrollbar-thumb {background : #51606d;border-radius: 3px;
}ul.m-menu::-webkit-scrollbar-track {background : #263849;border-radius: 3px;
}12、侧边栏收缩时图标变大尽量使用transform:scale(1.5)这比变大字体大小更合适
13、侧边栏收缩时可以做hover时使用定位将隐藏的菜单显示出来。
14、主体部分采用flex布局主轴方向修改为垂直分为头部内容区尾部其中内容去部分flex:1占满剩余高度又由于最小高度就是可视区高度这样自然就将尾部挤到了最下面这就是粘性页脚的做法。
15、主体头部使用flex布局flex-end靠右排列flex布局中可以使用column-gap设置弹性项之间的间距
16、div开启flex布局后flex弹性项目即弹性子项中的元素使用margin是可以扩大弹性项目即弹性子项空间的
17、主体内容区采用grid布局将卡片放入对应的区域
18、背景图片放入卡片中
.m-card__bg1 {width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;background-size: contain;
}.m-card__bg1 {background-image: url(../static/index-1.jpg);
}19、制作右边抽屉设置使用固定定位设置具体宽度。使用js给设置按钮绑定点击事件当点击设置按钮时给整个setting所在的div加上opened类名该类名修改right从默认的-300px改为0这样setting抽屉就打开了。
打开的时候需要在底部盖上一层遮罩层这个遮罩层单独使用个div来做使用固定定位top:0left:0100vh100vw刚开始是display:none隐藏的打开设置时显示该遮罩层并且由于该遮罩层与这个抽屉不是同一个dom添加的类名是直接添加到setting而不是添加到mask所以可以使用兄弟选择器“”选择到抽屉后面的这个遮罩层dom写上展示时display:block的样式此时通过切换setting这个dom的样式类名控制到setting这个dom后面的遮罩层的显示和隐藏。
20、主题色修改方法
用户点击主题色的时候需要在当前主题色中插入小图标元素.innerHTML‘html标签’需要在之前选定的主题色中移除小图标元素.innerHTML‘’这里用的排它思想先全部移除再插入。
先在:root中定义–theme-color颜色在使用颜色的地方使用var(–theme-color)这样通过js一旦修改–theme-color就可以统一修改主题色了。
用户点击主题色的时候获取主题色的背景颜色getComputedStyle(this).backgroundColor将这个背景颜色设置到document.documentElement.style.setProperty(‘–theme’, color)
21、设置中固定内容的开关使用的1个box套1个box实现在点击开关的时候加上样式类名u-switch–closed来控制背景色和内部小圆点的位置实现开关的效果。
又因为要区分每个开关的具体作用所以给每个开关再加1个类名这个类名用于表示开关的作用使用这个类名选择到具体的开关区分这个开关并绑定具体要做的事情。
22、头部固定开关
当头部不是固定定位的时候头部是占据高度的。当打开头部固定开关给头部添加--fixed类名此时头部使用固定定位但由于头部处于固定定位了宽度将由内容决定但是左侧起点如何与侧边栏适配呢其实当头部使用了固定定位后就根侧边栏无法靠弹性的关系保持紧密贴合了所以直接就占满宽度并且调整z-index让侧边栏压在头部上面即可。但是还是不够合理假设头部左边也有元素的话这不就被隐藏了吗所以还得设置left值比较好。当打开头部固定开关同时头部高度就没了主体内容去会顶上去所以要给内容区加1个margin-top但由于--fixed是加在头部而内容区与头部是兄弟关系所以就用号兄弟选择器选择到头部后面的内容区加上margin-top值值为头部的高度。23、左边菜单栏固定开关
当侧边栏不是固定定位的时候左侧侧边栏是可以跟随页面一起滚动的当打开菜单侧边栏固定开关给侧边栏添加--fixed类名此时侧边栏使用固定定位占满可视区高度。此时发现固定定位的头部盖过了侧边栏所以给侧边栏加上z-index须大于头部的z-index值并且要加上position:relative才会生效还有就是要注意的是左侧侧边栏是否固定 与 内容区域头部是否固定 是 没有关系的。
因为flex布局决定了左右两侧分布左侧g-ant__sider和右侧g-ant__main。固定定位是加在它们内部的元素身上所以不会影响整体的左右布局。24、头部显示/隐藏开关
隐藏的实现就是先定义1个hide样式类直接使用display:none !important;通过切换这个hide类即可让元素显示/隐藏。当头部使用固定定位时内容区主体部分用的时margin-top撑开的高度但是隐藏之后就得把这个这个margin-top干掉让内容区域主体部分能够升上去这里使用的方法是--fixed:not(.hide) main{..}即让固定定位下的不是隐藏状态下的头部 后面的兄弟main 才设置margin-top。这样做比较简洁当然也可以单独再选择一下hide后面的main设置margin-top为0.25、左边菜单栏显示/隐藏开关
隐藏的实现就是先定义1个hide样式类直接使用display:none !important;通过切换这个hide类即可让元素显示/隐藏。当侧边栏隐藏时是直接给侧边栏整体加上hide样式类名26、现在需要实现主体内容去的响应式由大屏幕逐渐缩小到小屏幕时从1行能容纳多个图表到只能容纳1个图表。
先设置响应式断点
media (max-width:1400px) {}media (max-width:1200px) { /* 当屏幕在1200以下生效 */ }media (max-width:992px) { /* 当屏幕在992以下生效 */ }media (max-width:768px) { /* 当屏幕在768以下生效 */}/* 位于下方的样式如果生效将覆盖上面的样式 */media (max-width:576px) {}再在各个断点中开启grid布局重新设置划分区域而各个card所设置的属于指定区域保持不变
/* 指定区域不变 */
.index-main .m-card:nth-child(1) { grid-area: a1; }
.index-main .m-card:nth-child(2) { grid-area: a2; }
.index-main .m-card:nth-child(3) { grid-area: a3; }
.index-main .m-card:nth-child(4) { grid-area: a4; }
.index-main .m-card:nth-child(5) { grid-area: a5; }
.index-main .m-card:nth-child(6) { grid-area: a6; }/* 背景图标设置 */
.m-card__bg1,
.m-card__bg2,
.m-card__bg3,
.m-card__bg4,
.m-card__bg5,
.m-card__bg6 {width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;background-size: contain;
}
.m-card__bg1 {background-image: url(../static/index-1.jpg);}
.m-card__bg2 { background-image: url(../static/index-2.jpg);}
.m-card__bg3 {background-image: url(../static/index-3.jpg);}
.m-card__bg4 {background-image: url(../static/index-4.jpg);}
.m-card__bg5 {background-image: url(../static/index-5.jpg);}
.m-card__bg6 {background-image: url(../static/index-6.jpg);}/* 网格布局 */
.index-main {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, 285px);grid-template-areas: a1 a1 a1 a2a1 a1 a1 a3a4 a4 a5 a6;margin: 24px;gap: 24px;}media (max-width:1200px) { /* 当屏幕在1200以下生效 */.index-main {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 285px);grid-template-areas: a1 a1 a1a1 a1 a1a2 a3 a4a5 a5 a6;}}media (max-width:992px) { /* 当屏幕在992以下生效 */ .index-main {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(5, 285px);grid-template-areas: a1 a1a1 a1a2 a3a4 a4a5 a6;}
}media (max-width:768px) { /* 当屏幕在768以下生效 */.index-main {display: grid;grid-template-columns: 1fr;grid-template-rows: repeat(6, 285px);grid-template-areas: a1a2a3a4a5a6;}}27、还有1个响应式效果就是当屏幕小于992时左侧侧边栏要隐藏并且内容区的头部要出现1个图标和按钮看上面的效果图点击按钮能够把左侧的菜单栏显示出来并且此时有蒙层点击蒙层时蒙层消失并且左侧侧边栏隐藏。
这里先把图标和按钮的的html结构写到内容区头部在初始的时候先display:none隐藏掉它再在media(max-width:992px)中设置display:flex这样当屏幕小于992的时候就显示了但此时显示的是头部的图标和按钮现在还需要设置侧边栏隐藏因此media(max-width:992px)中还得加上侧边栏隐藏的样式display:none
当屏幕小于992了并且侧边栏隐藏了现在点击按钮需要显示侧边栏并且显示蒙层。但是此时点击按钮时需要判断在设置中是否隐藏了侧边栏判断的依据是侧边栏有没有hide这个样式如果设置了侧边栏隐藏那么此时点击按钮是无效的。如果没有设置侧边栏隐藏此时点击按钮只需要给侧边栏加上show这个公共样式即display:block。
当屏幕小于992点击按钮展示左侧侧边栏还需要在底下显示1个蒙层这个蒙层在html的结构上就放在侧边栏的下方。并且当侧边栏有show这个样式时才显示这个蒙层有个与:not(…)相对的选择器:is(…)使用了.g-ant__sider:is(.show) u-mask{display:block}显示该蒙层。
注意这个技巧在目标元素后面添加个蒙层的div。不直接控制蒙层的显示和隐藏而是通过给目标元素加上类名后通过类名 兄弟选择器选择到后面的蒙层控制蒙层的显示和隐藏。有多个地方用到蒙层就可以在每个地方都使用这样的技巧。 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./iconfont/iconfont.csslink relstylesheet href./css/global.csslink relstylesheet href./css/index.css
/head
body!-- 侧边栏 主体 --div classg-ant!-- 侧边栏 --!-- ant__sider--closed控制侧边栏折叠状态 -- !-- 要点使用类名去控制状态 --div classg-ant__sider g-ant__sider--closed!-- 1、g-ant-sider__wrap--fixed控制是否固定 2、这里设置高度为100%固定定位时是可视区高度不是固定定位时是父元素的高度--div classg-ant-sider__wrap g-ant-sider__wrap--fixed!-- 侧边栏头部 logo 文字 --div classg-ant-sider__heada classm-logo href#img src./static/logo.svg alth1Ant Design Pro/h1/a/div!-- 侧边栏主体 菜单模块 --ul classg-ant-sider__main!-- 菜单 --li classm-menu m-menu--selected!-- 菜单-目录 --div classm-menu__titlei classiconfont icon-car/ispanDashboard/spani classiconfont icon-arrowup/i/div!-- 菜单-子菜单 --ul classm-menu__subli分析页/lili classm-menu__sub--selected监控页/lili工作台/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-printer/ispan表单页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli基础表单/lili分步表单/lili高级表单/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-video/ispan列表页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli搜索列表/lili查询表格/lili标准列表/lili卡片列表/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-check-circle/ispan详情页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli基础详情页/lili高级详情页/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-user/ispan结果页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli成功页/lili失败页/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-error/ispan结果页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli403/lili404/lili500/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-highlight/ispan个人页/spani classiconfont icon-arrowdown/i/divul classm-menu__subli个人中心/lili个人设置/li/ul/lili classm-menudiv classm-menu__titlei classiconfont icon-wrench/ispan图形编辑器/spani classiconfont icon-arrowdown/i/divul classm-menu__subli流程编辑器/lili脑图编辑器/lili拓扑编辑器/li/ul/li/ul!-- 侧边栏尾部 --div classg-ant-sider__footi classiconfont icon-outdent u-bar/i/div/div/div!-- 蒙层当屏幕小于992时左侧侧边栏隐藏此时点击头部的按钮将显示侧边栏并且要在底下盖上一层蒙层这里就是这个蒙层 --div classu-mask/div!-- 主体 --div classg-ant__main!-- 主体头部 --div classg-ant-main__head g-ant-main__head--fixed!-- 这里主体的头部区域仅在屏幕宽度小于992时才显示 --div classm-logo2img src./static/logo.svg alti classiconfont icon-outdent u-bar/i/divi classiconfont icon-idcard/ii classiconfont icon-check-circle/ii classiconfont icon-read/ii classiconfont icon-user/ispanadmin/spani classiconfont icon-error/i/div!-- 主体内容区 --div classg-ant-main__main!-- 使用grid布局 --div classindex-main!-- 卡片 --div classm-carddiv classm-card__title活动实时交易情况/div!-- 背景图片 --div classm-card__bodydiv classindex-main__bg1/div/div/divdiv classm-carddiv classm-card__title活动情况预测/divdiv classm-card__bodydiv classindex-main__bg2/div/div/divdiv classm-carddiv classm-card__title券核效率/divdiv classm-card__bodydiv classindex-main__bg3/div/div/divdiv classm-carddiv classm-card__title各品类占比/divdiv classm-card__bodydiv classindex-main__bg4/div/div/divdiv classm-carddiv classm-card__title热门搜索/divdiv classm-card__bodydiv classindex-main__bg5/div/div/divdiv classm-carddiv classm-card__title资源剩余/divdiv classm-card__bodydiv classindex-main__bg6/div/div/div/div/div!-- 主体尾部 --div classg-ant-main__footpa href#Ant Design Pro/aa href#i classiconfont icon-github-fill/i/aa href#Ant Design/a/ppi classiconfont icon-user/i 2021 Produced by Ant Group Experience Technology Department/p/div/div/div!-- 右边设置抽屉 --div classm-settingdiv classm-setting__bari classiconfont icon-setting/i/divdiv classm-setting__itemh3主题色/h3ul classm-setting-item__themeli classu-foxiaolani classiconfont icon-check/i/lili classu-bomu/lili classu-huoshan/lili classu-rimu/lili classu-mingqing/lili classu-jiguanglv/lili classu-jikelan/lili classu-jiangzi/li/ul/div!-- 分割线 --div classu-divider/divdiv classm-setting__itemh3固定内容/h3ul classm-setting-item__togglelispan内容头部/spandiv classu-switch j-head--fixeddiv classu-switch__handle/div/div/lilispan侧边菜单/spandiv classu-switch j-sider--fixeddiv classu-switch__handle/div/div/li/ul/divdiv classu-divider/divdiv classm-setting__itemh3显示内容/h3ul classm-setting-item__togglelispan内容头部/spandiv classu-switch j-head--showdiv classu-switch__handle/div/div/lilispan侧边菜单/spandiv classu-switch j-sider--showdiv classu-switch__handle/div/div/li/ul/div/div!-- 蒙层当点击左侧抽屉时展示蒙层 --div classu-mask/divscript/* 点击菜单-目录展开或关闭 目录 */var menuTitles document.querySelectorAll(.m-menu__title);for(var i0;imenuTitles.length;i){menuTitles[i].onclick function(){/* 这里面获取的this就是绑定的事件的对象 */var menu this.parentElement;menu.classList.toggle(m-menu--selected);if( menu.className.includes(m-menu--selected) ){//打开状态var arrow this.querySelector([class*icon-arrow]);arrow.className iconfont icon-arrowup;}else{//关闭状态var arrow this.querySelector([class*icon-arrow]);arrow.className iconfont icon-arrowdown;}};}/* 点击 折叠/展开 侧边栏 */var bar document.querySelector(.g-ant-sider__foot .u-bar);var sider document.querySelector(.g-ant__sider);var menus document.querySelectorAll(.m-menu);bar.onclick function(){/* 切换 折叠/展开 样式类名 */sider.classList.toggle(g-ant__sider--closed);/* 第1个目录加上 m-menu--selected类名 */menus[0].classList.add(m-menu--selected);/* 第1个目录下的箭头修改为向上 */menus[0].querySelector([class*icon-arrow]).className iconfont icon-arrowup;/* 将其它所有目录全部移除掉 m-menu--selected类名 *//* 将其它所有目录下的箭头修改为向下 */for(var i1;imenus.length;i){menus[i].classList.remove(m-menu--selected);menus[i].querySelector([class*icon-arrow]).className iconfont icon-arrowdown;}};/* 打开或关闭设置 抽屉 */var setting document.querySelector(.m-setting);var settingBar document.querySelector(.m-setting__bar);/* 给设置按钮绑定点击事件 */settingBar.onclick function(){/* 切换样式类打开或关闭抽屉该类名添加给整个setting以方便css选择和控制后面的mask蒙层*/setting.classList.toggle(m-setting--open);/* 如果包含这个 m-setting--open 类名, 则修改图标 */if( setting.className.includes(m-setting--open) ){var icon this.querySelector(i);/* 直接覆盖全部样式 */icon.className iconfont icon-close;}else{var icon this.querySelector(i);icon.className iconfont icon-setting;}};/* 主题色切换 */var themes document.querySelectorAll(.m-setting-item__themeli);for(var i0;ithemes.length;i){themes[i].onclick function(){/* 移除所有主体色中的对勾小图标 */for(var i0;ithemes.length;i){themes[i].innerHTML ;}/* 添加点击的主题色的对勾小图标 */this.innerHTML i classiconfont icon-check/i;/* 修改:root即html元素中定义的主题色 */var color getComputedStyle(this).backgroundColor;document.documentElement.style.setProperty(--theme, color);};}/* 主体头部 */var mainHead document.querySelector(.g-ant-main__head);var siderWrap document.querySelector(.g-ant-sider__wrap);/* 头部固定开关 */var headFixed document.querySelector(.j-head--fixed);headFixed.onclick function(){/* 切换开关样式 */this.classList.toggle(u-switch--closed);/* 切换头部的样式类名 */mainHead.classList.toggle(g-ant-main__head--fixed);};/* 左边菜单栏固定开关 */var siderFixed document.querySelector(.j-sider--fixed);siderFixed.onclick function(){/* 切换开关样式 */this.classList.toggle(u-switch--closed);/* 切换侧边栏内部div的样式类名 */siderWrap.classList.toggle(g-ant-sider__wrap--fixed);};/* 头部显示/隐藏开关 */var headShow document.querySelector(.j-head--show);headShow.onclick function(){/* 切换开关样式 */this.classList.toggle(u-switch--closed);/* 切换内容去头部的样式类名这里是直接添加了个公共样式的类名 */mainHead.classList.toggle(hide);};/* 左边菜单栏显示/隐藏开关 */var siderShow document.querySelector(.j-sider--show);siderShow.onclick function(){/* 切换开关样式 */this.classList.toggle(u-switch--closed);/* 整个侧边栏消失 */sider.classList.toggle(hide);};/* 当屏幕小于992时左侧侧边栏自动隐藏但是内容区头部会显示1个图标和按钮点击这个按钮时要显示左侧侧边栏 */var bar2 document.querySelector(.m-logo2 .u-bar);bar2.onclick function(){/* 如果在设置中没有设置侧边栏隐藏。点击按钮时才显示侧边栏 */if( !sider.className.includes(hide) ){/* show是公共显示的样式, 即display:block !important */sider.classList.add(show);}};/* 点击左侧侧边栏的蒙层去掉show使用兄弟选择器选择sider后面的蒙层 */var mask document.querySelector(.g-ant__sider .u-mask);mask.onclick function(){/* 隐藏蒙层的同时隐藏侧边栏 */sider.classList.remove(show);};/script
/body
/htmlglobal.css
charset utf-8;/* --------------------重置样式-------------------------------- */body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
button,
input,
textarea,
th,
td {margin : 0;padding: 0
}/*设置默认字体*/
body {font-size : 14px;font-style : normal;font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}/*字体太小用户体检不好让small恢复12px*/
small {font-size: 12px
}h1 {font-size: 18px
}h2 {font-size: 16px
}h3 {font-size: 14px
}h4,
h5,
h6 {font-size: 100%
}ul,
ol {list-style: none
}a {text-decoration : none;background-color: transparent
}a:hover,
a:active {outline-width : 0;text-decoration: none
}/*重置表格*/
table {border-collapse: collapse;border-spacing : 0
}/*重置hr*/
hr {border: 0;height: 1px
}/*图形图片*/
img {border-style: none
}img:not([src]) {display: none
}svg:not(:root) {overflow: hidden
}/*下面的操作是针对于html5页面布局准备的不支持ie6~8以及其他低版本的浏览器*/
html {/*禁用系统默认菜单*/-webkit-touch-callout : none;/*关闭iphone Android的浏览器纵向和横向模式中自动调整字体大小的功能*/-webkit-text-size-adjust: 100%
}input,
textarea,
button,
a {/*表单或者a标签在手机点击时会出现边框或彩色的背景区域意思是去除点击背景框*/-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}/*重置html5元素的默认样式*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {display: block
}audio,
canvas,
progress,
video {display: inline-block
}audio:not([controls]),
video:not([controls]) {display: none;height : 0
}progress {vertical-align: baseline
}mark {background-color: #ff0;color : #000
}sub,
sup {position : relative;font-size : 75%;line-height : 0;vertical-align: baseline
}sub {bottom: -0.25em
}sup {top: -0.5em
}button,
input,
select,
textarea {font-size: 100%;outline : 0
}button,
input {overflow: visible
}button,
select {text-transform: none
}textarea {overflow: auto
}button,
html [typebutton],
[typereset],
[typesubmit] {-webkit-appearance: button
}button::-moz-focus-inner,
[typebutton]::-moz-focus-inner,
[typereset]::-moz-focus-inner,
[typesubmit]::-moz-focus-inner {border-style: none;padding : 0
}button:-moz-focusring,
[typebutton]:-moz-focusring,
[typereset]:-moz-focusring,
[typesubmit]:-moz-focusring {outline: 1px dotted ButtonText
}[typecheckbox],
[typeradio] {box-sizing: border-box;padding : 0
}[typenumber]::-webkit-inner-spin-button,
[typenumber]::-webkit-outer-spin-button {height: auto
}[typesearch] {-webkit-appearance: textfield;outline-offset : -2px
}[typesearch]::-webkit-search-cancel-button,
[typesearch]::-webkit-search-decoration {-webkit-appearance: none
}::-webkit-input-placeholder {color : inherit;opacity: .54
}::-webkit-file-upload-button {-webkit-appearance: button;font : inherit
}/*-----------------通用方法-----------------------*/:root {--theme: #1890ff;
}.show {display: block !important;
}.hide {display: none !important;
}/*-----------------通用布局(g-)-----------------------*/.g-ant {display: flex;
}.g-ant__sider {flex-shrink: 0;background : #00152a;width : 208px;min-height : 100vh;position: relative;z-index: 3;
}.g-ant-sider__wrap {height : 100%; /* 当采用固定定位时100%高度就是可视区的高度当不采用固定定位时100%就是父元素高度 */display : flex;flex-direction: column;
}.g-ant-sider__wrap--fixed {position: fixed;left : 0;top : 0;width : inherit; /* 当使用固定定位后外部容器使用overflow:hidden将盖不住fixed的内容, 此处将width改为与父容器一致然后溢出隐藏 */overflow: hidden;
}.g-ant__sider--closed {width : 48px;overflow: hidden;
}.g-ant-sider__head {flex-shrink: 0;
}.g-ant-sider__main {flex-grow: 1;overflow : hidden auto;
}.g-ant-sider__main::-webkit-scrollbar {width : 6px;height: 6px;
}.g-ant-sider__main::-webkit-scrollbar-thumb {background : #51606d;border-radius: 3px;
}.g-ant-sider__main::-webkit-scrollbar-track {background : #263849;border-radius: 3px;
}.g-ant-sider__foot {flex-shrink: 0;
}.g-ant__main {flex-grow : 1;display : flex;flex-direction: column;background : #f1f2f6;
}.g-ant-main__head {height : 48px;background : white;flex-shrink : 0;display : flex;justify-content: flex-end;align-items : center;box-shadow : 0 1px 4px #ccc;column-gap : 20px;padding : 0 20px;
}.g-ant-main__head--fixed {position: fixed;left : 0;right : 0;z-index : 2;
}.g-ant-main__head--fixed:not(.hide) .g-ant-main__main{margin-top: 48px;
}.g-ant-main__headspan {margin-left: -15px;
}.g-ant-main__main {flex-grow: 1;
}.g-ant-main__foot {margin-top : 70px;margin-bottom: 30px;line-height : 30px;text-align : center;color : #868782;
}.g-ant-main__foot a {color : inherit;margin: 0 20px;
}/*-----------------通用模块(m-)-----------------------*/.m-logo {display : flex;align-items: center;padding : 16px;color : white;
}.m-logoimg {width: 32px;
}.m-logoh1 {font-weight: 600;margin-left: 12px;flex-shrink: 0;
}.m-logo2{display : none;align-items: center;margin-right: auto;
}
.m-logo2img {width: 32px;
}
.m-logo2.u-bar{color: inherit;
}.g-ant__sider--closed .m-logo {padding: 16px 8px;
}.m-menu {color : #8c959e;cursor: pointer;
}.m-menu__title {height : 44px;display : flex;align-items: center;column-gap : 10px;padding : 0 15px;
}.m-menu__titlespan {margin-right: auto;
}.m-menu__sub {display: none;
}.m-menu__subli {padding-left: 45px;height : 40px;line-height : 40px;
}.m-menu--selected .m-menu__title {color: white;
}.m-menu--selected .m-menu__sub {display: block;
}.m-menu__sub--selected {background: var(--theme);color : white;
}.g-ant__sider--closed .m-menu__title {transform: scale(1.5);
}.g-ant__sider--closed .m-menu__sub {display: none;
}.m-card {width : 100%;height : 100%;background : white;display : flex;flex-direction: column;border-radius : 2px;font-size : 16px;
}.m-card__title {flex-shrink : 0;height : 57px;border-bottom: 1px #f1f1f1 solid;display : flex;align-items : center;padding-left : 20px;
}.m-card__body {flex-grow: 1;padding : 20px;
}.m-setting {width : 300px;height : 100vh;background: white;position : fixed;right : -300px;top : 0;padding : 0 15px;box-sizing: border-box;z-index : 10;
}.m-setting--open {right: 0;
}.m-setting--open.u-mask {display: block;
}.m-setting__bar {width : 48px;height : 48px;background : var(--theme);border-radius : 2px;position : absolute;left : -48px;top : calc(50% - 24px);color : white;display : flex;justify-content: center;align-items : center;cursor : pointer;
}.m-setting__bari {font-size: 22px;
}.m-setting__item {margin: 50px 0;
}.m-setting-item__theme {display : flex;justify-content: space-between;margin : 30px 0;
}.m-setting-item__toggleli {display : flex;justify-content: space-between;margin : 30px 0;
}/*-----------------通用元件(u-)-----------------------*/.u-bar {font-size: 18px;color : white;display : block;padding : 15px;cursor : pointer;
}.u-foxiaolan,
.u-bomu,
.u-huoshan,
.u-rimu,
.u-mingqing,
.u-jiguanglv,
.u-jikelan,
.u-jiangzi {width : 20px;height : 20px;color : white;border-radius: 2px;cursor : pointer;line-height : 20px;text-align : center;
}.u-foxiaolan {background: #188efc;
}.u-bomu {background: #f5212d;
}.u-huoshan {background: #fe531f;
}.u-rimu {background: #fbae14;
}.u-mingqing {background: #14c2c3;
}.u-jiguanglv {background: #53c41a;
}.u-jikelan {background: #2f54eb;
}.u-jiangzi {background: #722ed1;
}.u-divider {width : 100%;height : 1px;background: #f0f0f0;margin : 25px 0;
}.u-switch {width : 28px;height : 16px;border-radius: 100px;background : var(--theme);cursor : pointer;
}.u-switch--closed {background: rgba(0, 0, 0, 0.25);
}.u-switch--closed .u-switch__handle {left: 14px;
}.u-switch__handle {width : 12px;height : 12px;background : white;border-radius: 50%;position : relative;left : 2px;top : 2px;
}.u-mask {display : none;width : 100vw;height : 100vh;background: rgba(0, 0, 0, 0.4);position : fixed;left : 0;top : 0;z-index : 5;
}/*-----------------响应式系统-----------------------*/media(max-width:1400px){}
media(max-width:1200px){}
media(max-width:992px){.m-logo2{/* 当屏幕小于992时就展示头部的显示侧边栏图标和按钮 */display: flex;}.g-ant__sider{/* 隐藏侧边栏 */display: none;/* 开启固定定位 */position: fixed;left:0;top:0;z-index: 6;} .g-ant__sider:is(.show) .u-mask{display: block;}}
media(max-width:768px){}
media(max-width:576px){}index.css
.index-main {display : grid;grid-template-columns: repeat(4, 1fr);grid-template-rows : repeat(3, 285px);gap : 24px;margin : 24px;grid-template-areas :a1 a1 a1 a2a1 a1 a1 a3a4 a4 a5 a6;
}.index-main .m-card:nth-of-type(1) {grid-area: a1;
}.index-main .m-card:nth-of-type(2) {grid-area: a2;
}.index-main .m-card:nth-of-type(3) {grid-area: a3;
}.index-main .m-card:nth-of-type(4) {grid-area: a4;
}.index-main .m-card:nth-of-type(5) {grid-area: a5;
}.index-main .m-card:nth-of-type(6) {grid-area: a6;
}.index-main__bg1,
.index-main__bg2,
.index-main__bg3,
.index-main__bg4,
.index-main__bg5,
.index-main__bg6 {background-repeat : no-repeat;background-position: center center;background-size : contain;width : 100%;height : 100%;
}.index-main__bg1 {background-image: url(../static/index-1.jpg);
}.index-main__bg2 {background-image: url(../static/index-2.jpg);
}.index-main__bg3 {background-image: url(../static/index-3.jpg);
}.index-main__bg4 {background-image: url(../static/index-4.jpg);
}.index-main__bg5 {background-image: url(../static/index-5.jpg);
}.index-main__bg6 {background-image: url(../static/index-6.jpg);
}media(max-width:1400px) {}media(max-width:1200px) {.index-main {display : grid;grid-template-columns: repeat(3, 1fr);grid-template-rows : repeat(4, 285px);gap : 24px;margin : 24px;grid-template-areas :a1 a1 a1a1 a1 a1a2 a3 a5a4 a4 a6;}
}media(max-width:992px) {.index-main {display : grid;grid-template-columns: repeat(2, 1fr);grid-template-rows : repeat(5, 285px);gap : 24px;margin : 24px;grid-template-areas :a1 a1a1 a1a2 a3a4 a4a5 a6;}
}media(max-width:768px) {.index-main {display : grid;grid-template-columns: repeat(1, 1fr);grid-template-rows : repeat(6, 285px);gap : 24px;margin : 24px;grid-template-areas :a1a2a3a4a5a6;}
}media(max-width:576px) {}自定义变量
来源CSS中 自定义属性变量详解
前言
自定义属性有时也被称作CSS变量或者级联变量是由CSS作者定义的它包含的值可以在整个文档中重复使用。 由自定义属性标记设定值比如 --main-color: black;由 var() 函数来获取值比如 color: var(–main-color); 复杂的网站都会有大量的CSS代码通常也会有许多重复的值。 举例同样一个颜色值可能在成千上百个地方被使用到如果这个值发生了变化需要全局搜索并且一个一个替换。 自定义属性在某个地方存储一个值然后在其他许多地方引用它。另一个好处是语义化的标识。
如–main-text-color 会比 #00ff00 更易理解尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束并从其父级继承其值。
浏览器兼容情况 1. 变量的声明
声明一个自定义属性属性名需要以两个减号–开始属性值则可以是任何有效的CSS值。
和其他属性一样自定义属性也是写在规则集之内的如下
element {--main-bg-color: brown;
}注意规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root 下这样就可以在HTML文档的任何地方访问到它了
:root {--main-color: red;--bg-color: pink;--main-font-size: 15px;
}然而这条规则不是绝对的如果有理由去限制你的自定义属性那么就应该限制。
注意自定义属性名是大小写敏感的。 --my-color 和 --My-color 会被认为是两个不同的自定义属性。
2. var() 函数
读取变量
.wrap{color: var(--main-color);
}使用第二个参数表示变量的默认值。如果该变量不存在就会使用这个默认值。
第二个参数不处理内部的逗号或空格都视作参数的一部分。
.wrap{height: var(--el-height,400px);font-family: var(--font-stack, Roboto, Helvetica);padding:var(--pad, 10px 20px);
}变量的声明
:root {--length: 400px;--mian-width:var(--length);
}注意变量值只能用作属性值不能用作属性名。
.foo {--side: margin-top;var(--side): 20px; /* 无效 */
}3. 变量值的类型
如果变量值是一个字符串可以与其他字符串拼接。
:root {--content: CSS;
}.wrap::after{content:hello var(--content);
}如果变量值是数值不能与数值单位直接连用。必须使用calc()函数将它们连接。
.wrap{--gap: 20;margin-top: var(--gap)px; /* 无效 */margin-bottom: calc(var(--gap) * 1px);
}如果变量值带有单位就不能写成字符串。
/* 无效 */
.wrap {--foo: 20px;font-size: var(--foo);
}/* 有效 */
.wrap {--foo: 20px;font-size: var(--foo);
}4. 作用域
同一个 CSS 变量可以在多个选择器内声明。读取的时候优先级最高的声明生效。这与 CSS 的层叠cascade规则是一致的。
style:root { --color: blue; }span { --color: green; }#title { --color: red; }
/stylep蓝色/p
span绿色/span
div idtitle红色/divp {color: var(--color);
}
span{color: var(--color);
}
#title{color: var(--color) ;
}上面代码中三个选择器都声明了–color变量。不同元素读取这个变量的时候会采用优先级最高的规则因此三段文字的颜色是不一样的。 这就是说变量的作用域就是它所在的选择器的有效范围。 由于这个原因全局的变量通常放在根元素 :root 里面确保任何选择器都可以读取它们。
:root {--main-color: #06c;
}5. 响应式布局
CSS 是动态的页面的任何变化都会导致采用的规则变化。
利用这个特点可以在响应式布局的 media 命令里面声明变量使得不同的屏幕宽度有不同的变量值。
body {--primary: #7F583F;--secondary: #F7EFD2;
}a {color: var(--primary);text-decoration-color: var(--secondary);
}media screen and (min-width: 768px) {body {--primary: #F7EFD2;--secondary: #7F583F;}
}6. JavaScript 操作
JavaScript 也可以检测浏览器是否支持 CSS 变量。
const isSupported window.CSS window.CSS.supports window.CSS.supports(--a, 0);if (isSupported) {console.log(support)
} else {console.log(not support)
}JavaScript 操作 CSS 变量的写法如下
// 设置 Dom 节点上的 CSS 变量
el.style.setProperty(--bg-color, yellow);
// 读取变量好像只能读取元素通过setProperty设置的不能读取根元素 :root 里的
document.body.style.getPropertyValue(--primary).trim();
// 获取任意 Dom 节点上的 CSS 变量能读取元素通过setProperty设置的和根元素 :root 里的
getComputedStyle(el).getPropertyValue(--bg-color).trim();
// 删除变量好像只能删除元素通过ssetProperty设置的不能删除根元素 :root 里的
el.style.removeProperty(--bg-color);7. 兼容性处理
对于不支持 CSS 变量的浏览器可以采用下面的写法。
a {color: #7F583F;color: var(--primary);
}也可以使用 support 命令进行检测。
supports ( (--a: 0)) {/* support */
}supports ( not (--a: 0)) {/* not support */
}
文章转载自： http://www.morning.fnssm.cn.gov.cn.fnssm.cn http://www.morning.nrydm.cn.gov.cn.nrydm.cn http://www.morning.dbcw.cn.gov.cn.dbcw.cn http://www.morning.fxzlg.cn.gov.cn.fxzlg.cn http://www.morning.rxxdk.cn.gov.cn.rxxdk.cn http://www.morning.jrhcp.cn.gov.cn.jrhcp.cn http://www.morning.txjrc.cn.gov.cn.txjrc.cn http://www.morning.chzqy.cn.gov.cn.chzqy.cn http://www.morning.ygmw.cn.gov.cn.ygmw.cn http://www.morning.sxlrg.cn.gov.cn.sxlrg.cn http://www.morning.mmhaoma.com.gov.cn.mmhaoma.com http://www.morning.qdzqf.cn.gov.cn.qdzqf.cn http://www.morning.bpmnl.cn.gov.cn.bpmnl.cn http://www.morning.kwqwp.cn.gov.cn.kwqwp.cn http://www.morning.kskpx.cn.gov.cn.kskpx.cn http://www.morning.srgnd.cn.gov.cn.srgnd.cn http://www.morning.kpbn.cn.gov.cn.kpbn.cn http://www.morning.jwbfj.cn.gov.cn.jwbfj.cn http://www.morning.kpmxn.cn.gov.cn.kpmxn.cn http://www.morning.dpmkn.cn.gov.cn.dpmkn.cn http://www.morning.fndmk.cn.gov.cn.fndmk.cn http://www.morning.xjbtb.cn.gov.cn.xjbtb.cn http://www.morning.hmxb.cn.gov.cn.hmxb.cn http://www.morning.spsqr.cn.gov.cn.spsqr.cn http://www.morning.ftzll.cn.gov.cn.ftzll.cn http://www.morning.mmynk.cn.gov.cn.mmynk.cn http://www.morning.lwjlj.cn.gov.cn.lwjlj.cn http://www.morning.bppml.cn.gov.cn.bppml.cn http://www.morning.gcysq.cn.gov.cn.gcysq.cn http://www.morning.sgjw.cn.gov.cn.sgjw.cn http://www.morning.btqrz.cn.gov.cn.btqrz.cn http://www.morning.wrwcf.cn.gov.cn.wrwcf.cn http://www.morning.trjp.cn.gov.cn.trjp.cn http://www.morning.rqbr.cn.gov.cn.rqbr.cn http://www.morning.ykbgs.cn.gov.cn.ykbgs.cn http://www.morning.wqbfd.cn.gov.cn.wqbfd.cn http://www.morning.dnjwm.cn.gov.cn.dnjwm.cn http://www.morning.rpstb.cn.gov.cn.rpstb.cn http://www.morning.dnqliv.cn.gov.cn.dnqliv.cn http://www.morning.bzwxr.cn.gov.cn.bzwxr.cn http://www.morning.xphcg.cn.gov.cn.xphcg.cn http://www.morning.bwjws.cn.gov.cn.bwjws.cn http://www.morning.qglqb.cn.gov.cn.qglqb.cn http://www.morning.pmmrb.cn.gov.cn.pmmrb.cn http://www.morning.sdktr.com.gov.cn.sdktr.com http://www.morning.yqqgp.cn.gov.cn.yqqgp.cn http://www.morning.hxbjt.cn.gov.cn.hxbjt.cn http://www.morning.psxwc.cn.gov.cn.psxwc.cn http://www.morning.phzrq.cn.gov.cn.phzrq.cn http://www.morning.rkrcd.cn.gov.cn.rkrcd.cn http://www.morning.kfrhh.cn.gov.cn.kfrhh.cn http://www.morning.rnrfs.cn.gov.cn.rnrfs.cn http://www.morning.mhlsx.cn.gov.cn.mhlsx.cn http://www.morning.rqfkh.cn.gov.cn.rqfkh.cn http://www.morning.zwxfj.cn.gov.cn.zwxfj.cn http://www.morning.brbnc.cn.gov.cn.brbnc.cn http://www.morning.bhxzx.cn.gov.cn.bhxzx.cn http://www.morning.ffksr.cn.gov.cn.ffksr.cn http://www.morning.trhlb.cn.gov.cn.trhlb.cn http://www.morning.jsdntd.com.gov.cn.jsdntd.com http://www.morning.trplf.cn.gov.cn.trplf.cn http://www.morning.gmmxh.cn.gov.cn.gmmxh.cn http://www.morning.ntlxg.cn.gov.cn.ntlxg.cn http://www.morning.pghfy.cn.gov.cn.pghfy.cn http://www.morning.cszbj.cn.gov.cn.cszbj.cn http://www.morning.fnssm.cn.gov.cn.fnssm.cn http://www.morning.cnkrd.cn.gov.cn.cnkrd.cn http://www.morning.zylrk.cn.gov.cn.zylrk.cn http://www.morning.kdbcx.cn.gov.cn.kdbcx.cn http://www.morning.rnmmh.cn.gov.cn.rnmmh.cn http://www.morning.ryysc.cn.gov.cn.ryysc.cn http://www.morning.yfmwg.cn.gov.cn.yfmwg.cn http://www.morning.jcxgr.cn.gov.cn.jcxgr.cn http://www.morning.krhkn.cn.gov.cn.krhkn.cn http://www.morning.wnhgb.cn.gov.cn.wnhgb.cn http://www.morning.qbwyd.cn.gov.cn.qbwyd.cn http://www.morning.mrfjr.cn.gov.cn.mrfjr.cn http://www.morning.qfkdt.cn.gov.cn.qfkdt.cn http://www.morning.gjxr.cn.gov.cn.gjxr.cn http://www.morning.rccbt.cn.gov.cn.rccbt.cn
