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

响应式布局方案

  • 媒体查询

  • 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.hqwc.cn/news/156689.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux下的程序环境和预处理(gcc演示)

linux下的程序环境和预处理(gcc演示)

1. 程序的翻译环境和执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境&#xff0c;它用于实际执行代码。 2. 详解编译链接 2.1 翻译环境 组成一个程序的…
阅读更多...
Inspeckage，动态分析安卓 APP 的 Xposed 模块

Inspeckage，动态分析安卓 APP 的 Xposed 模块

前提 我在不久前写过《 APP 接口拦截与参数破解》的博文&#xff1b;最近爬取APP数据时又用到了相关技术&#xff0c;故在此详细描述一下 Inspeckage 的功能。&#xff08;环境准备本文不再赘述&#xff09; 功能 在电脑上访问 http://127.0.0.1:8008 就可以看到 inspeckage…
阅读更多...
采购申请单明细账/汇总账页面编写

采购申请单明细账/汇总账页面编写

业务需求和功能 1、功能&#xff1a;编写采购申请页面和采购申请管理页面。在申请单界面添加常用的查询条件&#xff0c;如单品、申请单等。在采购申请管理页面以单品维度去展示采购申请单的汇总信息&#xff0c;添加一个默认查询时间为7天&#xff0c;并对查询出来的不同状态…
阅读更多...
2021年09月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年09月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试&#xff08;1~6级&#xff09;全部真题・点这里 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 第1题 使用map函数可以实现列表数据元素类型的转换&#xff0c;而无需通过循环。则将列表L[‘1’,‘3’,‘5’,‘7’,‘9’]转…
阅读更多...
如何创建 SpringBoot 多模块项目

如何创建 SpringBoot 多模块项目

1. 创建父模块 【添加依赖】 【删除父模块资源】 父模块只需要保留 pom.xml&#xff0c;其他文件的全部删除&#xff08;包括 src&#xff09; 2. 创建子模块 3. 修改父模块 3.1 删除不必要的依赖 3.2 添加打包类型 3.3 添加所有子模块 声明子模块有两个好处&#xff1a; …
阅读更多...
企业链表（未完成）

企业链表（未完成）

文章目录 1. 插入2. 类型转换说明2. 代码实现 1. 插入 // 插入 void insert(LinkList* list, int pos, LinkNode* data) {if (!list || !data)return;if (pos < 0 || pos > list->size)return;LinkNode* curNode &(list->head);for (int i 0; i < pos; i)…
阅读更多...
Mac 配置环境变量

Mac 配置环境变量

Mac 配置环境变量 修改配置文件 vim ~/.bash_profile i进入编辑模式. Esc&#xff1a;wq 保存文件 esc:q 退出 如&#xff1a;jdk环境变量配置 JAVA_HOME/Library/Java/JavaVirtualMachines/jdk1.8.0_361.jdk/Contents/HomeCLASSPATH$JAVA_HOME/lib/tools.jar:$JAVA_HOME/…
阅读更多...
目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…
阅读更多...
GAMP源码阅读：卫星位置钟差计算

GAMP源码阅读：卫星位置钟差计算

原始 Markdown文档、Visio流程图、XMind思维导图见&#xff1a;https://github.com/LiZhengXiao99/Navigation-Learning 文章目录 1、satposs_rtklib()2、ephclk()1. eph2clk()&#xff1a;时钟校正参数&#xff08; a f 0 、 a f 1 、 a f 2 a_{f0}、a_{f1}、a_{f2} af0​、af…
阅读更多...
vim

vim

简介 vim是一款多模式的文本编辑器&#xff0c;vim里面还有很多子命令&#xff0c;来进行代码的编写操作 常用模式图 命令模式 光标移动 shif $ 光标定义到当前行的最右侧结尾 shift ^ 光标定义到当前行的最左侧开头 shift g 光标定位到文本最末尾…
阅读更多...
怎样解决“缺失msvcp110.dll”错误,msvcp110.dll的修复教程

怎样解决“缺失msvcp110.dll”错误,msvcp110.dll的修复教程

在计算机使用过程中&#xff0c;我们可能会遇到一些系统错误提示&#xff0c;比如“msvcp110.dll文件丢失”。这是因为msvcp110.dll是Microsoft Visual C 2012的一个动态链接库文件&#xff0c;如果这个文件丢失或者损坏&#xff0c;就可能导致某些程序无法正常运行。那么&…
阅读更多...
stm32整理（三）ADC

stm32整理（三）ADC

1 ADC简介 1.1 ADC 简介 12 位 ADC 是逐次趋近型模数转换器。它具有多达 19 个复用通道&#xff0c;可测量来自 16 个外部 源、两个内部源和 VBAT 通道的信号。这些通道的 A/D 转换可在单次、连续、扫描或不连续 采样模式下进行。ADC 的结果存储在一个左对齐或右对齐的 16 位…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023