你的位置:首页 > 网页设计

[网页设计]BootStrap_01之全局样式


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——文本两端调整对齐;