Day07-响应式

已于 2022-09-29 20:29:21 修改
阅读量120 收藏
点赞数
分类专栏： web移动端 文章标签： css css3 前端
于 2022-09-11 21:56:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45831040/article/details/126808775
版权
本文详细介绍了BootStrap框架的使用，包括媒体查询、UI框架概念、BootStrap的下载与引入、栅格系统、全局CSS样式、组件、字体图标、插件的使用，并通过实例展示了如何快速布局响应式网页。同时，提到了BootStrap的定制步骤，以及在实际项目中的应用。
摘要由CSDN通过智能技术生成

Day07-响应式

一、媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

媒体特性常用写法：
max-width
min-width

在这里插入图片描述
完整写法：
在这里插入图片描述
关键词：and、only、not

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。
在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
        
    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
css属性都有层叠性，要注意书写顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            视口宽度 >= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
         */

        /* css属性都有层叠性 */

        @media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }

        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }

        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }


    </style>
</head>
<body>
    
</body>
</html>

外链式CSS引入
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
还能实现简单的隐藏功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

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

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

        /* 如果检测到视口宽度小于768px, 认为是手机端, 把left隐藏 */
        @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>

在这里插入图片描述

二、BootStrap

1.1 UI框架

目标：知道 UI框架的作用

UI框架概念：将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
作用;基于框架开发，效率高，稳定性高。

2.1 BootStrap简介

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

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

3.1 BootStrap使用步骤

目标：使用 BootStrap框架快速布局响应式网页

1.下载： https://www.bootcss.com/
首页 → BootStrap3中文文档 → 下载BootStrap
在这里插入图片描述
2.使用
引入： BootStrap提供的CSS代码
在这里插入图片描述
调用类：使用BootStrap提供的样式
如：container：响应式布局版心类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap使用方法</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">1</div>
</body>
</html>

在这里插入图片描述

4.1 BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页

经典响应式网页如下图所示：http://alloyteam.com/

在这里插入图片描述
栅格化是指将整个网页的宽度分成若干等份，BootStrap3默认将网页分成12等份
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
    <div class="container">
        <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>
</body>
</html>

在这里插入图片描述

5.1 栅格系统相关类

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用**.row**类名和 .col类名定义栅格布局的行和列。

注意:
1.container类自带间距15px;
2.row类自带间距-15px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 版心样式:自带左右各15px的padding -->
    <div class="container">1</div>

    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>
    <!-- 宽度100%:自带左右各15px的padding -->
    <div class="container-fluid">3</div>
</body>
</html>

在这里插入图片描述

6.1 全局CSS样式

手册用法：BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类
在这里插入图片描述
在这里插入图片描述

布局类——表格:
table : 基本类名, 初始化表格默认样式
table-bordered : 边框线
table-striped : 隔行变色
table-hover : 鼠标悬停效果
table-responsive : 表格宽溢出滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-表格</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

</body>
</html>

在这里插入图片描述
美化内容类——按钮：
btn : 基准样式
btn-info; btn-success : 设置按钮背景色
btn-block : 设置按钮为块元素
btn-lg; btn-sm; btn-xs : 设置按钮大小
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-按钮</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-lg">成功</button>

    <button class="btn btn-warning btn-xs">警告</button>
</body>
</html>

在这里插入图片描述
布局类——表单：
form-control : 设置表单元素input, select, textarea的样式
checkbox 和 radio : 设置复选框和单选框的样式
form-inline : 设置表单元素水平排列
disabled : 设置表单禁用状态样式
input-lg; input-sm, input-xs : 设置表单元素的大小
在这里插入图片描述
美化内容类——图片：
img-responsive: 图片自适应
img-rounded : 图片设置圆角
img-circle : 图片设置正圆
img-thumbnail : 图片添加边框线
在这里插入图片描述
布局类——辅助类：
pull-right : 强制元素右浮动
pull-left : 强制元素左浮动
clearfix : 清除浮动元素的影响
text-left文 : 本左对齐
text-right : 文本右对齐
text-center : 文本居中对齐
center-block : 块元素居中

