5-响应式

news2024/10/2 3:30:47

01-媒体查询

基本写法

在这里插入图片描述

  • max-width：最大宽度（小于等于）
  • min-width：最小宽度（大于等于）

书写顺序

  • min-width（从小到大）
  • max-width（从大到小）

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

在这里插入图片描述

  • HTML 结构
<div class="box">
  <div class="left">left</div>
  <div class="main">
    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  </div>
</div>
  • CSS 样式
.box {
  display: flex;
}

.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}

.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

在这里插入图片描述

关键词 / 逻辑操作符

  • and
  • only
  • not

媒体类型

媒体类型用来区分设备类型

  • screen：屏幕设备
  • 打印预览：print
  • 阅读器：speech
  • 不区分类型：all

媒体特性

  • 视口宽高：width / height
  • 视口最大宽高：max-width ；max-height
  • 视口最小宽高：min-width；min-height
  • 屏幕方向：orientation
    • protrait：竖屏
    • landscape：横屏

媒体查询-外部CSS

在这里插入图片描述

02-Bootstrap

简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

使用步骤

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

在这里插入图片描述

使用

  1. 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名： container 响应式布局版心类
<div class="container">测试</div>

栅格系统

作用：响应式布局

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

在这里插入图片描述

  • row 类：行，可以让内容在一行排（flex布局）

全局样式

按钮

在这里插入图片描述

类名

  • btn：默认样式
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm

表格

在这里插入图片描述

表格类：

  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

  1. 复制 fonts 文件夹到项目目录
  2. 网页引入 bootstrap-icons.css 文件
  3. 调用 CSS 类名（图标对应的类名）
<i class="bi-android2"></i>

03-综合案例-alloyTeam

准备工作

在这里插入图片描述

  • HTML 结构
<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">



<script src="./Bootstrap/js/bootstrap.min.js"></script>
  • less 样式
// out: ../css/

头部导航

  • HTML 结构
<!-- 导航 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Github</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TWeb Conf</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SuperStar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Web前端导航</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
  • less 样式
// 导航
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

轮播图图片

  • HTML 结构
<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
  • less 样式
.carousel {
  .carousel-item {
    height: 500px;
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    background-image: url(../assets/uploads/banner_1.jpg);
  }
  .carousel-item:nth-child(2) {
    background-image: url(../assets/uploads/banner_2.jpg);
  }
  .carousel-item:nth-child(3) {
    background-image: url(../assets/uploads/banner_3.jpg);
  }
  .carousel-item:nth-child(4) {
    background-image: url(../assets/uploads/banner_4.jpg);
  }
}

轮播图响应式

  • less 样式
// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {
  // 响应式 → 媒体查询
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
    }
  }

  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
    }
  }


  .carousel-item {
    // height: 500px;
    background-size: cover;
    background-position: center 0;
  }
}

开源项目响应式

  • HTML 结构
<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <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>
</div>
  • less 样式
// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.project {
  margin-top: 60px;
  text-align: center;
}

开源项目内容布局

  • HTML 结构
<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
    </div>
  </div>
</div>
  • less 样式
.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      a {
        // 块级的宽度和父级一样大
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }

      &:nth-child(1) a {
        background-color: #70c3ff;
      }
      &:nth-child(2) a {
        background-color: #fd6a7f;
      }
      &:nth-child(3) a {
        background-color: #7f8ea0;
      }
      &:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/686677.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

measure 一维测量 Metrology 二维测量

measure 一维测量 Metrology 二维测量

1维测量就是测长度&#xff0c;一个物体的长度。 2维测量就是在2维空间上测量&#xff0c;圆和矩形。 gen_measure_rectangle2 (TmpCtrl_Row, TmpCtrl_Column, TmpCtrl_Phi, TmpCtrl_Len1, TmpCtrl_Len2, 2464, 2056, nearest_neighbor, MsrHandle_Measure_01_0) * Measure 01:…
阅读更多...
ChatGPT 实战：快速了解一个新领域

ChatGPT 实战：快速了解一个新领域

前段时间在社区里看到有人在分享&#xff1a;如何用 ChatGPT 麦肯锡方法论洞察一个行业&#xff0c;感觉这个方法在陌生行业的研究上很有帮助&#xff0c;同时我也一直好奇&#xff0c;投资经理在一两周的时间里如何快速了解一个新领域并做出投资决策的。先解决你的第一个疑问…
阅读更多...
网络安全学习心得

