这里写目录标题
瀑布流
视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 让不同的设备自适应理想视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 自定义视口的宽度 -->
<!-- <meta name="viewport" content="width=300px"> -->
<title>视口</title>
<style>
h1{
width: 150px;
background-color: cadetblue;
float: left;
height: 100px;
line-height: 100px;
}
</style>
设备:
屏幕:PC ~screen 手机端
打印机~print
屏幕阅读器
尺寸:
常见尺寸 320-420之间
响应式网页:同一个网页,在不同的条件下,使用不同的样式。
rem/百分比 网页:等比例缩放方式。
【注】
使用min-width时,通常将小的条件放在前面。
使用max-width时,通常将大的条件放在前面
实现方式:
内嵌式
格式:@media 设备名 逻辑关键词(and ,(逗号) not)(条件){
样式;
}
屏幕设备宽度大于等于1200px时生效 */
@media screen and (min-width: 1200px){
body{
background-color: brown;
}
}
外链式:
通过link标签引入样式,再通过media属性设置样式引用的条件。
<link rel="stylesheet" href="css/m1.css" media="screen and (max-width:1200px)">
逻辑关键字
and 满足多个条件
, 多个条件中满足一个条件
not 逻辑非 只要不满足条件就会生效。
设备方向:
opientation 属性可以定义设备的方向
portrait 竖屏设备 高度大于宽度
landscape 横屏设备 宽度大于高度
常见的查询特性:
orientation landscape portrait
width 设备的宽度
height 设备的高度
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
最大宽度是1300px,那么小于等于1300px的时候满足这个条件
@media screen and (max-width: 1300px){
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>
1223
</h1>
</body>
</html>
栅格化系统(插件bootstrap)
首先需要下载bootstrap的css源码
bootstrap 的栅格系统 : 把一行(每个容器)均分为12列; 每一列都是使用百分比
栅格参数:(屏幕划分的临界点的值)
大屏 : >= 1200px 容器的固定宽度 1170px 预定义一个类名: col-lg-*
中等屏幕 : >= 992px 容器的固定宽度 970px 预定义一个类名: col-md-*
小屏幕 : >= 768px 容器的固定宽度 750px 预定义一个类名: col-sm-*
超小屏 : < 768px 容器的固定宽度 是100% 预定义一个类名: col-xs-*
栅格系统: 提供了两个容器:
- 固定宽度的容器: 预定义类名 .container (.container 类用于固定宽度并支持响应式布局的容器)
2. 流式布局(宽度是全屏展示): 预定义类名 .container-fluid (.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。)
响应式的布局: 栅格系统 统一类名前缀是
col-**-* :
**: 代表屏幕的范围: 取值: lg md sm xs
*: 每一份的占比(相当于12而言) 取值:数字 1 - 12
例如:
col-md-6: 中等屏幕上占六份
col-sm-8: 小屏幕上占8份
进行栅格布局步骤:
- 提供一个布局容器:
- 提供一个行的容器:
- 开始栅格系统:
<div class="container">
<!-- 行可以有多个 -->
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">第一个</div>
<div class="col-md-3 col-sm-6 col-xs-12">第二个</div>
<div class="col-md-3 col-sm-6 col-xs-12">第三个</div>
<div class="col-md-3 col-sm-6 col-xs-12">第四个</div>
</div>
<!-- 一行就是12份,看你怎么分 -->
<!-- md屏宽大于992时 每个占3份 4个显示一行
sm屏宽大于768时 每个占6份 显示2行
xs屏宽小于768时 每个占12份 显示4行
-->
</div>
注意:在容器中书写你的所有内容,容器外不用在套一个div了
(如果你套了div,那么不要给这个div定宽,否则效果就不对了)
栅格化布局中行的宽也不要定,靠内边距顶开
列偏移
本质就是添加margin值
预定义类名: col-**-offset-*
<div class="container">
<!-- 行可以有多个 -->
<div class="row">
<div class="col-md-1 bg-success">1</div>
<div class="col-md-4 bg-info">2</div>
<div class="col-md-4 bg-danger">3</div>
</div>
<!-- 列偏移案例 -->
<div class="row">
<div class="col-md-4 col-md-offset-1 bg-success">列偏移1份</div>
<!-- 因为偏移了1份,所以为13份,就会换行 -->
<div class="col-md-4 bg-danger">2</div>
<div class="col-md-4 bg-info">3</div>
</div>
</div>
列排序
本质就是添加定位属性
往前排: col--pull-*
往后排: col--push-*
<div class="container">
<!-- 行可以有多个 -->
<div class="row">
<div class="col-md-3 bg-success">1</div>
<div class="col-md-3 bg-info">2</div>
<div class="col-md-3 bg-danger">3</div>
<div class="col-md-3 bg-success">4</div>
</div>
<!-- 列排序案例1 -->
<div class="row">
<div class="col-md-3 ">1吖</div>
<div class="col-md-3 bg-danger">2这是列排序的体现,看到重合了</div>
<div class="col-md-3 col-md-pull-6">3</div>往前排了2份
<div class="col-md-3 ">4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-push-6">1吖</div>往后排
<div class="col-md-3 bg-success">2</div>
<div class="col-md-3 col-md-pull-6">3</div>往前排
<div class="col-md-3 ">4</div> 达到换位置的目的
</div>
</div>
导航条
找到 bootstrap网站 ->组件->导航条 里面讲解用法
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<!-- 这是折叠后的那三条小横线 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- a 标签可以更改 : a标签就是用来存放网站的logo -->
<a class="navbar-brand" href="#">这是logo</a>
</div>
<!-- 这里是写导航的地方 li标签就是导航显示文字 -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">订单</a></li>
<li><a href="#">我的</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- 这里可以写栅格系统 -->
</body>