学校网站建设情况介绍,下载源代码建网站,厦门市建设管理协会网站首页,网站的运营成本视口
布局视口 layout viewport
视口#xff08;viewport#xff09;就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
一般移动设备的浏览器都默认设置了一个布局视口#xff0c;用于解决早期的PC端页面在手机上显示的问题。
iOS, Androi…视口
布局视口 layout viewport
视口viewport就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
一般移动设备的浏览器都默认设置了一个布局视口用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px所以PC上的网页大多都能在手机上呈现只不过元素看上去很小一般默认可以通过手动缩放网页。 视觉视口 visual viewport
字面意思它是用户正在看到的网站的区域。注意是网站的区域。
我们可以通过缩放去操作视觉视口但不会影响布局视口布局视口仍保持原来的宽度。 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口对设备来讲是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的布局视口的宽度应该与理想视口的宽度一致简单理解就是设备有多宽我们布局的视口就多宽 meta视口标签
格式
meta nameviewport contentwidthdevice-width, user-scalableno,
initial-scale1.0, maximum-scale1.0, minimum-scale1.0
属性
解释说明
width 宽度设置的是viewport宽度可以设置device-width特殊值
initial-scale 初始缩放比大于0的数字
maximum-scale 最大缩放比大于0的数字
minimum-scale 最小缩放比大于0的数字
user-scalable 用户是否可以缩放yes或no1或0 标准的viewport设置
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0 代码演示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0,maximum-scale1.0, minimum-scale1.0, user-scalablenometa http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbody黑马程序员
/body/html 二倍图
物理像素物理像素比
物理像素点指的是屏幕显示的最小颗粒是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
我们开发时候的1px 不是一定等于1个物理像素的
PC端页面1个px 等于1个物理像素的但是移动端就不尽相同
一个px的能显示的物理像素点的个数称为物理像素比或屏幕像素比 PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 1 物理像素的
Retina视网膜屏幕是一种显示技术可以将把更多的物理像素点压缩至一块屏幕里从
而达到更高的分辨率并提高屏幕显示的细腻程度 多倍图
对于一张 50px * 50px 的图片,在手机 Retina 屏中打开按照刚才的物理像素比会放大倍数这样会造成图片模糊
在标准的viewport设置中使用倍图来提高图片质量解决在高清设备中的模糊问题
通常使用二倍图 因为iPhone 6\7\8 的影响,但是现在还存在3倍图4倍图的情况这个看实际开发公司需求
就拿iphone8来举例。我们的页面在iphone8中会放大两倍也就是原本50px * 50px的图会放大成100px * 100px。那么照片就会模糊。那么我们可以先拿一张100px * 100px手动将其缩小为原来的1 / 2,也就是50px * 50px 然后手机端放大的时候变成100px * 100px也是正常的了 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/* 我们需要一个50*50像素css像素的图片 直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊 *//* 我们采取的是 放一个 100* 100 图片 然后手动的把这个图片 缩小为 50* 50 css像素 *//* 我们准备的图片 比我们实际需要的大小 大2倍这就方式就是 2倍图 */img:nth-child(2) {width: 50px;height: 50px;}/style
/headbody!-- 模糊的 --img srcimages/apple50.jpg alt!-- 我们采取2倍图 --img srcimages/apple100.jpg alt
/body/html
在手机端查看可以看到也可以用浏览器模拟 背景缩放 background-size
图片可以缩放那我们的背景图也可以缩放
background-size 属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位 长度|百分比|cover|contain;
cover把背景图像扩展至足够大以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域
实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 500px;height: 500px;border: 2px solid red;background: url(images/dog.jpg) no-repeat;/* background-size: 图片的宽度 图片的高度; *//* background-size: 500px 200px; *//* 1.只写一个参数 肯定是宽度 高度省略了 会等比例缩放 *//* background-size: 500px; *//* 2. 里面的单位可以跟% 相对于父盒子来说的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆盖div盒子 可能有部分背景图片显示不全 *//* background-size: cover; *//* 4. contain 高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域 */background-size: contain;}/style
/headbodydiv/divp/p
/body/html
效果
自己可以四个单位换着看 移动端开发选择
单独移动端页面主流
通常情况下网址域名前面加 m(mobile) 可以打开移动端。通过判断设备如果是移动设备打开则跳到移动端页面。 响应式兼容PC移动端
三星电子官网 www.samsung.com/cn/ 通过判断屏幕宽度来改变样式以适应不同终端。
缺点制作麻烦 需要花很大精力去调兼容性问题 CSS初始化 normalize.css
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css保护了有价值的默认值
Normalize.css修复了浏览器的bug
Normalize.css是模块化的
Normalize.css拥有详细的文档
官网地址 Normalize.css: Make browsers render all elements more consistently. 特殊样式
这里列举了四种比较常见的特殊的样式剩下之后遇到可以上百度查找
/CSS3盒子模型/box-sizing: border-box;-webkit-box-sizing: border-box;/点击高亮我们需要清除清除 设置为transparent 完成透明/-webkit-tap-highlight-color: transparent;/在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式/-webkit-appearance: none;/禁用长按页面时的弹出菜单/img,a { -webkit-touch-callout: none; } 移动端技术选型
移动端布局和以前我们学习的PC端有所区别
1. 单独制作移动端页面主流
流式布局百分比布局
flex 弹性布局强烈推荐
lessrem媒体查询布局
混合布局
2. 响应式页面兼容移动端其次
媒体查询
bootstarp 流式布局百分比布局
流式布局就是百分比布局也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩不受固定像素的限制内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。 由于页面可以无限伸缩所以我们可以设置盒子伸缩的最大限度
max-width 最大宽度 max-height 最大高度
min-width 最小宽度 min-height 最小高度 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}section {width: 100%;max-width: 980px;min-width: 320px;margin: 0 auto;}section div {float: left;width: 50%;height: 400px;}section div:nth-child(1) {background-color: pink;}section div:nth-child(2) {background-color: purple;}/style
/headbodysectiondiv/divdiv/div/section
/body/html
效果 flex布局
flex布局体验 传统布局与flex布局
传统布局
兼容性好
布局繁琐
局限性不能再移动端很好的布局
flex 弹性布局
操作方便布局极为简单移动端应用很广泛
PC 端浏览器支持情况较差
IE 11或更低版本不支持或仅部分支持
建议 如果是PC端页面布局我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局我们还是使用flex弹性布局 初体验
在div中设置宽高然后设置displa为flex设置为flex布局
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;}div span {/* width: 150px; */height: 100px;background-color: purple;margin-right: 5px;flex: 1;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 演化过程
一开始仅仅设计一个div和三个span
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 80%;height: 300px;background-color: pink;}div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 然后为div设置flex布局那么span设置的宽高都可以显现出来
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;}div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 如果让这三个span盒子完全三分div的宽我们加上
justify-content: space-around;
代码作用
justify-content: space-around; 是CSS中Flexbox布局模型的一个属性值用于控制弹性容器flex container内弹性项目flex items在主轴main axis上的对齐方式。
具体作用如下 在主轴上均匀分布项目 它会使得弹性项目在主轴上均匀分布但与justify-content: space-between;不同的是space-around会在每个项目的两侧都留有空白区域。也就是说第一个项目和最后一个项目距离容器边缘的空白区域大小是其他项目之间空白区域大小的一半。
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around; }div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 最后如果想这三个span完全占满div加上代码
flex: 1;
作用
flex: 1; 是 CSS Flexbox 布局中一个非常实用的属性值它是一种简写属性相当于设置了 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。它的主要作用是使弹性项目flex item能够按照一定比例分配弹性容器flex container中的剩余空间。
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;flex: 1;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 如果要使div纵向排列
加上这句代码
flex-direction: column;
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;flex-direction: column;}div span {width: 150px;height: 100px;background-color: purple;margin-bottom: 5px;flex: 1;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 布局原理
flex 是 flexible Box 的缩写意为弹性布局用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后子元素的 float、clear 和 vertical-align 属性将失效。
伸缩布局 弹性布局 伸缩盒布局 弹性盒布局 flex布局 采用 Flex 布局的元素称为 Flex 容器flex container简称容器。它的所有子元素自动成为容器成员称为 Flex 项目flex item简称项目。
体验中 div 就是 flex父容器。
体验中 span 就是 子容器 flex项目
子容器可以横向排列也可以纵向排列 总结flex布局原理
就是通过给父盒子添加flex属性来控制子盒
子的位置和排列方式 flex布局父项常见属性
常见父项属性
以下由6个属性是对父元素设置的
flex-direction设置主轴的方向
justify-content设置主轴上的子元素排列方式
flex-wrap设置子元素是否换行
align-content设置侧轴上的子元素的排列方式多行
align-items设置侧轴上的子元素排列方式单行
flex-flow复合属性相当于同时设置了 flex-direction 和 flex-wrap flex-direction 设置主轴的方向
主轴与侧轴
在 flex 布局中是分为主轴和侧轴两个方向同样的叫法有 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向水平向右
默认侧轴方向就是 y 轴方向水平向下 flex-direction 设置主轴的方向
flex-direction 属性决定主轴的方向即项目的排列方向
注意 主轴和侧轴是会变化的就看 flex-direction 设置谁为主轴剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {/* 给父级添加flex属性 */display: flex;width: 800px;height: 300px;background-color: pink;/* 默认的主轴是 x 轴 行 row 那么y轴就是侧轴喽 *//* 我们的元素是跟着主轴来排列的 *//* flex-direction: row; *//* 简单了解 翻转 */flex-direction: row-reverse;/* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 *//* flex-direction: column; */}div span {width: 150px;height: 100px;background-color: purple;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意 使用这个属性之前一定要确定好主轴是哪个
属性值
flex-start 默认值 从头部开始 如果主轴是x轴则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐如果主轴是x轴则 水平居中
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间重要 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 300px;background-color: pink;/* 默认的主轴是 x 轴 row */flex-direction: row;/* justify-content: 是设置主轴上子元素的排列方式 *//* justify-content: flex-start; *//* justify-content: flex-end; *//* 让我们子元素居中对齐 */justify-content: center;/* 平分剩余空间 *//* justify-content: space-around; *//* 先两边贴边 在分配剩余的空间 *//* justify-content: space-between; */}div span {width: 150px;height: 100px;background-color: purple;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/span/div
/body/html
效果 flex-wrap 设置子元素是否换行
默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义flex布局中默认是不换行的。
属性值
nowrap 默认值不换行
wrap 换行
实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 600px;height: 400px;background-color: pink;/* flex布局中默认的子元素是不换行的 如果装不开会缩小子元素的宽度放到父元素里面 *//* flex-wrap: nowrap; */flex-wrap: wrap;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div
/body/html
效果: align-items 设置侧轴上的子元素排列方式单行
该属性是控制子项在侧轴默认是y轴上的排列方式 在子项为单项单行的时候使用。
属性值
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中垂直居中
stretch 拉伸 默认值
实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 400px;background-color: pink;/* 默认的主轴是 x 轴 row */flex-direction: column;justify-content: center;/* 我们需要一个侧轴居中 *//* 拉伸但是子盒子不要给高度 *//* align-items: stretch; */align-items: center;/* align-content: center; */}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 align-content 设置侧轴上的子元素的排列方式多行
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况多行在单行下是没有效果的。
属性值
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头再平分剩余空间
stretch 设置子项元素高度平分父元素高度、 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 800px;height: 400px;background-color: pink;/* 换行 */flex-wrap: wrap;/* 因为有了换行此时我们侧轴上控制子元素的对齐方式我们用 align-content *//* align-content: flex-start; *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div
/body/html
效果 align-content 和 align-items 区别
align-items 适用于单行情况下 只有上对齐、下对齐、居中和 拉伸
align-content 适应于换行多行的情况下单行情况下无效 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;
flex-flow复合属性相当于同时设置了 flex-direction 和 flex-wrap
实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 600px;height: 300px;background-color: pink;/* flex-direction: column;flex-wrap: wrap; *//* 把设置主轴方向和是否换行换列简写 */flex-flow: column wrap;}div span {width: 150px;height: 100px;background-color: purple;}/style
/headbodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div
/body/html flex布局子项常见属性
flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序前后顺序 flex 属性 ★
flex 属性定义子项目分配剩余空间用flex来表示占多少份数。
.item {flex: number; /* default 0 */}
实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylesection {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1) {width: 100px;height: 150px;background-color: red;}section div:nth-child(2) {flex: 1;/* width: 100px;height: 150px; */background-color: green;}section div:nth-child(3) {width: 100px;height: 150px;background-color: blue;}p {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span {flex: 1;}p span:nth-child(2) {flex: 2;background-color: purple;}/style
/headbodysectiondiv/divdiv/divdiv/div/sectionpspan1/spanspan2/spanspan3/span/p
/body/html
效果 align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式可覆盖 align-items 属性。
默认值为 auto表示继承父元素的 align-items 属性如果没有父元素则等同于 stretch。
span:nth-child(2) {/* 设置自己在侧轴上的排列方式 */align-self: flex-end;} order 属性定义项目的排列顺序
数值越小排列越靠前默认为0。
注意和 z-index 不一样。
.item {order: number;} 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {display: flex;width: 80%;height: 300px;background-color: pink;/* 让三个子盒子沿着侧轴底侧对齐 *//* align-items: flex-end; *//* 我们想只让3号盒子下来底侧 */}div span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}div span:nth-child(2) {/* 默认是0 -1比0小所以在前面 */order: -1;}div span:nth-child(3) {align-self: flex-end;}/style
/headbodydivspan1/spanspan2/spanspan3/span/div
/body/html
效果 rem适配布局
问题引入
方案 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局那高度如何设置 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放 rem 基础
rem 单位
rem (root em)是一个相对单位类似于emem是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如根元素html设置font-size12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的优势父元素文字大小可能不一致 但是整个页面只有一个html可以很好来控制整个页面的元素大小
/* 根html 为 12px */html {font-size: 12px;}/* 此时 div 的字体大小就是 24px */div {font-size: 2rem;} 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylehtml {font-size: 12px;}div {font-size: 12px;width: 15rem;height: 15rem;background-color: purple;}p {/* 1. em相对于父元素 的字体大小来说的 *//* width: 10em;height: 10em; *//* 2. rem 相对于 html元素 字体大小来说的 */width: 10rem;height: 10rem;background-color: pink;/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */}/style
/headbodydivp/p/div/body/html
效果 媒体查询
什么是媒体查询
媒体查询Media Query是CSS3新语法。
使用 media 查询可以针对不同的媒体类型定义不同的样式
media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机平板等设备都用得到多媒体查询 语法规范
媒体查询
media mediatype and|not|only (media feature) {CSS-Code;}
用 media 开头 注意符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含 mediatype 查询类型
将不同的终端设备划分成不同的类型称为媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕平板电脑智能手机等 关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
and可以将多个媒体特性连接到一起相当于“且”的意思。
not排除某个媒体类型相当于“非”的意思可以省略。
only指定某个特定的媒体类型可以省略。 媒体特性
每种媒体类型都具体各自不同的特性根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含
值
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/* 这句话的意思就是 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 *//* max-width 小于等于800 *//* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */media screen and (max-width: 800px) {body {background-color: pink;}}media screen and (max-width: 500px) {body {background-color: purple;}}/style
/headbody/body/html
效果
大于800px 500-800px 小于500px 引入资源理解
当样式比较繁多的时候我们可以针对不同的媒体使用不同 stylesheets样式表。
原理就是直接在link中判断设备的尺寸然后引用不同的css文件。
1. 语法规范
link relstylesheet mediamediatype and|not|only (media feature) hrefmystylesheet.css
2. 示例
link relstylesheet hrefstyleA.css mediascreen and (min-width: 400px) 实战
style320.css
div {width: 100%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}
style640.css
div {float: left;width: 50%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}
html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/* 当我们屏幕大于等于 640px以上的我们让div 一行显示2个 *//* 当我们屏幕小于640 我们让div一行显示一个 *//* 一个建议 我们媒体查询最好的方法是从小到大 *//* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 *//stylelink relstylesheet hrefstyle320.css mediascreen and (min-width: 320px)link relstylesheet hrefstyle640.css mediascreen and (min-width: 640px)
/headbodydiv1/divdiv2/div
/body/html 效果
至少宽320px 至少宽640px Less 基础
维护 css 的弊端
CSS 是一门非程序式语言没有变量、函数、SCOPE作用域等概念。
CSS 需要书写大量看似没有逻辑的代码CSS 冗余度是比较高的。
不方便维护及扩展不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。 Less 介绍
Less Leaner Style Sheets 的缩写 是一门 CSS 扩展语言也成为CSS预处理器。
做为 CSS 的一种形式的扩展它并没有减少 CSS 的功能而是在现有的 CSS 语法上为CSS加入程序式语言的特性。
它在 CSS 的语法基础之上引入了变量Mixin混入运算以及函数等功能大大简化了 CSS 的编写并且
降低了 CSS 的维护成本就像它的名称所说的那样Less 可以让我们用更少的代码做更多的事情。
Less中文网址 Less.js 中文网
常见的CSS预处理器Sass、Less、Stylus
一句话**Less 是一门 CSS 预处理语言它扩展了CSS的动态特性。 Less 安装注意如果使用vscode无需安装less
① 安装nodejs可选择版本(8.0)网址下载 | Node.js 中文网
② 检查是否安装成功使用cmd命令win10 是 window r 打开 运行输入cmd --- 输入“ node –v ”查看版本即可
③ 基于nodejs在线安装Less使用cmd命令“ npm install -g less ”即可
④ 检查是否安装成功使用cmd命令“
lessc -v ”查看版本即可 Less 变量
变量命名规范
变量名:值;color: pink;
1 必须有为前缀
2 不能包含特殊字符
3 不能以数字开头
4 大小写敏感
变量是指没有固定的值可以改变的。因为我们CSS中的一些颜色和数值等经常使用。 变量使用规范
//直接使用body{color:color;}a:hover{color:color;} Less 编译
本质上Less 包含一套自定义的语法及一个解析器用户根据这些语法定义自己的样式规则这些规则
最终会通过解析器编译生成对应的 CSS 文件。
所以我们需要把我们的 less文件编译生成为css文件这样我们的html页面才能使用 vocode Less 插件
Easy LESS 插件用来把less文件编译为
css文件
安装完毕插件重新加载下 vscode。
只要保存一下Less文件会自动生成CSS文件。 演示
我们的目录结构可以看到我们里面编写了一个叫my.less的文件 我们按ctrl s保存一下就可以得到一个相同名字的css文件 然后以外部css文件的形式引进html里面
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefmy.css
/headbodydiv我的颜色也是粉色/div
/body/html
最终效果 Less 嵌套
我们经常用到选择器的嵌套
#header .logo {width: 300px;}
Less 嵌套写法
#header {.logo {width: 300px;}} 如果遇见 交集|伪类|伪元素选择器
内层选择器的前面没有 符号则它被解析为父选择器的后代
如果有 符号它就被解析为父元素自身或父元素的伪类。
a:hover{color:red;}
Less 嵌套写法
a{:hover{color:red;}} 实战
html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle/stylelink relstylesheet hrefnest.css
/headbodydiv classheadera href#文字/a/divdiv classnavdiv classlogo传智播客/div/div
/body/html nest.less
.header {width: 200px;height: 200px;background-color: pink;// 1. less嵌套 子元素的样式直接写到父元素里面就好了a {color: red;// 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加:hover {color: blue;}}
}
.nav {.logo {color: green;}::before {content: aaaaaa;}
} 生成的css
.header {width: 200px;height: 200px;background-color: pink;
}
.header a {color: red;
}
.header a:hover {color: blue;
}
.nav .logo {color: green;
}
.nav::before {content: aaaaaa;
}效果 Less 运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加、减-、乘*、除/算术运算。
/Less 里面写/witdh: 10px 5;div {border: witdh solid red;}/生成的css/div {border: 15px solid red;}/*Less 甚至还可以这样 */width: (width 5) * 2 注意
乘号*和除号/的写法
运算符中间左右有个空格隔开 1px 5
对于两个不同的单位的值之间的运算运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位则运算结果就取该单位 实战
html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcount.css
/headbodydiv/div
/body/html
less
baseFont: 50px;
html {font-size: baseFont;
}
border: 5px 5;
div {width: 200px - 50;height: (200px 50px ) * 2;border: border solid red;background-color: #666 - #222;
}
// img {
// width: 82rem / baseFont;
// height: 82rem / baseFont;
// }
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算 如果只有一个数有单位则最后的结果就以这个单位为准
// 3. 两个数参与运算如果2个数都有单位而且不一样的单位 最后的结果以第一个单位为准css
html {font-size: 50px;
}
div {width: 150px;height: 500px;border: 10px solid red;background-color: #444444;
}效果 rem 适配方案技术使用市场主流
技术方案1
less
媒体查询
rem
技术方案2推荐
flexible.js
rem
总结 两种方案现在都存在。 方案2 更简单现阶段大家无需了解里面的js代码。 rem 实际开发适配方案1
设计稿常见尺寸宽度
iphone 4.5 640px
iphone 678 750px
Android 常见320px、360px、375px、384px、400px、414px、500px、720px
大部分4.7~5寸的安卓设备为720px
一般情况下我们以一套或两套效果图适应大部分的屏幕放弃极端屏或对其优雅降级牺牲一些效果
现在基本以750为准。 动态设置 html 标签 font-size 大小
① 假设设计稿是750px
② 假设我们把整个屏幕划分为15等份划分标准不一可以是20份也可以是10等份
③ 每一份作为html字体大小这里就是50px 750 / 15
④ 那么在320px设备的时候字体大小为320/15 就是 21.33px
⑤ 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
⑥ 比如我们以 750px为标准设计稿
⑦ 一个100*100像素的页面元素 在 750px屏幕下 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
⑧ 320屏幕下 html 字体大小为 21.33 则 2rem 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
⑨ 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果 元素大小取值方法
① 最后的公式 页面元素的rem值 页面元素值px / 屏幕宽度 / 划分的份数
② 屏幕宽度/划分的份数 就是 html font-size 的大小
③ 或者 页面元素的rem值 页面元素值px / html font-size 字体大小 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylemedia screen and (min-width: 320px) {html {font-size: 21.33px;}}media screen and (min-width: 750px) {html {font-size: 50px;}}div {width: 2rem;height: 2rem;background-color: pink;}/* 1. 首先我们选一套标准尺寸 750为准 2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 *//* 3. 页面元素的rem值 页面元素在 750像素的下px值 / html 里面的文字大小 *//style
/headbodydiv1111111111111111111/div
/body/html 效果
最小750 最小320 第二种由于涉及到js会在之后的js的博客更新 响应式开发
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置从而适配不同设备的目的。
响应式开发原理
设备划分 尺寸区间
超小屏幕手机 768px
小屏设备平板 768px ~ 992px
中等屏幕桌面显示器 992px ~ 1200px
宽屏设备大桌面显示器 1200px 响应式布局容器
响应式需要一个父级做为布局容器来配合子级元素来实现变化效果。
原理就是在不同屏幕下通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小从而实现不同
屏幕下看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
超小屏幕手机小于 768px设置宽度为 100%
小屏幕平板大于等于 768px设置宽度为 750px
中等屏幕桌面显示器大于等于 992px宽度设置为 970px
大屏幕大桌面显示器大于等于 1200px宽度设置为 1170px 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle.container {height: 150px;background-color: pink;margin: 0 auto;}/* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */media screen and (max-width: 767px) {.container {width: 100%;}}/* 2. 小屏幕下 大于等于768 布局容器改为 750px */media screen and (min-width: 768px) {.container {width: 750px;}}/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */media screen and (min-width: 992px) {.container {width: 970px;}}/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */media screen and (min-width: 1200px) {.container {width: 1170px;}}/style
/headbody!-- 响应式开发里面首先需要一个布局容器 --div classcontainer/div
/body/html Bootstrap前端开发框架
Bootstrap 简介
Bootstrap 来自 Twitter推特是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的它
简洁灵活使得 Web 开发更加快捷。
中文官网Bootstrap中文网 铂特优选
官网Bootstrap · The most popular HTML, CSS, and JS library in the world.
推荐使用http://bootstrap.css88.com/
框架顾名思义就是一套架构它有一套比较完整的网页功能解决方案而且控制权在框架本身有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。 优点
标准化的htmlcss编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈不断的更新迭代
让开发更简单提高了开发的效率 版本
2.x.x停止维护,兼容性好,代码不够简洁功能不够完善。
3.x.x目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x 最新版目前还不是很流行 Bootstrap 使用
在现阶段我们还没有接触JS相关课程所以我们只考虑使用它的样式库。
创建文件夹结构
Bootstrap 使用四步曲 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容 创建html骨架结构
在现阶段我们还没有接触JS相关课程所以我们只考虑使用它的样式库。
Bootstrap 使用四步曲 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
下面是我们要添加到代码
!--要求当前网页使用IE浏览器最高版本的内核来渲染--
meta http-equivX-UA-Compatible contentIEedge!--视口的设置视口的宽度和设备一致默认的缩放比例和PC端一致用户不能自行缩放--
meta nameviewport contentwidthdevice-width, initial-scale1, user-scalable0!--[if lt IE 9]
!--解决ie9以下浏览器对html5新增标签的不识别并导致CSS不起作用的问题--
script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/script
!--解决ie9以下浏览器对 css3 Media Query 的不识别 --
script srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script
![endif]--
添加到head中 引入相关样式文件
在现阶段我们还没有接触JS相关课程所以我们只考虑使用它的样式库。
Bootstrap 使用四步曲 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
!-- Bootstrap 核心样式--
link relstylesheet hrefbootstrap/css/bootstrap.min.css Bootstrap 使用
Bootstrap 使用四步曲 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
书写内容
直接拿Bootstrap 预先定义好的样式来使用一般直接使用他们的class就可以
可以修改Bootstrap 原来的样式注意权重问题 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器它提供了两个作此用处的类。
1. container 类
响应式布局的容器 固定宽度
大屏 ( 1200px) 宽度定为 1170px
中屏 ( 992px) 宽度定为 970px
小屏 ( 768px) 宽度定为 750px
超小屏 (100%)
2. container-fluid 类
流式布局容器 百分百宽度
占据全部视口viewport的容器。 最终的基本骨架
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/title/headstyle.container{font-size: large;background-color: pink;}.container-fluid{background-color: red;}
/stylebodydiv classcontainer123/divdiv classcontainer-fluid123/div
/body/html Bootstrap 栅格系统
栅格系统简介
栅格系统英文为“grid systems”,也有人翻译为“网格系统”它是指将页面布局划分为等宽的列然后通过列数
的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统随着屏幕或视口viewport尺寸的增加系统会
自动分为最多12列 栅格选项参数
栅格系统用于通过一系列的行row与列column的组合来创建页面布局你的内容就可以放入这些创建好的布局中。 1 行(row)必须放到container布局容器里面
2 我们实现列的平均划分 需要给列添加 类前缀
3 xs-extra small超小 sm-small小 md-medium中等 lg-large大
4 列column大于 12多余的“列column”所在的元素将被作为一个整体另起一行排列
5 每一列默认有左右15像素的 padding
6 可以同时为一列指定多个设备的类名以便划分不同份数 例如 classcol-md-4 col-sm-6 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/titlestyle[class^col] {border: 1px solid #ccc;}.row:nth-child(1) {background-color: pink;}/style
/headbodydiv classcontainerdiv classrowdiv classcol-lg-3 col-md-4 col-sm-6 col-xs-121/divdiv classcol-lg-3 col-md-4 col-sm-6 col-xs-122/divdiv classcol-lg-3 col-md-4 col-sm-6 col-xs-123/divdiv classcol-lg-3 col-md-4 col-sm-6 col-xs-124/div/div!-- 如果孩子的份数相加等于12 则孩子能占满整个 的container 的宽度 --div classrowdiv classcol-lg-61/divdiv classcol-lg-22/divdiv classcol-lg-23/divdiv classcol-lg-24/div/div!-- 如果孩子的份数相加 小于 12 则会 则占不满整个container 的宽度 会有空白 --div classrowdiv classcol-lg-61/divdiv classcol-lg-22/divdiv classcol-lg-23/divdiv classcol-lg-14/div/div!-- 如果孩子的份数相加 大于 12 则会多于的那一列会 另起一行显示 --div classrowdiv classcol-lg-61/divdiv classcol-lg-22/divdiv classcol-lg-23/divdiv classcol-lg-34/div/div/div
/body/html
效果 列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系
列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。 div classcol-sm-4div classrowdiv classcol-sm-6小列/divdiv classcol-sm-6小列/div/div
/div 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/titlestyle.rowdiv {height: 50px;background-color: pink;/* margin: 0 10px; */}/style
/headbodydiv classcontainerdiv classrowdiv classcol-md-4!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值 而且高度自动和父级一样高 --div classrowdiv classcol-md-4a/divdiv classcol-md-8b/div/div/divdiv classcol-md-42/divdiv classcol-md-43/div/div/div
/body/html
效果 列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距margin。
div classrowdiv classcol-lg-41/divdiv classcol-lg-4 col-lg-offset-42/div
/div 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/titlestyle.row div {height: 50px;background-color: pink;}/style
/headbodydiv classcontainerdiv classrowdiv classcol-md-3左侧/div!-- 偏移的份数 就是 12 - 两个盒子的份数 6 --div classcol-md-3 col-md-offset-6右侧/div/divdiv classrow!-- 如果只有一个盒子 那么就偏移 (12 - 8) /2 --div classcol-md-8 col-md-offset-2中间盒子/div/div/div
/body/html
效果 列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列column的顺序。 !-- 列排序 --div classrowdiv classcol-lg-4 col-lg-push-8左侧/divdiv classcol-lg-8 col-lg-pull-4右侧/div/div 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/titlestyle.row div {height: 50px;background-color: pink;}/style
/headbodydiv classcontainerdiv classrowdiv classcol-md-4 col-md-push-8左侧/divdiv classcol-md-8 col-md-pull-4右侧/div/div/div
/body/html col-md-push-8 push-8将当前列向右移动8列。 这意味着原本应该在左侧的列col-md-4被推到右侧。 col-md-pull-4 pull-4将当前列向左移动4列。 这意味着原本应该在右侧的列col-md-8被拉到左侧。
效果 响应式工具
为了加快对移动设备友好的页面开发工作利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
看下面淘宝的网页在最大屏幕下面我们可以看到第三列广告那一列 当不是大屏下我们就看不到广告那一栏了 详细介绍 实战
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedge!--[if lt IE 9]script srchttps://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js/scriptscript srchttps://oss.maxcdn.com/respond/1.4.2/respond.min.js/script![endif]--!-- 一定不要忘记引入bootstrap 的样式文件 --link relstylesheet hrefbootstrap/css/bootstrap.min.csstitleDocument/titlestyle.row div {height: 300px;background-color: purple;}.row div:nth-child(3) {background-color: pink;}span {font-size: 50px;color: #fff;}/style
/headbodydiv classcontainerdiv classrowdiv classcol-xs-3span classvisible-lg我会显示哦/span/divdiv classcol-xs-32/divdiv classcol-xs-3 hidden-md hidden-xs我会变魔术哦/divdiv classcol-xs-34/div/div/div
/body/html 效果 文章转载自： http://www.morning.fkmqg.cn.gov.cn.fkmqg.cn http://www.morning.plqsz.cn.gov.cn.plqsz.cn http://www.morning.fyskq.cn.gov.cn.fyskq.cn http://www.morning.pxrfm.cn.gov.cn.pxrfm.cn http://www.morning.fwjfh.cn.gov.cn.fwjfh.cn http://www.morning.dycbp.cn.gov.cn.dycbp.cn http://www.morning.rnqbn.cn.gov.cn.rnqbn.cn http://www.morning.ylph.cn.gov.cn.ylph.cn http://www.morning.pymff.cn.gov.cn.pymff.cn http://www.morning.mqxrx.cn.gov.cn.mqxrx.cn http://www.morning.ngqty.cn.gov.cn.ngqty.cn http://www.morning.ztcxx.com.gov.cn.ztcxx.com http://www.morning.sphft.cn.gov.cn.sphft.cn http://www.morning.pgcmz.cn.gov.cn.pgcmz.cn http://www.morning.rkzb.cn.gov.cn.rkzb.cn http://www.morning.pffx.cn.gov.cn.pffx.cn http://www.morning.srky.cn.gov.cn.srky.cn http://www.morning.wyrkp.cn.gov.cn.wyrkp.cn http://www.morning.qjtbt.cn.gov.cn.qjtbt.cn http://www.morning.srkqs.cn.gov.cn.srkqs.cn http://www.morning.nlbw.cn.gov.cn.nlbw.cn http://www.morning.lgsfb.cn.gov.cn.lgsfb.cn http://www.morning.wkmrl.cn.gov.cn.wkmrl.cn http://www.morning.rknjx.cn.gov.cn.rknjx.cn http://www.morning.5-73.com.gov.cn.5-73.com http://www.morning.dtnzk.cn.gov.cn.dtnzk.cn http://www.morning.sltfk.cn.gov.cn.sltfk.cn http://www.morning.jmtrq.cn.gov.cn.jmtrq.cn http://www.morning.lwtfr.cn.gov.cn.lwtfr.cn http://www.morning.hsdhr.cn.gov.cn.hsdhr.cn http://www.morning.lmjtp.cn.gov.cn.lmjtp.cn http://www.morning.jnkng.cn.gov.cn.jnkng.cn http://www.morning.cwyrp.cn.gov.cn.cwyrp.cn http://www.morning.ltqzq.cn.gov.cn.ltqzq.cn http://www.morning.lmhh.cn.gov.cn.lmhh.cn http://www.morning.rfmzs.cn.gov.cn.rfmzs.cn http://www.morning.trjdr.cn.gov.cn.trjdr.cn http://www.morning.rqqct.cn.gov.cn.rqqct.cn http://www.morning.cnvlog.cn.gov.cn.cnvlog.cn http://www.morning.trqhd.cn.gov.cn.trqhd.cn http://www.morning.mwhqd.cn.gov.cn.mwhqd.cn http://www.morning.nkjjp.cn.gov.cn.nkjjp.cn http://www.morning.mrkbz.cn.gov.cn.mrkbz.cn http://www.morning.wmdlp.cn.gov.cn.wmdlp.cn http://www.morning.pctql.cn.gov.cn.pctql.cn http://www.morning.fbbpj.cn.gov.cn.fbbpj.cn http://www.morning.pdwzr.cn.gov.cn.pdwzr.cn http://www.morning.rdpps.cn.gov.cn.rdpps.cn http://www.morning.srhqm.cn.gov.cn.srhqm.cn http://www.morning.kwqwp.cn.gov.cn.kwqwp.cn http://www.morning.mhmsn.cn.gov.cn.mhmsn.cn http://www.morning.rcmwl.cn.gov.cn.rcmwl.cn http://www.morning.plqhb.cn.gov.cn.plqhb.cn http://www.morning.ypnxq.cn.gov.cn.ypnxq.cn http://www.morning.wfjrl.cn.gov.cn.wfjrl.cn http://www.morning.lwzgn.cn.gov.cn.lwzgn.cn http://www.morning.xkyfq.cn.gov.cn.xkyfq.cn http://www.morning.lcmhq.cn.gov.cn.lcmhq.cn http://www.morning.cklld.cn.gov.cn.cklld.cn http://www.morning.feites.com.gov.cn.feites.com http://www.morning.jjmrx.cn.gov.cn.jjmrx.cn http://www.morning.znqmh.cn.gov.cn.znqmh.cn http://www.morning.qrlsy.cn.gov.cn.qrlsy.cn http://www.morning.jopebe.cn.gov.cn.jopebe.cn http://www.morning.mysmz.cn.gov.cn.mysmz.cn http://www.morning.jmdpp.cn.gov.cn.jmdpp.cn http://www.morning.ngkgy.cn.gov.cn.ngkgy.cn http://www.morning.lpmjr.cn.gov.cn.lpmjr.cn http://www.morning.qkwxp.cn.gov.cn.qkwxp.cn http://www.morning.rkrl.cn.gov.cn.rkrl.cn http://www.morning.gmysq.cn.gov.cn.gmysq.cn http://www.morning.ryjqh.cn.gov.cn.ryjqh.cn http://www.morning.nggry.cn.gov.cn.nggry.cn http://www.morning.jzlkq.cn.gov.cn.jzlkq.cn http://www.morning.ljngm.cn.gov.cn.ljngm.cn http://www.morning.jnrry.cn.gov.cn.jnrry.cn http://www.morning.mwlxk.cn.gov.cn.mwlxk.cn http://www.morning.gqcd.cn.gov.cn.gqcd.cn http://www.morning.hxmqb.cn.gov.cn.hxmqb.cn http://www.morning.nggry.cn.gov.cn.nggry.cn