网络安全学习心得

我的学习心得&#xff0c;我认为能不能自学成功的要素有两点。 第一点就是自身的问题&#xff0c;虽然想要转行学习安全的人很多&#xff0c;但是非常强烈的想要转行学好的人是小部分。而大部分人只是抱着试试的心态来学习安全&#xff0c;这是完全不可能的。 所以能不能学成并…
阅读更多...
Redis6之持久化操作

Redis6之持久化操作

目录 RDB 触发 工作流程 持久化备份 优点 缺点 AOF 触发 频率配置 持久化流程 数据修复 优点 缺点 混合持久化 触发 优点 缺点 如何选择 redis是一个内存数据库&#xff0c;一旦断电或服务器进程退出&#xff0c;内存数据库中的数据将全部丢失&#xff0c;所以…
阅读更多...
【计算机视觉】中科院发布Fast SAM，精度相当SAM，速度提升了50倍！

【计算机视觉】中科院发布Fast SAM，精度相当SAM，速度提升了50倍！

文章目录 一、导读二、介绍三、方法3.1 实例分割3.2 提示引导选择3.2.1 点提示3.2.2 框提示3.2.3 文本提示 四、实验结果五、不足之处六、结论 一、导读 SAM已经成为许多高级任务&#xff08;如图像分割、图像描述和图像编辑&#xff09;的基础步骤。然而&#xff0c;其巨大的…
阅读更多...
【云原生丶Docker】Docker容器常用命令大全

【云原生丶Docker】Docker容器常用命令大全

在 Docker 核心概念理解 一文中&#xff0c;我们知道 Docker容器 其实就是一个轻量级的沙盒&#xff0c;应用运行在不同的容器中从而实现隔离效果。容器的创建和运行是以镜像为基础的&#xff0c;容器可以被创建、销毁、启动和停止等。本文将介绍下容器的这些常用操作命令。 1、…
阅读更多...
2、电商数仓（业务数据采集平台）电商业务流程、电商常识、电商系统表结构、业务数据模拟、业务数据采集模块

2、电商数仓（业务数据采集平台）电商业务流程、电商常识、电商系统表结构、业务数据模拟、业务数据采集模块

1、电商业务简介 1.1 电商业务流程 电商的业务流程可以以一个普通用户的浏览足迹为例进行说明&#xff0c;用户点开电商首页开始浏览&#xff0c;可能会通过分类查询也可能通过全文搜索寻找自己中意的商品&#xff0c;这些商品无疑都是存储在后台的管理系统中的。 当用户寻找…
阅读更多...
imx6ull——多点电容触摸

imx6ull——多点电容触摸

电容触摸寄存器 触点最多5个 触摸屏实现由 IIC驱动、中断驱动、 input子系统组成 触摸屏类型Type A和 Type B Type A&#xff1a;适用于触摸点不能被区分或者追踪&#xff0c;此类型的设备上报原始数据 (此类型在实际使 用中非常少&#xff01; Type B&#xff1a;适用于有…
阅读更多...
SikuliX 实战

SikuliX 实战

一. SikuliX是什么 SikuliX的前身是 Sikuli。Sikuli是由MIT&#xff08;麻省理工学院&#xff09;研究团队发布的一种基于OpenCV图像识别技术的自动化工具软件。 Sikuli 是2009 年由在麻省理工学院用户界面设计小组作为一个开源研究项目&#xff0c;负责人分别是Tsung-Hsiang …
阅读更多...
42 # 前端 blob 类型

42 # 前端 blob 类型

前端的二进制 文件类型 Blob&#xff1a;二进制文件类型input 的 typefile&#xff1a;file 类型&#xff0c;继承于 Blob 前端实现下载功能 实现下载字符串到文件里&#xff0c;需要将字符串包装成二进制类型 <!DOCTYPE html> <html lang"en"><h…
阅读更多...
文字对话如何配音？安利你三款制作对话配音的软件

文字对话如何配音？安利你三款制作对话配音的软件

对话配音怎么配&#xff1f;安利三个好用的对话配音软件给你 一分钟告诉你对话配音怎么配 对话配音怎么配&#xff1f;超简单的对话配音制作教程来啦 对话配音软件有哪些&#xff1f;给你安利这三款对话配音软件 对话配音如何操作&#xff1f;分享你三个对话配音小技巧 在电…
阅读更多...
想学PMP，有考过的同学给个建议嘛？

