瀑布流/媒体查询/栅格化布局/导航条

瀑布流

在这里插入图片描述

css写瀑布流掘金链接

视口

<!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-*

栅格系统: 提供了两个容器:

  1. 固定宽度的容器: 预定义类名 .container (.container 类用于固定宽度并支持响应式布局的容器)
    2. 流式布局(宽度是全屏展示): 预定义类名 .container-fluid (.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。)

在这里插入图片描述在这里插入图片描述

    响应式的布局: 栅格系统  统一类名前缀是 
    col-**-* : 
        **: 代表屏幕的范围: 取值:  lg  md  sm  xs
        *:  每一份的占比(相当于12而言) 取值:数字 1 - 12

例如:
col-md-6: 中等屏幕上占六份
col-sm-8: 小屏幕上占8份

进行栅格布局步骤:

  1. 提供一个布局容器:
  2. 提供一个行的容器:
  3. 开始栅格系统:
<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>

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值