移动Web学习05

最新推荐文章于 2024-08-09 18:01:20 发布
最新推荐文章于 2024-08-09 18:01:20 发布
阅读量940 收藏 16
点赞数 9
分类专栏： CSS 文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuiini/article/details/136586290
版权

五、响应式网页

解决方案：

  1. 媒体查询

    @media (条件) {
    html {
        background-color: green;
    }
}

  2. Bootstrap

1、媒体查询

@media (媒体特性) {
   选择器 {
       样式
   }
}

媒体特性：

  • max-width: 最大宽度
  • min-width: 最小宽度

示例：

<!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>
       /* 屏幕宽度小于等于768，网页背景是粉色 → max-width */
       @media (max-width: 768px) {
           body {
               background-color: pink;
           }
       }
       /* 屏幕宽度大于等于1200，网页背景是绿色 → min-width */
       @media (min-width: 1200px) {
           body {
               background-color: green;
           }
       }
   </style>
</head>
<body>

</body>
</html>
书写顺序
  • min-width（从小到大）
  • max-width（从大到小）
案例
—— 左侧隐藏

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

示例：

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .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;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">
            响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
        </div>
    </div>
</body>
</html>
完整写法 - 了解

@media 关键词 媒体类型 and (媒体特性) { CSS 代码 }

关键词 / 逻辑操作符

  • and
  • only
  • not

媒体类型是用来区分设备类型的的，如屏幕设备、打印设备等、其中手机、电脑、平板都属于屏幕设备

类型名称值描述
屏幕screen带屏幕的设备
打印预览print打印预览模式
阅读器speech屏幕阅读模式
不区分类型all默认值，包括以上3种情形

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称属性值
视口的宽和高width、height数值
视口最大宽或高max-width、max-height数值
视口最小宽或高min-width、min-height数值
屏幕方向orientationportrait: 竖屏
landscape: 横屏
外部CSS

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- 视口宽度小于等于 768px，网页背景色是粉色 -->
   <link rel="stylesheet" media="(max-width: 768px)" href="./pink.css">
   <!-- 视口宽度大于等于 1200px，网页背景色是绿色 -->
   <link rel="stylesheet" media="(min-width: 1200px)" href="./green.css">
</head>
<body>

</body>
</html>

2、Bootstrap

简介

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

下载

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

使用步骤：

  1. 下载：Bootstrap V5 中文文档 → 进入中文文档 → 下载 → 下载 Bootstrap 生产文件
  2. 使用
使用

使用步骤：

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

栅格化是指将整个王爷的宽度分成12等份，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

BreakpointClass infixDimensions
Extra smallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px
xssmmdlgxlxxl
Container max-widthNone (auto)540px720px960px1140px1320px
Class prefix-col--col-sm--col-md--col-lg--col-xl--col-xxl-

常用布局类

  • col-*-*：列（例如：col-xxl-3）
  • row：行

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
   <!-- 
       视口宽度大于等于1200px，一行排4个盒子
       视口宽度大于等于768px，一行排2个盒子
       视口宽度大于等于576px，一行排1个盒子
    -->
   <!-- 版心 → row -->
   <div class="container">
       <div class="row">
           <div class="col-xl-3 col-md-6 col-sm-12">1</div>
           <div class="col-xl-3 col-md-6 col-sm-12">2</div>
           <div class="col-xl-3 col-md-6 col-sm-12">3</div>
           <div class="col-xl-3 col-md-6 col-sm-12">4</div>
       </div>
   </div>
</body>
</html>

总结：

  1. 栅格系统是将网页等分成 12 份。
  2. Bootstrap 5 中，栅格系统划分了 6 个响应区间。
全局样式

Button类

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-sm">按钮1</button>
    <button class="btn btn-warning btn-lg">按钮2</button>
</body>
</html>

效果：
在这里插入图片描述

表格类：

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-hover">
        <tr class="table-success">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>28</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>28</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

效果：
在这里插入图片描述

组件（Components）
  1. 引入样式表
  2. 引入 js 表
  3. 复制结构，修改内容

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
   <style>
       .bg-body-tertiary {
           background-color: pink !important;
       }
   </style>
</head>
<body>
   <!-- 导航 -->
   <nav class="navbar navbar-expand-lg bg-body-tertiary">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</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="#">课程资料</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#">视频</a>
                   </li>
               </ul>
           </div>
       </div>
   </nav>
   <!-- 轮播图 -->
   <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">
               <img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
           </div>
           <div class="carousel-item">
               <img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
           </div>
           <div class="carousel-item">
               <img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
           </div>
           <div class="carousel-item">
               <img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
           </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>

   <script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

