前端移动高级web详细解析五

news2025/10/31 13:36:33

响应式布局方案

  • 媒体查询

  • Bootstrap框架

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，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

使用步骤

下载

下载：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/1160422.html

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

相关文章

IDEA上也能用Postman了？

IDEA上也能用Postman了？

Postman是大家最常用的API调试工具&#xff0c;国产API调试工具 Apipost 推出IDEA插件&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还可以根据已有的方法帮助您快速生成 url 和 params。Apipost Helper API 调试工具 API 管理工具 API 搜索工具。…
阅读更多...
领先实践｜IDEO 最佳设计思维和策略框架

领先实践｜IDEO 最佳设计思维和策略框架

设计思维是一种以人为本的创新方法&#xff0c;它从人类的角度出发&#xff0c;考虑技术上可行和经济上可行的内容。框架可以成为实现设计思维、策略和系统设计的有用工具。本文由此展开阐述 IDEO 的最佳设计思维和策略框架。 01. 设计思维框架 1.1 设计思维过程 设计思维?是…
阅读更多...
【python】爬取豆瓣电影排行榜TOP250存储到CSV文件中

【python】爬取豆瓣电影排行榜TOP250存储到CSV文件中

一、导入必要的模块&#xff1a; 代码首先导入了需要使用的模块&#xff1a;requests、lxml和csv。 import requests from lxml import etree import csv 如果出现模块报错 进入控制台输入&#xff1a;建议使用国内镜像源 pip install 模块名称 -i https://mirrors.aliyun.co…
阅读更多...
Failed to launch task: 文件”Setup”不存在 Mac安装Adobe软件报错解决方案

Failed to launch task: 文件”Setup”不存在 Mac安装Adobe软件报错解决方案

在安装 Adobe 软件时&#xff0c;软件提示 Failed to launch task: 文件”Setup”不存在 &#xff0c;这个时候怎么处理呢&#xff1f; 解决方法如下&#xff1a; 1、安装 AnitCC 或 或 Creative Cloud 环境&#xff0c;保证软件所需要的环境 2、如果安装后也不起作用&#x…
阅读更多...
[ThinkPHP]源码阅读：Model的获取器

[ThinkPHP]源码阅读：Model的获取器

目录 1、ThinkPHP组件版本 2、业务Model代码 3、阅读框架源码 4、跳过获取器获取原始数据写法 1、ThinkPHP组件版本 topthink/think-orm v2.0.58 topthink/think-helper v3.1.6 2、业务Model代码 原理&#xff1a;Model通过调用toArray方法使用自定义的获取器 3、阅读框架…
阅读更多...
GZ035 5G组网与运维赛题第8套

GZ035 5G组网与运维赛题第8套

2023年全国职业院校技能大赛 GZ035 5G组网与运维赛项&#xff08;高职组&#xff09; 赛题第8套 一、竞赛须知 1.竞赛内容分布 竞赛模块1--5G公共网络规划部署与开通&#xff08;35分&#xff09; 子任务1&#xff1a;5G公共网络部署与调试&#xff08;15分&#xff09; 子…
阅读更多...
Web Woeker和Shared Worker的使用以及案例

Web Woeker和Shared Worker的使用以及案例

文章目录 1、前言2、介绍 Web Worker3、使用须知及兼容性3.1、使用须知3.2、兼容性 4、使用 Web Worker4.1、创建 Web Worker4.2、与主线程通信4.3、终止 Web Worker4.4、监听错误信息 5、使用 Shared Worker4.5、调试 Shared Worker 6、使用中的一些坑6.1、Web Woeker 中引入了…
阅读更多...
第4章_运算符

第4章_运算符

文章目录 1. 算术运算符1.1 加法与减法运算符1.2 乘法与除法运算符1.3 求模运算符 2. 比较运算符2.1 等号运算符2.2 安全等于运算符2.3 不等于运算符2.4 空运算符2.5 非空运算符2.6 最小值运算符2.7 最大值运算符2.8 BETWEEN AND运算符2.9 IN运算符2.10 NOT IN运算符2.11 LIKE运…
阅读更多...
k8s中kubectl命令式对象、命令式对象配置、声明式对象配置管理资源介绍

k8s中kubectl命令式对象、命令式对象配置、声明式对象配置管理资源介绍

目录 一.kubernetes资源管理简介 二.三种资源管理方式优缺点比较 三.命令式对象管理介绍 1.kubectl命令语法格式 2.资源类型 &#xff08;1&#xff09;通过“kubectl api-resources”来查看所有的资源 &#xff08;2&#xff09;每列含义 &#xff08;3&#xff09;常…
阅读更多...
Java 设计模式——命令模式

Java 设计模式——命令模式

