【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

news2024/12/25 9:35:19

文章目录

  • 一、搜索栏样式及核心要点
    • 1、实现效果
    • 2、自动伸缩搜索栏实现
    • 3、搜索栏父容器设置
    • 4、搜索栏左右两侧的按钮盒子
    • 5、搜索栏盒子
    • 6、二倍精灵图处理方案
  • 二、完整代码示例
    • 1、HTML 标签结构
    • 2、CSS 样式
    • 3、展示效果





一、搜索栏样式及核心要点




1、实现效果


上一篇博客中 , 完成了顶部提示栏 ,

在这里插入图片描述

本篇博客开始完成下面的 搜索栏布局 ;

在这里插入图片描述


2、自动伸缩搜索栏实现


在上面的基础上 , 如果 缩小浏览器的宽度 , 搜索栏也会跟着缩小 ,

在这里插入图片描述

如果 拉长浏览器的宽度 , 搜索栏也会跟着拉长 ;

在这里插入图片描述


实现自动伸缩的效果 :

  • HTML 标签结构如下 :
    • 最外层的父容器
    • 父容器内部两个半圆形的子容器 ;
    • 中间部分可自动伸缩的子容器盒子
  • 半圆子容器 : 两侧的 半圆形 圆角矩形框 是通过 定位 设置的 ;
  • 中间矩形子容器 : 中间的 白色矩形框 是通过 标准流 盒子实现的 , 该盒子不设置宽度 , 自动充满父容器 ;
    • 为了不让该白色矩形影响到两侧的半圆 , 为其 设置左右两侧的 margin 外边距值 ;

css 样式实例 :

.search-wrap {
    /* 第二排搜索栏样式 */
    /* 该样式在滑动时 , 始终在最上方显示 */
    position: fixed;
    /* 防止外边距塌陷进行的设置 */
    overflow: hidden;
    /* 搜索栏宽度充满全屏 */
    width: 100%;
    /* 搜索栏的高度为 44 像素 */
    height: 44px;
    /* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */
    min-width: 320px;
    /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */
    max-width: 640px;
}

3、搜索栏父容器设置


在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;

由于设备宽度不同 , 这里不设置宽度 , 让宽度自适应即可 ;

在这里插入图片描述

css 样式实例 :

.search-btn {
    /* 左侧按钮布局 */
    /* 左侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 定位到左上角 */
    top: 0;
    left: 0;
    /* 设置盒子的尺寸 */
    width: 40px;
    height: 44px;
}

4、搜索栏左右两侧的按钮盒子


左侧的按钮所在的盒子 40 x 44 像素大小 , 该按钮盒子通过定位设置 ;

在这里插入图片描述

左侧列表按钮图片尺寸为 20 x 18 像素 , 图片在父容器中 , 有 14 像素上边距 , 15 像素左边距 ;

margin 外边距复合写法 , 外边距顺序为 : 上 / 右 / 下 / 左 ( 顺时针方向 ) ;

在这里插入图片描述

css 样式实例 :

.search-btn::before {
    /* 在 指定的标签元素内部的 前面 插入内容 */
    /* 左侧按钮盒子中 插入 JD 图片 */
    content: "";
    /* 显示模式设置为块级元素 */
    display: block;
    /* 盒子大小设置为 20 x 18 像素 */
    width: 20px;
    height: 18px;
    /* 设置背景 */
    background: url(../images/s-btn.png) no-repeat;
    /* 设置图片背景大小 */
    background-size: 20px 18px;
    /* 设置图像的外边距 */
    margin: 14px 0 0 15px;
}

右侧的登录按钮 , 尺寸也是 40 x 44 大小 , 该按钮盒子通过定位设置 ;

在这里插入图片描述

右侧按钮直接写上 " 登录 " 两个字 , 垂直居中 , 行高 = 内容高度 , 即可设置文字垂直居中 ;

css 样式实例 :

.search-login {
    /* 右侧按钮布局 */
    /* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 盒子定位到右上角 */
    right: 0;
    top: 0;
    /* 布局尺寸 40 x 44 像素 */
    width: 40px;
    height: 44px;
    /* 文字颜色白色 */
    color: #fff;
    /* 行高 = 内容高度 垂直居中 */
    line-height: 44px;
}

5、搜索栏盒子