效果：
在这里插入图片描述

字体图标

下载：
导航 / Extend：图标库 → 安装 → 下载安装包

使用：

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
   <style>
       .bi-apple {
           font-size: 100px;
           color: red;
       }
   </style>
</head>
<body>
   <sapn class="bi-apple"></sapn>
</body>
</html>

效果：
在这里插入图片描述

kuiini
关注
  • 9
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动web学习总结
奋斗的小绿萝
08-07 2931
最近学习了些移动web开发的知识，总结一下： Hello,移动web： https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px，逻辑像素，浏览器使用的抽象单位 dp，pt： device independence pixel 物理像素：设备无关像素 dpr ： devicePixelRatio 设备像...
常用移动web开发框架
简单
05-01 7920
纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jQuery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架，项目中也有应用。国内也有公司，像BAT巨头也在探索和实现了适合自己的移动web...
web移动开发总结(一)
庚中
12-02 1万+
概述 移动web的概念和发展历史 移动web的开发方式和区别 响应式原理和媒体查询(重点) 响应式框架的介绍 bootstrap框架的基本使用 bootstrap全局CSS样式布局容器使用(重点) bootstrap全局CSS样式栅格系统使用(重点) bootstrap全局CSS样式响应式工具使用 微金所项目搭建和头部的结构 (重点) web前端 PC端的web ： 在PC端电脑访问的web...
web移动开发总结(四)
庚中
12-10 4383
总结 移动端的一些基本基础知识 移动京东的项目搭建 公共样式的定义 顶部通栏的布局 轮播图的布局 导航条的布局 秒杀商品布局 京东超市布局 原生移动web开发 响应式开发： 写一个页面同时适配多个终端 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码 PC端一般使用固定宽高的布局 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局） 目...
基于web的在线学习系统设计与实现 功能参考
杭州.黄老师
12-27 3905
web在线学习系统
Web前端学习书籍推荐
web前端新手学习之家
11-20 2321
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐。正在从事web前端工作的小伙伴们都知道，想要从事前端行业，要学习的内容太多了，当你不知道从哪里开始的时候，你就先从看书开始，边看书边码代码，这个是学习编程必须的过程，因为你看一百遍，还不如自己写一遍，写一遍，第一可以加印象，第二便于更好的理解。今天小编就为大家推荐几本适合web前端工程师学习前端技术的书籍，希望能够对小伙伴们有所...
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 2717
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
移动web学习--淘宝 flexible.js
热门推荐
季诗筱的博客
04-22 1万+
最近在学习移动web，需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料，最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文：     1、从网易与淘宝的font-size思考前端设计稿与工作流     2、白色橡树：移动web资源整理     3、移动端web app自适应布局探索与总结     4、手机端页面自适应解决方案—rem布局     5、使
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3669
Web前端学习笔记（1）
Web前端学习笔记（十）--- 移动边框式按钮
海到无边天作岸 山登绝顶我为峰
09-09 2285
效果图 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
java基于web的移动学习平台毕业设计程序
09-22
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计...
React移动web极致优化
02-25
学习React的好处就是，学了一遍之后，能够写web,node直出，以及native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用Reactjs；需要提升首屏时间的，可以结合ReactServerRender；需要更好的性能的，可以...
iOS移动Web开发
11-04
### iOS移动Web开发知识点...通过以上课程的学习，学员们可以系统地掌握iOS移动Web开发所需的各项技能，包括HTML、CSS、JavaScript、jQuery以及React Native等相关技术，为成为一名合格的移动Web开发者打下坚实的基础。
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 416
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
【面试经验】滴滴 秋招储备实习 前端面经
litterfinger的博客
08-05 582
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
小程序支付（前端）
weixin_43993121的博客
08-05 648
【代码】小程序支付（前端）
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 254
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue中怎么自定义组件
最新发布
qinshi501的博客
08-09 571
在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。
HTML5移动Web开发实战指南
此书适合Web前端开发者、UI设计师、项目经理、策划人员和移动Web技术爱好者，同时也适用于高校师生和后端Web技术开发者学习。" HTML5移动Web开发是随着智能手机和平板电脑的普及而日益重要的领域。这本书首先介绍了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值