目录 1.概述2.结构3.案例实现3.1.命令接口3.2.具体命令3.3.接受者3.4.调用者3.5.测试 4.优缺点5.使用场景6.JDK 源码解析——Runnable 1.概述 &#xff08;1&#xff09;日常生活中&#xff0c;我们出去吃饭都会遇到下面的场景&#xff1a; &#xff08;2&#xff09;命令模…
阅读更多...
Go语言集成开发环境（IDE）：GoLand 2023中文

Go语言集成开发环境（IDE）：GoLand 2023中文

GoLand 2023是一款由JetBrains开发的现代化、功能丰富的Go语言集成开发环境&#xff08;IDE&#xff09;。它提供了智能代码提示和自动完成、强大的内置调试器以及代码重构工具&#xff0c;帮助开发者提高编码效率并确保代码质量。GoLand 2023还支持多种版本控制系统&#xff0…
阅读更多...
kubernetes-ingress-nginx

kubernetes-ingress-nginx

目录 一、部署 二、访问 1.基于路径访问 2.基于域名访问 三、加密与认证 1.TLS加密 2.auth认证 四、rewrite重定向 五、canary金丝雀发布 1.基于header灰度 2.基于权重灰度 3.业务域拆分 一、部署 ingress-nginx是一个开源的Kubernetes Ingress控制器&#xff0c;用…
阅读更多...
真实经历分享：性能测试需求分析详解

真实经历分享：性能测试需求分析详解

在实际的工作中系统的性能需求通常是一个笼统的需求&#xff0c;而且有可能给提需求的人并不知道具体的性能需要&#xff0c;所以只能含糊的列出。如果测试人员不搞清楚&#xff0c;就会出现实际要把杀猪刀&#xff0c;需求标明能屠龙&#xff01;&#xff01;&#xff01; 下面…
阅读更多...
C++二叉搜索树模拟实现

C++二叉搜索树模拟实现

目录 一、二叉搜索树的概念 二、二叉搜索树的结构 三、二叉搜索树的操作&#xff08;非递归&#xff09; 1.插入 2.查找 3.删除 4.遍历 四、二叉搜索树的操作&#xff08;递归&#xff09; 1.递归插入 2.递归查找 3.递归删除 4.递归遍历 五、二叉搜索树的默认成员函…
阅读更多...
C++ Qt QLineEdit如何响应回车事件

C++ Qt QLineEdit如何响应回车事件

在Qt开发中，回车键的处理很常见，本篇博客介绍在QLineEdit里回车键的处理方法，例如下面的界面： QLineEdit回车键的处理有方式，一是链接returnPressed信号，二是用事件过滤。下面分别介绍这两种方式。 一、returnPressed信号 可以查看QLineEdit的头文件声明，有如下信号：…
阅读更多...
python3 阿里云api进行巡检发送邮件

python3 阿里云api进行巡检发送邮件

python3 脚本爬取阿里云进行巡检 不确定pip能不能安装上&#xff0c;使用时候可以百度一下&#xff0c;脚本是可以使用的&#xff0c;没有问题的 太长时间了&#xff0c;pip安装依赖忘记那些了&#xff0c;使用科大星火询问了下&#xff0c;给了下面的&#xff0c;看看能不能使…
阅读更多...
成集云 | 钉钉集成用友T费用报销付款接口 |解决方案

成集云 | 钉钉集成用友T费用报销付款接口 |解决方案

源系统成集云目标系统 方案介绍 钉钉是一款免费沟通和协同的多端平台&#xff0c;提供PC版、Web版和手机版&#xff0c;支持手机和电脑间文件互传。钉钉帮助中国企业通过系统化的解决方案&#xff08;微应用&#xff09;&#xff0c;提升中国企业的沟通和协同效率。应用场景包…
阅读更多...
VMware Workstation 17安装教程之设置系统模式

VMware Workstation 17安装教程之设置系统模式

接上文&#xff0c;设置系统模式 返回到安装概要界面后&#xff0c;右侧第一个Installation Destination指的是想把系统安装到哪个硬盘。此时仅仅是让我们进行确认&#xff0c;不需要进行任何修改。 设置系统安装设备 关闭kdump服务 配置网络信息 当在虚拟机中做实验的时候&…
阅读更多...
报文的路由过程

报文的路由过程

路由转发过程 记住路由转发过程结论&#xff1a;报文ip是不变&#xff0c;mac改变。 mac地址在同一个广播域传输过程中是不变的&#xff1b;在跨越广播域的时候会发生改变的&#xff1b;而IP地址在传输过程中是不会改变的&#xff08;除NAT的时候&#xff09;。 ip地址本质上是…
阅读更多...
解析mfc100u.dll文件丢失的修复方法，快速解决mfc100u.dll问题

解析mfc100u.dll文件丢失的修复方法，快速解决mfc100u.dll问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是“缺少某个文件”的错误。最近&#xff0c;我也遇到了一个这样的问题&#xff0c;那就是“mfc100u.dll丢失”。这个问题可能会导致某些应用程序无法正常运行&#xff0c;给我们带来困扰。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023