搜索栏盒子 高度是 44 像素 , 宽度一定不要设置 , 让该盒子自适应自动缩放宽度 ;

该容器中 , 只需要利用中间部分内容即可 , 两侧需要设置 padding 内边距 ;

在这里插入图片描述

搜索栏盒子高度是 30 像素 , 如果设置成半圆形的圆角 , 左侧的半圆需要设置 左上角和左下角 圆角半径为 15 像素 , 右侧半圆需要设置 右上角和右下角 圆角半径为 15 像素 ;

总的高度是 44 像素 , 搜索栏的盒子高度 30 像素 , 设置该高度后 , 需要设置 7 像素的 上边距 , 使得该搜索栏可以垂直居中 ;

如果为中间搜索栏盒子设置一个 7 像素的外边距 , 会导致外边距塌陷 , 将左右两侧的按钮都带下来 ;

外边距塌陷解决方案是 为 父容器 设置 overflow:hidden 属性 ;

css 样式实例 :

.search {
    /* 中间部位搜索栏盒子内容 */
    /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */
    position: relative;
    /* 搜索框高度 30 像素 */
    height: 30px;
    /* 白色字体 */
    background-color: #fff;
    /* 上下 0 像素外边距 左右 50 像素外边距 */
    margin: 0 50px;
    /* 左侧和右侧设置为 15 像素圆角 */
    border-radius: 15px;
    /* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */
    margin-top: 7px;
}

搜索框中的 JD 图片 , 尺寸为 20 x 15 像素 , 其外边距为 上 8 像素 / 右 8 像素 / 下 0 像素 / 左 15 像素 ;
在这里插入图片描述
css 样式实例 :

.jd-icon {
    /* 搜索框中插入 JD 图标 */
    /* 设置 JD 图标的宽高 */
    width: 20px;
    height: 15px;
    /* 设置绝对定位 */
    position: absolute;
    /* 定位到左上角 距离顶部 8 像素  距离左侧编剧 13 像素 */
    top: 8px;
    left: 13px;
    /* 设置 JD 图片背景 */
    background: url(../images/jd.png) no-repeat;
    /* 设置背景图片的尺寸 会缩放背景图片 */
    background-size: 20px 15px;
}

这一道小竖线 , 使用一个 1 像素大小的 盒子实现 , 宽度 1 像素 , 高度 15 像素 , 背景为灰色 ;

可以通过 ::after 伪类插入上述盒子 , 使用绝对定位设置该盒子的位置 , 注意 子绝父相 , 子元素绝对定位 , 父元素必须使用相对定位 ;

在这里插入图片描述

css 样式实例 :

.jd-icon::after {
    /* 插入竖线 */
    content: "";
    /* 竖线盒子模型 使用绝对定位 */
    position: absolute;
    /* 竖线盒子模型 在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */
    right: -8px;
    top: 0;
    /* 设置显示模式为块级元素 可以设置宽高 */
    display: block;
    /* 盒子模型尺寸为 1 x 15 像素 */
    width: 1px;
    height: 15px;
    /* 设置盒子的灰色背景 */
    background-color: #ccc;
}

6、二倍精灵图处理方案


放大镜按钮实现 , 下图放大镜所在的盒子尺寸为 18 x 15 像素 ;

在这里插入图片描述

该图片是一张精灵图中的图片 , 图片地址为 https://st.360buyimg.com/so/images/search/jd-sprites.png ;

在这里插入图片描述
这里涉及到将精灵图进行缩放 , 重新测量精灵图缩放后的 坐标位置 和 大小 ;

在 Fireworks 中测量该精灵图大小为 30 x 29 像素 , 其左上角坐标位置为 166, 0 位置 ;

在这里插入图片描述

精灵图的大小是 400 x 400 像素的 , 计算缩放时 , 需要计算缩放比例 ;

精灵图中放大镜图标为 30 x 29 像素 , 在布局中放大镜图标为 18 x 15 像素 ;

这里将精灵图中的放大镜图标设置为 36 x 30 像素 , 比较好计算 ;


二倍精灵图处理方案 :

  • 在 Firework 中 , 将精灵图缩小一半 ;
  • 在缩小一半的精灵图中测量坐标 ;
  • 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半 ;

最终测量后 , 在缩小一半的精灵图中 , 放大镜图标的左上角在 81, 0 坐标位置 , 设置 background-position 时 , 设置为 -81, 0 即可 ;

