CSS 内容总结
1.响应式开发
响应式开发原理:就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
响应式布局容器:就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面的子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化
设备划分 | 尺寸之间 | 宽度 (适用下面介绍的container类) |
---|---|---|
超小屏幕(手机) | 小于768px | 设置宽度100% |
小屏设备(平板) | 768px~992px | 设置宽度750px |
中等屏幕(桌面显示器) | 992px~1200px | 设置宽度970px |
宽屏设备(大桌面显示器) | 大于等于1200px | 设置宽度1170px |
案例
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
@media screen and (max-width:768px) {
.container {
width: 100%;
}
}
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
@media screen and (min-width:992px) {
.container {
width: 970px;
}
}
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
响应式导航:
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
list-style: none;
background-color: pink;
}
@media screen and (max-width:767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</body>
2.Bootstrap前端开发框架
-
中文官网:http://www.bootcss.com
-
官网:http://getbootstrap.com
-
推荐使用:http://bootstrap.css88.com
-
使用:
-
创建文件夹结构
-
创建html骨架结构
-
引入相关样式或文件
-
书写内容
根据自己的需求更改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <title>Document</title> <style> /*可以修改样式*/ .login { color: cadetblue; } </style> </head> <body> <!-- bootstrap 根据类名添加样式 --> <button type="button" class="btn btn-danger login">(失败)</button> <button type="button" class="btn btn-success">(成功)Success</button> </body> </html>
-
-
布局容器
- container类
- 响应式布局的容器 固定宽度
- 上面有表格介绍
- container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口(viewport)的容器
- 适用于单独做移动端开发
<body> <div class="container">123</div> <div class="container-fluid">456</div> </body>
- container类
3.Bootstrap栅格系统
将页面布局划分为等宽列,然后通过列数的定义来模块化页面布局
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列
Bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份
-
栅格选项参数
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
超小屏幕(手机)<768px 小屏设备(平板)>=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container 最大宽度 自动(100%) 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列(column)数 12 12 12 12 <body> <div class="container"> <div class="row"> <!--col-lg-3 大屏模式下一人站三份 col-md-6 中屏模式下一人站六份--> <div class="col-lg-3 col-md-6">1</div> <div class="col-lg-3 col-md-6">2</div> <div class="col-lg-3 col-md-6">3</div> <div class="col-lg-3 col-md-6">4</div> </div> </div> </body>
- 行(row)必须放到container布局容器里面
- 我们实现列的平均划分 需要给列添加类前缀
- 列(column)大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
- 每一列默认有左右15像素的padding
- 可以同时为一列指定多个设备的类名,以便划分不同的分数 例如class=“col-md-4 col-sm-6”
<style> [class^='col'] { border: 1px solid #000; } </style> </head> <body> <div class="container"> <div class="row"><!--第一行--> <!--col-lg-3 大屏模式下一人占三份 col-md-6 中屏模式下一人占六份--> <div class="col-lg-3 col-md-6">1</div> <div class="col-lg-3 col-md-6">2</div> <div class="col-lg-3 col-md-6">3</div> <div class="col-lg-3 col-md-6">4</div> </div> <div class="row"><!--第二行--> <!--col-lg-3 大屏模式下第一个占六份 其余各占2份--> <div class="col-lg-6">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-2">4</div> </div> <div class="row"><!--第三行--> <!--大屏模式下第一个占六份 最后一个占一份 其余各占2份 由于没有占满12份 所以留有空白--> <div class="col-lg-6">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-1">4</div> </div> <div class="row"> <!--大屏模式下第一个占六份 一人占2份 一人占两份 一人占4份 由于超出12份 所以最后一份另起一行 --> <div class="col-lg-6">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-4">4</div> </div> </div> </body>
-
列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成12列。我们可以通过添加一个新的.row元素和一系列.col-sm- *元素到已经存在的 .col-sm- *元素内
<style> [class^='col'] { background-color: pink; height: 250px; } .a { background-color: rgb(216, 198, 250); height: 200px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="row"><!--作用去掉父元素默认的paddin:15px的值--> <div class="col-lg-3 a">a</div> <div class="col-lg-3 a">b</div> </div> </div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3">4</div> </div> </div> </body>
-
列偏移
使用**.col-md-offset-***类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)
<style> .row>div { background-color: pink; height: 250px; } .b>div { background-color: chartreuse; } </style> </head> <body> <div class="container"> <div class="row a"> <div class="col-lg-4"> <div class="row b"> <div class="col-lg-4">1</div> <div class="col-lg-4 col-md-offset-4">2</div> </div> </div> <div class="col-lg-4 col-md-offset-4">2</div> </div> </div> </body>
-
列排序
使用.col-md-push- *和.col-md-pull- * 类就可以很容易的改变列(column)的顺序
<body> <div class="container"> <div class="row a"> <div class="col-lg-4"> <div class="row b"> <div class="col-md-4 col-md-push-8">1</div> <div class="col-md-8 col-md-pull-4">2</div> </div> </div> <div class="col-lg-4 col-md-offset-4">2</div> </div> </div> </body>
-
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 超小屏 小屏 中屏 大屏 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 与之相反的,是visible-xs visible-sm visible-md visible-lg 是显示某个页面内容