布局类——响应式工具（不同屏幕尺寸隐藏或显示页面内容）:
在这里插入图片描述

7.1 组件

目标：使用BootStrap组件快速布局网页

组件：BootStrap提供的常见功能，包含了HTML结构和CSS样式。

使用方法：
1.引入BootStrap样式
2.复制结构，修改内容

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          下拉
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>

        <ol class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">用户中心</a></li>
            <li><a href="#">用户</a></li>
            <li class="active">数据</li>
          </ol>
      </div>
</body>
</html>

在这里插入图片描述

8.1 Glyphicons字体图标

目标：使用Glyphicons字体图标实现网页中的图标效果

Glyphicons字体图标的使用步骤:
1.HTML页面引入BootStrap样式文件
2.准备字体文件 (注意路径)
3.空标签调用对应类名:
glyphicon
图标类
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-user"></i>
</body>
</html>

在这里插入图片描述

9.1 插件使用

BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript
在这里插入图片描述

插件的使用步骤:
1.引入BootStrap样式
2.引入js文件：jQuery.js + BootStrap.min.js
在这里插入图片描述
3.复制HTML结构, 并适当调整结构或内容
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插件</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <!-- <div class="dropdown">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown trigger
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
        </ul>
      </div> -->

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          ...
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

10.1 定制

目标：能够根据项目需求定制bootstrap框架
定制步骤:
1.导航菜单 → 定制
2.输入目标变量值
3.编译并下载，引入定制后的框架

在这里插入图片描述

三、实战演练-AlloyTeam

目标：使用BootStrap快速布局网页

技术点：
1.组件
2.插件
3.栅格系统
4.定制
充分利用浏览器的检查功能，做适当的修改

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯前端</title>
    <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <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 class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">首页</a></li>
              <li><a href="#">博客</a></li>
              <li><a href="#">Github</a></li>
              <li><a href="#">TWeb Conf</a></li>
              <li><a href="#">SuperStar</a></li>
              <li><a href="#">Web前端导航</a></li>
              <li><a href="#">关于</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <!-- 头部 -->

    <!-- banner -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
            </div>
          </div>
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <!-- banner -->

      <!-- 开源项目 -->
      <div class="project">
        <h3 class="h2">OpenSource/开源项目</h3>
        <p>种类众多的开源项目，让你爱不释手</p>
        <div class="container">
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">2</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">3</a></div>
            <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">4</a></div>
        </div>
      </div>
      <!-- 开源项目 -->

    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>