css 样式实例 :

.sou {
    /* 二倍精灵图 */
    /* 设置 精灵图中的放大镜图标 */
    /* 该图标是绝对定位 */
    position: absolute;
    /* 设置放大镜图标的 绝对定位位置 */
    top: 8px;
    left: 50px;
    /* 设置盒子模型尺寸 */
    width: 18px;
    height: 15px;
    /* 设置精灵图 以及精灵图中的放大镜图标位置 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    /* 此处将 二倍精灵图缩小了一倍 */
    background-size: 200px auto;
}




二、完整代码示例




1、HTML 标签结构


本章节核心代码 :

    <!-- 第二排 : 搜索栏 -->
    <div class="search-wrap">
        <!-- 左侧的列表按钮 -->
        <div class="search-btn"></div>
        <!-- 中间的搜索框 -->
        <div class="search">
            <!-- 中间搜索框中的 JD 图标 -->
            <div class="jd-icon"></div>
            <!-- 中间搜索框中的 放大镜 图标 -->
            <div class="sou"></div>
        </div>
        <!-- 右侧的登录按钮 -->
        <div class="search-login">登陆</div>
    </div>

完整代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要开发的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 css 初始化样式 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入要开发的 CSS 文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>流式布局示例</title>
</head>

<body>
    <!-- 第一排 : 顶部 APP 提示标签 -->
    <header class="app">
        <ul>
            <li>
                <!-- 左侧的关闭按钮 -->
                <img src="images/close.png" alt="">
            </li>
            <li>
                <!-- 关闭按钮右侧的京东 LOGO -->
                <img src="images/logo.png" alt="">
            </li>
            <li>打开京东APP, 实惠又轻松</li>
            <li>立即打开</li>
        </ul>
    </header>

    <!-- 第二排 : 搜索栏 -->
    <div class="search-wrap">
        <!-- 左侧的列表按钮 -->
        <div class="search-btn"></div>
        <!-- 中间的搜索框 -->
        <div class="search">
            <!-- 中间搜索框中的 JD 图标 -->
            <div class="jd-icon"></div>
            <!-- 中间搜索框中的 放大镜 图标 -->
            <div class="sou"></div>
        </div>
        <!-- 右侧的登录按钮 -->
        <div class="search-login">登陆</div>
    </div>
</body>

</html>

2、CSS 样式


本章节核心代码 :

/* 下面是搜索栏样式 */

.search-wrap {
    /* 第二排搜索栏样式 */
    /* 该样式在滑动时 , 始终在最上方显示 */
    position: fixed;
    /* 防止外边距塌陷进行的设置 */
    overflow: hidden;
    /* 搜索栏宽度充满全屏 */
    width: 100%;
    /* 搜索栏的高度为 44 像素 */
    height: 44px;
    /* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */
    min-width: 320px;
    /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */
    max-width: 640px;
}

.search-btn {
    /* 左侧按钮布局 */
    /* 左侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 定位到左上角 */
    top: 0;
    left: 0;
    /* 设置盒子的尺寸 */
    width: 40px;
    height: 44px;
}

.search-btn::before {
    /* 在 指定的标签元素内部的 前面 插入内容 */
    /* 左侧按钮盒子中 插入 三 图片 */
    content: "";
    /* 显示模式设置为块级元素 */
    display: block;
    /* 盒子大小设置为 20 x 18 像素 */
    width: 20px;
    height: 18px;
    /* 设置背景 */
    background: url(../images/s-btn.png) no-repeat;
    /* 设置图片背景大小 */
    background-size: 20px 18px;
    /* 设置图像的外边距 */
    margin: 14px 0 0 15px;
}

.search-login {
    /* 右侧按钮布局 */
    /* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 盒子定位到右上角 */
    right: 0;
    top: 0;
    /* 布局尺寸 40 x 44 像素 */
    width: 40px;
    height: 44px;
    /* 文字颜色白色 */
    color: #fff;
    /* 行高 = 内容高度 垂直居中 */
    line-height: 44px;
}

.search {
    /* 中间部位搜索栏盒子内容 */
    /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */
    position: relative;
    /* 搜索框高度 30 像素 */
    height: 30px;
    /* 白色字体 */
    background-color: #fff;
    /* 上下 0 像素外边距 左右 50 像素外边距 */
    margin: 0 50px;
    /* 左侧和右侧设置为 15 像素圆角 */
    border-radius: 15px;
    /* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */
    margin-top: 7px;
}

