1、响应式网页：
 ①Responsive Web Page：一个可以根据浏览设备的不同，而自动更改布局、图片、文字效果的网页；
 ②构成：不能固定宽度，必须流式布局；文字和图片大小随容器大小而改变；CSS3 Media Query；
2、响应式网页编写：
 ①必须声明viewport元标签：
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  * 避免用户左右滑动屏幕，禁止浏览器初始时缩放显示；
 ②容器的宽度尽量不使用固定值（px），使用相对宽度（%或auto）；
 ③文字尽量不使用绝对尺寸（px），使用相对尺寸（em或rem）；
 ④图片要指定大小，如：
  img{
   max-width:100%;/*随容器缩小，但最大不会超过图片原始大小——防止失真*/
  }
 ⑤页面布局时不能固定，采用流式布局，如浮动，inline-block；
 ⑥灵活使用CSS3 Media Query技术——响应式网页必备元素！
3、CSS3 Media Query技术：
 ①Media：指浏览网页的设备，如screen、tv、projection、tty（字符终端）、print、braille、speech等；
 ②Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation、width、height等；
 ③CSS媒体查询技术：可以根据浏览设备的类型及特性，执行不同的CSS代码；
 ④CSS3 Media Query两种用法：
  a、根据媒体查询结果，执行不同的外部CSS文件：
   <link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
   不足：当前设备不执行的CSS文件也会被浏览器加载，每个CSS文件可能存在很多重复代码；
  b、在一个CSS片段中，有选择的执行某些选择器：
   @media screen and (min-width:768px) and (max-width:991px){
    选择器{属性名：值}
   }
4、BootStrap模板：
 ①<html lang="zh-cn">
  HTML标签的lang属性（language），用于指定当前网页的自然语言（可取值zh-cn、en、en-us、ja等）；
  作用：为浏览器翻译功能指明原始语言；为屏幕阅读软件指明应该使用的发音；
 ②<meta http-equiv="X-UA-Compatible" content="IE=dege">
  HTTP响应消息头部：X-UA-Compatible；
  Cross-UserAgent-Compatible：IE浏览器专用头部，告诉新版本的IE兼容哪个版本的内核，edge表示启用能够使用的最新的版本内核；
5、BootStrap全局CSS样式：
 ①按钮相关Class：
  .btn——按钮基础样式；
  .btn-default——白底黑字按钮；
  .btn-danger——红色按钮；
  .btn-warning——黄色按钮；
  .btn-success——绿色按钮；
  .btn-info——浅蓝色按钮；
  .btn-primary——深蓝色按钮；
  .btn-lg——大号按钮；
  .btn-sm——中号按钮；
  .btn-xs——小号按钮；
  .btn-block——块级按钮；
 ②图片相关Class：
  .img-circle——圆形图片；
  .img-rounded——圆角图片；
  .img-thumbnail——缩略图片；
  .img-responsive——响应式图片；
 ③文本相关Class：
  .text-danger/warning/success/info/primary——五种文本颜色；
  .bg-danger/warning/success/info/primary——五种文本背景颜色；
  .text-uppercase——文本转换为大写形式；
  .text-lowercase——文本转换为小写形式；
  .text-capitalize——文本转换为首字母大写形式；.text-left——文本左对齐；
  .text-center——文本居中对齐；
  .text-right——文本右对齐；
  .text-justify——文本两端调整对齐；

BootStrap_01之全局样式的更多相关文章

  1. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  2. bootstrap复习：全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  3. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  4. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  5. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  6. taro 组件的外部样式和全局样式

    自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...

  7. 关于微信小程序中组件和页面对全局样式的继承性

    1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式

  8. bootstrap基础学习小记（一）简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  9. 02 uni-app框架学习：设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

随机推荐

  1. 复杂的 Hash 函数组合有意义吗？

    很久以前看到一篇文章,讲某个大网站储存用户口令时,会经过十分复杂的处理.怎么个复杂记不得了,大概就是先 Hash,结果加上一些特殊字符再 Hash,结果再加上些字符.再倒序.再怎么怎么的.再 Hash ...

  2. .NetCore中的日志（1）日志组件解析

    .NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...

  3. .NET 基础 一步步 一幕幕[面向对象之构造函数、析构函数]

    构造函数.析构函数 构造函数: 语法: //无参的构造函数 [访问修饰符] 函数名() :函数名必须与类名相同. //有参的构造函数 [访问修饰符] 函数名(参数列表):函数名必须与类名相同. 作用: ...

  4. Emoji选项列表

    一.需要的前提文件 从网上下载Emoji的表情包,当然是png的图片,因为WPF不支持彩色的Emoji,所以,做列表的时候,需要用图片. 随着压缩包一起的还有一个Emoji.xml文件,文件的层级结构 ...

  5. Android业务组件化之现状分析与探讨

    前言: 从个人经历来说的话,从事APP开发这么多年来,所接触的APP的体积变得越来越大,业务的也变得越来越复杂,总来来说只有一句话:这是一个APP臃肿的时代!所以为了告别APP臃肿的时代,让我们进入一 ...

  6. Linux学习之文件操作

    Linux,一起学习进步-    mkdir The mkdir command is used to create directories.It works like this: mkdir命令是用 ...

  7. bzoj3207--Hash+主席树

    题目大意: 给定一个n个数的序列和m个询问(n,m<=100000)和k,每个询问包含k+2个数字:l,r,b[1],b[2]...b[k],要求输出b[1]~b[k]在[l,r]中是否出现. ...

  8. 简历生成平台项目开发-STEP1问卷设计

    周五课程结束完后,小组建立QQ群和微信群,着手讨论项目问题.一开始的大概想法:就业信息平台,收集企业招聘信息和就业生资料,提供给学生和企业的校企对接平台.后来发现群里谭卓同学也有个相关的思路,经过商量 ...

  9. 分享一个php的启动关闭脚本（原）

    自己简单写的一个php服务的启动脚本和大家分享 思路(实现的原理): 1:function模块+case语句多分支判断 2:通过添加# chkconfig: 2345 43 89注释实现开机自启动(前 ...

  10. 机器学习之sklearn——EM

    GMM计算更新∑k时,转置符号T应该放在倒数第二项(这样计算出来结果才是一个协方差矩阵) from sklearn.mixture import GMM    GMM中score_samples函数第 ...