想学PMP，有考过的同学给个建议嘛？

PMP中国和国外的考试形式略有不同&#xff0c;这里只介绍一下PMP中国考试的相关信息。 1.PMP考试相关信息 考试形式&#xff1a;笔试 考试时间&#xff1a;230分钟&#xff08;3小时50分钟&#xff09;&#xff0c;一般考试时间在上午9:00~12:50&#xff0c;也会因为特殊情况…
阅读更多...
C++primer(第五版)第二章(变量和基本类型)

C++primer(第五版)第二章(变量和基本类型)

2.1基本内置类型 2.1.1算术类型 C的基本内置类型包括算数类型和空类型,空类型就是void,算术类型我从原书中截下来放在下面: 从上表我们可以得知C规定int至少和short一样大,long至少和int一样大,longlong至少和long一样大. 其中char(字符)类型支持国际化,所以char会确保可以放…
阅读更多...
学Java还是学Android？如何选择？

学Java还是学Android？如何选择？

学Java和学Android都有其各自的好处和应用场景。下面是一些关于学习Java和学习Android的信息&#xff0c;以帮助你做出选择&#xff1a;刚好我这里有嵌入式、plc、单片机的资料需要的在评论区扣6或私我 学习Java&#xff1a; Java是一种通用的编程语言&#xff0c;广泛应用于服…
阅读更多...
Simulink自动把所有的double数据转换成single数据

Simulink自动把所有的double数据转换成single数据

目录 前言 子系统double自动转single操作步骤 总结 前言 在基于模型的开发建模中&#xff0c;模块大多默认的数据类型是double&#xff0c;很多MCU支持的是单精度的浮点&#xff0c;生成代码的部分需要把double转成single数据类型&#xff0c;当然在建模的时候可以配置每一…
阅读更多...
GCP学习笔记（三）——存储和安全

GCP学习笔记（三）——存储和安全

文章目录 一、Cloud Storage二、Cloud Bigtable三、Cloud SQL四、Cloud Spanner五、Firestore六、Cloud Datastore七、安全1. Data Loss Prevention2. Stackdriver3. IAM 八、网络概述 在GCP中&#xff0c;我们需要序列化数据使数据能够进行存储和转换。Avro时一种数据序列化方…
阅读更多...
清华唐杰新作WebGLM，参数100亿可联网

清华唐杰新作WebGLM，参数100亿可联网

WebGLM是一个基于大语言模型&#xff08;LLM&#xff09;的联网问答聊天机器人&#xff0c;它的作者是清华大学计算机系唐杰教授团队&#xff0c;它的论文入选了KDD2023会议。 WebGLM的特点是它可以利用Web搜索和检索功能来增强LLM的能力和泛化性&#xff0c;从而实现一个高效、…
阅读更多...
智驾产品价值逻辑变了，新一代智驾芯片的核心要求

智驾产品价值逻辑变了，新一代智驾芯片的核心要求

“根据创新扩散理论&#xff0c;智能汽车的早期用户主要是‘发烧友’&#xff0c;但是真正起量需要依靠‘大众群体’。要想抓住智能驾驶普及的黄金增长机遇&#xff0c;必须捕捉到两个群体的差异化需求&#xff0c;理解行业规则的变化。在当下&#xff0c;智驾产品必须重视功能…
阅读更多...
MySQL架构介绍

MySQL架构介绍

MySQL架构介绍 和其它数据库相比&#xff0c;MySQL有点与众不同&#xff0c;它的架构可以在多种不同场景中应用并发挥良好作用。主要体现在存储引擎的架构上&#xff0c;插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分离。这种架构可以根据业务的需求和…
阅读更多...
【软考网络管理员】2023年软考网管初级常见知识考点（15）-网络管理与存储

【软考网络管理员】2023年软考网管初级常见知识考点（15）-网络管理与存储

涉及知识点 网络管理功能&#xff0c;网络管理模型&#xff0c;SNMP协议原理与版本&#xff0c;数据备份&#xff0c;DAS/NAS/SAN技术 软考网络管理员常考知识点&#xff0c;软考网络管理员网络安全&#xff0c;网络管理员考点汇总。 文章目录 涉及知识点一、网络管理功能二、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023