.jd-icon {
    /* 搜索框中插入 JD 图标 */
    /* 设置 JD 图标的宽高 */
    width: 20px;
    height: 15px;
    /* 设置绝对定位 */
    position: absolute;
    /* 定位到左上角 距离顶部 8 像素  距离左侧编剧 13 像素 */
    top: 8px;
    left: 13px;
    /* 设置 JD 图片背景 */
    background: url(../images/jd.png) no-repeat;
    /* 设置背景图片的尺寸 会缩放背景图片 */
    background-size: 20px 15px;
}

.jd-icon::after {
    /* 插入竖线 */
    content: "";
    /* 竖线盒子模型 使用绝对定位 */
    position: absolute;
    /* 竖线盒子模型 在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */
    right: -8px;
    top: 0;
    /* 设置显示模式为块级元素 可以设置宽高 */
    display: block;
    /* 盒子模型尺寸为 1 x 15 像素 */
    width: 1px;
    height: 15px;
    /* 设置盒子的灰色背景 */
    background-color: #ccc;
}

.sou {
    /* 二倍精灵图 */
    /* 设置 精灵图中的放大镜图标 */
    /* 该图标是绝对定位 */
    position: absolute;
    /* 设置放大镜图标的 绝对定位位置 */
    top: 8px;
    left: 50px;
    /* 设置盒子模型尺寸 */
    width: 18px;
    height: 15px;
    /* 设置精灵图 以及精灵图中的放大镜图标位置 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    /* 此处将 二倍精灵图缩小了一倍 */
    background-size: 200px auto;
}

完整代码 :

a {
    /* 取消链接点击时的高亮效果 */
    -webkit-tap-highlight-color: transparent;
}

img,
a {
    /* 禁用 长按弹出菜单 */
    -webkit-touch-callout: none;
}

input {
    /* 设置 iOS 取消按钮的自定义样式 */
    -webkit-appearance: none;
}

div {
    /* 设置 CSS3 盒子模型样式 */
    box-sizing: border-box;
}

ul {
    /* 取消 ul 列表项的内外边距 */
    margin: 0;
    padding: 0;
    /* 取消列表项的样式 - 左侧的小圆点 */
    list-style: none;
}

img {
    /* 默认的图片对齐方式是基线对齐 只要不是基线对齐
       这里随便设置 顶部 / 底部 / 中部 对齐都可以 */
    vertical-align: middle;
}

a {
    /* 设置字体颜色值 */
    color: #666;
    /* 取消链接的底部横线样式 */
    text-decoration: none;
}

.clearfix:after {
    /* 清除浮动的固定样式
       如果要为某个容器清除浮动 
       为其设置 class="clearfix" 样式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

body {
    /* 网页布局宽度 = 设备宽度 */
    width: 100%;
    /* 最小宽度 320 像素 */
    min-width: 320px;
    /* 最大宽度 640 像素 */
    max-width: 640px;
    /* 居中对齐 */
    margin: 0 auto;
    /* 字体大小 14 像素 */
    font-size: 14px;
    /* 如果是苹果就是用苹果默认字体 
       如果不是苹果手机 就使用后啊面的字体 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字体颜色 */
    color: #666;
    /* 行高 */
    line-height: 1.5;
    background-color: gray;
}

.app {
    /* 设置顶部提示条高度 45 像素 */
    height: 45px;
}

.app ul li {
    /* 设置左浮动 令列表元素水平排列 */
    float: left;
    /* 设置高度 45 像素 = 行高 垂直居中 */
    height: 45px;
    line-height: 45px;
    /* 设置总体背景 */
    background-color: #333333;
    /* 文本水平居中 */
    text-align: center;
    /* 文本颜色白色 */
    color: #fff;
}

.app ul li:nth-child(1) {
    /* 关闭按钮 宽度占布局宽度 / 设备宽度 的 8% */
    width: 8%;
}

.app ul li:nth-child(1) img {
    /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */
    width: 10px;
}

.app ul li:nth-child(2) {
    /* 设置 Logo 宽度 10% */
    width: 10%;
}

