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

江河i

已于 2022-05-16 17:17:58 修改

阅读量807

点赞数

分类专栏： H5基础文章标签：媒体 css css3

于 2020-12-24 13:02:07 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/111603875

版权

H5基础专栏收录该内容

18 篇文章 3 订阅

订阅专栏

这里写目录标题

瀑布流

在这里插入图片描述

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

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

固定宽度的容器：预定义类名 .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>

在这里插入图片描述

江河i

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流/媒体查询/栅格化布局/导航条

设备：屏幕：PC ~screen 手机端打印机~print屏幕阅读器尺寸：常见尺寸 320-420之间响应式网页：同一个网页，在不同的条件下，使用不同的样式。rem/百分比网页：等比例缩放方式。【注】使用min-width时，通常将小的条件放在前面。使用max-width时，通常将大的条件放在前面实现方式：内嵌式格式：@media 设备名逻辑关键词（and ，（逗号） not）（条件）{样式；} 屏幕设备宽度大于等于1200px时生效
复制链接

扫一扫

专栏目录