// banner
.carousel {
    // 如果视口<768, 图250 max-width
    // 如果视口<992, 图400 max-width
    // 如果视口>992, 图500 min-width
    img {
        height: 100% !important;
    }

    @media (max-width: 992px) {
        .item {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .item {
            height: 250px;
        }
    }

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

// 头部
.navbar-default {
    background-color: transparent;
    border: 0;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
}

// 开源项目
.project {
    padding-top: 30px;
    text-align: center;

    .container {
        div {
            // background-color: pink;
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}

在这里插入图片描述

纯纯不会写代码
关注
专栏目录
Vue.js---响应式原理
weixin_52462962的博客
03-22 4072
挑战每天更一篇--Day3
day07 响应式网页：媒体查询、BootStrap
weixin_43730921的博客
02-10 503
响应式网页：媒体查询、BootStrap
Day14：响应式网页
EmulateStep的博客
06-07 1146
day14：本文主要讲了媒体查询和 Bootstrap 框架，媒体查询讲解了媒体查询的完整写法和简易写法，还讲了几个常用媒体特性：min-width 、max-width 等以及书写顺序，如果媒体查询用到的场景很多，可以使用link标签在引入外部CSS时进行媒体查询。关于Bootstrap框架，主要讲了怎么下载和使用，讲了框架里面的栅格系统、button、组件等，怎么使用这个框架进行响应式布局，最后通过一个综合实例，巩固今日所学。
Reactive Spring实战 -- 响应式Redis交互
binecy
03-14 1521
本文分享Spring中如何实现Redis响应式交互模式。 本文将模拟一个用户服务，并使用Redis作为数据存储服务器。 本文涉及两个java bean，用户与权益 public class User { private long id; private String name; // 标签 private String label; // 收货地址经度 private Double deliveryAddressLon; // 收货地址维度 p
vue3学习day02-组合式API-setup选项、reactive（将非响应式数据变为响应式数据）、computed（基本思想和vue2一致）、watch
2301_76648183的博客
08-01 366
需要返回 已知：浅层监视。
Android响应式UI教程
kmyhy的专栏
07-20 4768
原文：Responsive UI Tutorial for Android 作者：James Nocentini 译者：kmyhy 2017/5/4 更新说明: 由 James Nocentini 更新到 Android Studio 2.2.3。原文作者也是 James。Android 运行的设备十分广泛，它们的屏幕尺寸和分辨率都不一样。因此，Android app 能够拥有适应各种
JSD-2204-Knife4j框架-处理响应结果-Day07
TheNewSystrm的博客
08-01 1286
JSD-2204-Knife4j框架-处理响应结果-Day07
响应式编程初探-自定义实现Reactive Streams规范
摸魚散人的博客
01-09 3179
响应式编程初探-自定义实现Reactive Streams规范
实战响应式图片
每天都记录一点点！
08-07 2295
原文：Responsive Images in Practice 作者：Eric Portis 译者注：感谢米粽、我佛山人和otakustay为译文提出的宝贵意见。 魔鬼因一切我们享受的东西而惩罚我们。 —阿尔伯特·爱因斯坦 图片已经占了 Web 内容的 62%，而且我们每天都在制造更多。如果所有图片内容都能被好好加以利用那的确很赞。但是对小屏或低分辨率屏
01 “响应式Web设计”——概述
X北辰北的博客
04-16 1383
“响应式Web设计”的出现背景 在很早之前（或者在目前也存在此情况），我们写出来的前端页面可能都还是固定宽度的，这种页面如果仅仅是在我们的笔记本电脑或者一般的台式机来加载浏览的话可能差别不是很大，虽然有较小的差别，但不太会超出我们的忍耐程度。但是呢，目前我们浏览网页的方式发生了巨大的变化，这就得益于各种浏览设备的出现了，例如：手机、平板、大比例展示屏…… 那如果...
day07-Split Landing Page（分割登陆页）
07-05
在分割登陆页中，颜色、字体、布局和响应式设计都是关键因素。通过CSS，你可以调整不同版本页面的视觉吸引力，测试哪种配色方案、按钮样式或图像布局更能吸引用户。CSS3的新特性，如过渡效果、动画和媒体查询，可以...
Day16-30_Day16-30_python_
10-03
- 多态：不同类的对象可以响应相同的消息（方法调用）。 8. **函数式编程**： - 高阶函数：接受一个或多个函数作为参数的函数，如`map()`, `filter()`, `reduce()`。 - 匿名函数（lambda）：简短的、一次性使用...
Day06-07
03-14
此外，CSS3引入了许多新特性，如Flexbox（弹性盒子模型）和Grid（网格布局），它们为创建响应式设计提供了强大工具。Flexbox允许灵活地调整元素的顺序、大小和位置，而Grid则可以创建二维布局，使网页设计更加精细和...
Day07响应式 bootstrap 腾讯全端案例
weixin_52284271的博客
07-29 110
bootstrape 腾讯全端
CSS-Day3
m0_74039531的博客
09-29 429
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 478
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
【CSS】position
小秀的博客
10-02 403
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
241006-Gradio中Chatbot通过CSS自适应调整高度
最新发布
专注机器学习之路
10-06 175
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
CSS 中的@media print 是干什么用的？
读心悦
09-29 286
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
Oracle Database 2 Day + APEX开发者指南
9. **移动应用开发**：介绍Oracle APEX对移动设备的支持，如何创建响应式设计以适应不同设备。 10. **应用发布与部署**：讲解如何打包和部署应用程序，以及如何进行版本控制和更新。 11. **最佳实践和调试**：提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯不会写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值