.app ul li:nth-child(2) img {
    /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素
       高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */
    width: 30px;
    /* 默认的图片对齐方式是基线对齐 只要不是基线对齐
       这里随便设置 顶部 / 底部 / 中部 对齐都可以 */
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    /* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度 */
    width: 57%;
}

.app ul li:nth-child(4) {
    /* 右侧的 立即打开 红色按钮盒子 */
    width: 25%;
    background-color: #F63515;
}


/* 下面是搜索栏样式 */

.search-wrap {
    /* 第二排搜索栏样式 */
    /* 该样式在滑动时 , 始终在最上方显示 */
    position: fixed;
    /* 防止外边距塌陷进行的设置 */
    overflow: hidden;
    /* 搜索栏宽度充满全屏 */
    width: 100%;
    /* 搜索栏的高度为 44 像素 */
    height: 44px;
    /* 搜索栏最小宽度 320 像素 浏览器拉倒最小  该布局的宽度不低于 320 像素 */
    min-width: 320px;
    /* 搜索栏最大宽度 640 像素 浏览器拉到最大 该布局最大 640 像素 */
    max-width: 640px;
}

.search-btn {
    /* 左侧按钮布局 */
    /* 左侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 定位到左上角 */
    top: 0;
    left: 0;
    /* 设置盒子的尺寸 */
    width: 40px;
    height: 44px;
}

.search-btn::before {
    /* 在 指定的标签元素内部的 前面 插入内容 */
    /* 左侧按钮盒子中 插入 三 图片 */
    content: "";
    /* 显示模式设置为块级元素 */
    display: block;
    /* 盒子大小设置为 20 x 18 像素 */
    width: 20px;
    height: 18px;
    /* 设置背景 */
    background: url(../images/s-btn.png) no-repeat;
    /* 设置图片背景大小 */
    background-size: 20px 18px;
    /* 设置图像的外边距 */
    margin: 14px 0 0 15px;
}

.search-login {
    /* 右侧按钮布局 */
    /* 右侧按钮需要设置到左侧 使用绝对定位进行设置 */
    position: absolute;
    /* 盒子定位到右上角 */
    right: 0;
    top: 0;
    /* 布局尺寸 40 x 44 像素 */
    width: 40px;
    height: 44px;
    /* 文字颜色白色 */
    color: #fff;
    /* 行高 = 内容高度 垂直居中 */
    line-height: 44px;
}

.search {
    /* 中间部位搜索栏盒子内容 */
    /* 子绝父相 该容器的子容器需要绝对定位 因此父容器设置为相对定位 */
    position: relative;
    /* 搜索框高度 30 像素 */
    height: 30px;
    /* 白色字体 */
    background-color: #fff;
    /* 上下 0 像素外边距 左右 50 像素外边距 */
    margin: 0 50px;
    /* 左侧和右侧设置为 15 像素圆角 */
    border-radius: 15px;
    /* 将搜索布局居中放置 设置 7 像素上外边距 出现外边距塌陷 需要在父容器设置 overflow: hidden */
    margin-top: 7px;
}

.jd-icon {
    /* 搜索框中插入 JD 图标 */
    /* 设置 JD 图标的宽高 */
    width: 20px;
    height: 15px;
    /* 设置绝对定位 */
    position: absolute;
    /* 定位到左上角 距离顶部 8 像素  距离左侧编剧 13 像素 */
    top: 8px;
    left: 13px;
    /* 设置 JD 图片背景 */
    background: url(../images/jd.png) no-repeat;
    /* 设置背景图片的尺寸 会缩放背景图片 */
    background-size: 20px 15px;
}

.jd-icon::after {
    /* 插入竖线 */
    content: "";
    /* 竖线盒子模型 使用绝对定位 */
    position: absolute;
    /* 竖线盒子模型 在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */
    right: -8px;
    top: 0;
    /* 设置显示模式为块级元素 可以设置宽高 */
    display: block;
    /* 盒子模型尺寸为 1 x 15 像素 */
    width: 1px;
    height: 15px;
    /* 设置盒子的灰色背景 */
    background-color: #ccc;
}

.sou {
    /* 二倍精灵图 */
    /* 设置 精灵图中的放大镜图标 */
    /* 该图标是绝对定位 */
    position: absolute;
    /* 设置放大镜图标的 绝对定位位置 */
    top: 8px;
    left: 50px;
    /* 设置盒子模型尺寸 */
    width: 18px;
    height: 15px;
    /* 设置精灵图 以及精灵图中的放大镜图标位置 */
    background: url(../images/jd-sprites.png) no-repeat -81px 0;
    /* 此处将 二倍精灵图缩小了一倍 */
    background-size: 200px auto;
}

3、展示效果


在网页中 , 先进入 F12 调试模式 , 然后选择手机模式 , 在手机模式中打开开发的页面 ;

在这里插入图片描述

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

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

相关文章

2022年职业教育技能大赛网络安全 linux系统渗透提权

B-10&#xff1a;Linux 系统渗透提权 任务环境说明&#xff1a; ✓ 服务器场景&#xff1a;Server2202&#xff08;关闭链接&#xff09; ✓ 用户名&#xff1a;hacker 密码&#xff1a;123456 使用渗透机对服务器信息收集&#xff0c;并将服务器中 SSH 服务端口号作为 flag…

API 接口自动化测试的基本原理及实战教程

目录 常用API接口协议介绍 Http协议接口请求的介绍 HTTPS协议 SMTP协议 SNMP协议 FTP协议 API 接口自动化测试的基本原理 常用API接口协议介绍 HTTP协议 超文本传输协议 它是用来在Internet上传送超文本的传送协议&#xff0c;运行在TCP/IP协议族之上&#xff0c;它可…

Docker file镜像

目录 一、Docker镜像的创建 1、基于现有镜像创建 2、基于本地模版创建 3、基于Dockerfile创建 1、联合文件系统&#xff08;UnionFS&#xff09; ​编辑2、镜像加载原理 3、Dockerfile 4、Docker 镜像结构的分层 二、Dockerfile 操作常用的指令 &#xff08;1&#xf…

把树莓派改造成NAT软路由器

本文目录 1、查看网卡情况2、配置静态ip3、配置IP转发和SNAT功能3.1、开启Linux的报文转发功能 3.2、开启SNAT功能4、进阶配置4.1、如果WAN口(上行接口)eth0是动态分配的IP地址4.2、在LAN口上&#xff0c;给下游主机开启自动分配IP地址功能4.3、永久保存iptables, SNAT配置&…

Redis学习笔记02(主从同步,哨兵,哨兵集群)

数据同步&#xff1a;主从数据库如何保障数据一致性 redis具有高可靠性&#xff1a;1.数据尽量减少丢失&#xff08;AOF和RDB来保障&#xff09; 2.服务尽量减少中断.第二点通过增加冗余副本来保障。 读写分离&#xff1a; 减少保障数据一致性的开销。修改操作只会在主库上进…

《花雕学AI》解锁ChatGPT潜力!183个最佳提示语,助您充分利用人工智能技术

随着机器学习和自然语言处理技术的不断进步&#xff0c;人工智能在各个领域的应用越来越广泛。ChatGPT&#xff08;Generative Pre-trained Transformer&#xff09;是一个强大的自然语言生成模型&#xff0c;它可以帮助我们生成高质量的文本内容。本文为你列举了 183 种可能的…

【51单片机】DS1302时钟模块

&#x1f38a;专栏【51单片机】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【Waiting For Love】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 目录 &#x1f354;效果 &#x1f354;代码 main.…

Stable Diffusion 本地部署教程不完全指南

ChatGPT免费体验入口网址 http://chat.xutongbao.top 参考链接&#xff1a; ERROR: Could not find a version that satisfies the requirement torch1.7.0 ERROR: No matching……_congcongiii的博客-CSDN博客 下载链接&#xff1a; https://download.pytorch.org/whl/cu11…

VMware下centos7开机登陆页面死循环问题解决

文章目录 VMware下centos7开机登陆页面死循环问题详细解决解决 VMware下centos7开机登陆页面死循环问题详细解决 脚本中有reboot重启命令 并且给该脚本加上了开机自启动 因为在脚本中没有给重启做判断&#xff0c;运行脚本后就会一直重启 解决 在VMware下centos7开机页面按e键…

【Linux】如何实现单机版QQ,来看进程间通信之管道

学会了管道&#xff0c;就可以实现简单的qq哦~ 文章目录 前言一、匿名管道总结 前言 为什么要进行进程间通信呢&#xff1f;因为需要以下这些事&#xff1a; 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。 …

【五一创作】Linux---I2C应用编程

目录简述 前言&#xff1a; 一、I2C协议 &#xff08;1&#xff09;概述 &#xff08;2&#xff09;I2C硬件框架&#xff1a; &#xff08;3&#xff09;I2C软件框架 &#xff08;4&#xff09;I2C数据格式 二、SMBus协议 三、I2C系统重要的结构体 四、访问I2C设备&am…

欧姆龙NX/NJ系列PLC对接Oracle数据库,实现PLC与数据库双向数据通讯

智能网关IGT-DSER方便实现PLC与数据库之间的数据通讯&#xff0c;既可以读取PLC的数据上报到数据库&#xff0c;也可以从数据库查询数据后写入到PLC的寄存器。 网关安装在设备侧&#xff0c;与设备同时起停&#xff0c;不担心数据丢失&#xff1b;在断网、服务器维护上报数据有…

ID3算法报告理解笔记

专有名词解释&#xff1a; 决策树&#xff1a;决策树是根据已知若干条件&#xff0c;来对事件做出判断。从根节点到叶子结点。自上而下生成&#xff0c;每个决策或事件都可能引发两个或多个事件。将这些事件根据不同的特征进行划分&#xff0c;最后将类别分出&#xff0c;得到…

【Java校招面试】基础知识(四)——JVM

目录 前言一、基础概念二、反射三、类加载器ClassLoader四、JVM内存模型后记 前言 本篇主要介绍Java虚拟机——JVM的相关内容。 “基础知识”是本专栏的第一个部分&#xff0c;本篇博文是第四篇博文&#xff0c;如有需要&#xff0c;可&#xff1a; 点击这里&#xff0c;返回…

java 泛型知识整理

Java泛型这个特性是从JDK 1.5才开始加入的&#xff0c;因此为了兼容之前的版本&#xff0c;Java泛型的实现采取了“伪泛型”的策略&#xff0c;即Java在语法上支持泛型&#xff0c;但是在编译阶段会进行所谓的“类型擦除”&#xff08;Type Erasure&#xff09;&#xff0c;将所…

【网络协议详解】——GNS3的使用(学习笔记)

&#x1f4d6; 前言&#xff1a;在IT领域&#xff0c;网络协议的理解和掌握是至关重要的。GNS3和Wireshark是非常实用的工具&#xff0c;它们可以帮助你深入了解TCP/IP协议和网络的运作情况。 目录 &#x1f552; 1. 网络协议分析工具——GNS3&#x1f558; 1.1 快速上手&#…

磁盘和固态磁盘

磁盘和固态磁盘 磁盘的物理结构 ​ 磁盘的表面由一些磁性的物质组成&#xff0c;可以用这些磁性物质来记录二进制数据。磁盘的盘面被划分成一个个磁道&#xff0c;这样一个“圈”就是一个磁道。同一磁盘上不同磁道上记录的信息量相同&#xff0c;因此内侧磁道上的数据密度较大…

嵌入式C语言自我修养笔记1-ARM体系结构与编译运行

目录 ARM 体系结构ARM 体系结构ARM 汇编指令ARM 寻址方式ARM 伪指令C 与汇编混合编程 程序编译链接与安装运行预处理过程编译过程链接过程程序安装apt-get链接静态库动态链接共享库插件工作原理Linux 内核模块运行机制Linux 内核编译与启动分析 ARM 体系结构 ARM 体系结构 AR…

计算机基础书籍

一操作系统 二常见问题总结 1.操作系统的特征&#xff1f; 并发、共享、虚拟、异步性 2.进程阻塞与唤醒的条件 等待 I/O 操作完成请求系统资源失败等待信号量或事件等待子进程结束被高优先级进程抢占 3.如何避免死锁&#xff1f; 1、避免资源竞争 2、破坏循环等待条件 3、优…

【云原生网关】Kong 使用详解

目录 一、前言 二、Kong介绍 三、Kong核心组件 3.1 kong组件介绍 3.1.1 Kong Server 3.1.2 Apache Cassandra/PostgreSQL 3.1.3 Kong dashboard 3.2 传统网关与Kong工作模式对比 四、Kong网关特征与架构 4.1 kong网关特征 4.1.1 可扩展性 4.1.2 模块化 4.1.3 在任…