前端笔记-day12

news2024/11/25 10:24:34

文章目录

    • 01-视口
    • 02-宽度适配方案
    • 03-rem体验
    • 04-rem基本使用
    • 05-媒体查询
    • 06-rem适配
    • 07-rem布局
    • 08-less-体验
    • 09-less-注释
    • 10-less-运算
    • 11-less-嵌套
    • 12-less-变量
    • 13-less-导入
    • 14-less-导出
    • 15-less-禁止导出
    • 16-急速问诊(不准确写法)
      • index.html
      • index.css
    • 17-急速问诊
      • index.html
      • index.css
      • base.less
      • index.less

01-视口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 视口标签:规定HTML的尺寸,让HTML的宽度 = 逻辑分辨率的宽度/设备的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

02-宽度适配方案

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .toolbar{
            position: fixed;
            left: 0;
            bottom: 0;
            /* 固定定位之后就变成了行内块的特点,宽度需要靠内容撑开,所以我们需要设置宽度 */
            width: 100%;
            /* 宽度可以自适应但高度需要设置 */
            height: 50px;
            background-color: pink;
        }
        .toolbar ul{
            display: flex;
        }
        .toolbar ul li{
            height: 50px;
            width: 25%;
            text-align: center;
        }
        .toolbar li img{
            height: 50px;
        }
    </style>
</head>
<body>
    <!-- 宽度自适应用到移动端 PC端 -->
    <!-- 等比例自适应用到移动端 -->
    <div class="toolbar">
        <ul>
            <li>
                <a href="#"><img src="./images/index.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/classify.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/car.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/login.png" alt=""></a>
            </li>
        </ul>
    </div>
</body>
</html>

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

03-rem体验

<!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>
        div{
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>

    <script src="./js/flexible.js"></script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

04-rem基本使用

<!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>
        *{
            padding: 0;
            width: 0;
        }
        html{
            font-size: 30px;
        }
        div{
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

05-媒体查询

<!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>
        @media(width:375.2px){
            body{
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

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

06-rem适配

<!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>
        /* @media(max-width:360px){
            这个标签是html不是body 别写错了 
            html{
                font-size: 36px;
            }
        } */
        .box{
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="./js/flexible.js"></script>
</body>
</html>

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

07-rem布局

<!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>
        div{
            width: 1.813rem;
            height: 0.773rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="./js/flexible.js"></script>
</body>
</html>

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

08-less-体验

.father{
    color: red;
    width: (68/37.5rem);
    .son{
        height: (29/37.5rem);
    }
}
.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  height: 0.77333333rem;
}

09-less-注释

// zheshi注释
/* 
多行注释
*/
/* 
多行注释
*/

10-less-运算

.box{
    width: 100 + 20px;
    width: 100 - 20px;
    width: 10 * 20px;
    width: (100/10px);
    width: 100 ./20px;
    width: (68 / 37.5rem);

    /* 有两个单位 以第一个单位为准 */
    height: (29px / 37.5rem);
}
.box {
  width: 120px;
  width: 80px;
  width: 200px;
  width: 10px;
  width: 5px;
  width: 1.81333333rem;
  /* 有两个单位 以第一个单位为准 */
  height: 0.77333333px;
}

11-less-嵌套

.father{
    width: 200px;
    .son{
        background-color: pink;
        a{
            color: aqua;
            /* 
                &表示当前选择器,代码写到谁的大括号里面就表示谁->不会生成后代选择器
                应用:配合hover伪类或nth-child结构伪类使用
             */
            &:hover{
                color: chocolate;
            }
        }
    }
}
.father {
  width: 200px;
}
.father .son {
  background-color: pink;
}
.father .son a {
  color: aqua;
  /* 
                &表示当前选择器,代码写到谁的大括号里面就表示谁->不会生成后代选择器
                应用:配合hover伪类或nth-child结构伪类使用
             */
}
.father .son a:hover {
  color: chocolate;
}

12-less-变量

// 定义变量
@myColor:green;

// 使用变量
.box{
    color: @myColor;
}
a{
    color: @myColor;
}
p{
    color: @myColor;
}
.box {
  color: green;
}
a {
  color: green;
}
p {
  color: green;
}

13-less-导入

@import "./08-less-体验.less";
@import "./12-less-变量";
.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  height: 0.77333333rem;
}
.box {
  color: green;
}
a {
  color: green;
}
p {
  color: green;
}

14-less-导出

// out:./mycss/index.css


// out:./css/

// out:./index.css

15-less-禁止导出

// out:false

16-急速问诊(不准确写法)

index.html

<!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="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .bottom{
            margin-top: 0.5rem;
            margin-left: 0.7rem;
            display: flex;
            width: 100%;
            height: 2rem;
            font-size: 0.45rem;
            align-items: center;
        }
        .bottom img{
            width: 1rem;
            height: 1rem;
            margin-right: 0.4rem;
        }
        .bottom p{
            margin-top: 0.15rem;
            font-size: 0.3rem;
            color: gray;
        }
        .bottom .iconfont{
            position: absolute;
            right: 0.5rem;
            color: darkgray;
            font-size: 0.4rem;
        }
    </style>
</head>
<body>
    <!-- 顶部时间  wifi 信号 电量 -->
    <div class="top">
        <p>9:41</p>
        <div class="span">
            <span class="iconfont icon-xinhao"></span>
            <span class="iconfont icon-xinhao1"></span>
            <span class="iconfont icon-80dianliang"></span>
        </div>
    </div>

    <!-- 标题栏 -->
    <div class="title">
        <span class="iconfont icon-fanhui"></span>
        <h4>急速问诊</h4>
        <a href="#">问诊记录</a>
    </div>

    <!-- banner区域 -->
    <div class="banner">
        <img src="./assets/entry.png" alt="">
        <p>
            <span class="span">20s</span>
            <span>快速匹配专业医生</span>
        </p>
    </div>

    <!-- 底部选择栏 -->
    <div class="bottom">
        <img src="./assets/type01.png" alt="">
        <div class="p">
            <h4>三甲文问诊</h4> 
            <p>三甲主治及以上级别医生</p>
        </div>
        <span class="iconfont icon-fanhui"></span>
    </div>

    <div class="bottom">
        <img src="./assets/type02.png" alt="">
        <div class="p">
            <h4>三甲文问诊</h4> 
            <p>三甲主治及以上级别医生</p>
        </div>
        <span class="iconfont icon-fanhui"></span>
    </div>

    <script src="../js/flexible.js"></script>

</body>
</html>

index.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
.top{
    display: flex;
    width: 100%;
    height: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    font-weight: 700;
    margin-left: 0.6rem;
}
.top .span{
    text-align: right;
    margin-right: 0.8rem;
}
.iconfont{
    color: black;
    font-size: 0.5rem;
}

.title{
    display: flex;
    width: 100%;
    height: 2rem;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
.title h4{
    font-size: 0.55rem;
    margin-right: auto;
    flex: 1;
}
.title a{
    display: block;
    font-size: 0.41rem;
    margin-left: auto;
    color: darkturquoise;
}

.banner{
    width: 80%;
    margin: 0 auto;
    /* text-align: center; */
}
.banner img{
    width: 100%;
}
.banner p{
    display: flex;
    font-size: 0.55rem;
    justify-content: center;
}
.banner .span{
    color:darkturquoise;
   
}

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

17-急速问诊

在这里插入图片描述

index.html

<!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="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./js/flexible.js">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <a href="#" class="back"><span class="iconfont icon-left"></span></a>
        <h3>急速问诊</h3>
        <a href="#" class="note">问诊记录</a>
    </header>

     <!-- banner区域 -->
    <div class="banner">
        <img src="./assets/entry.png" alt="">
        <p><span>20s</span>快速匹配医生</p>
    </div>

    <!-- 问诊类型 -->
    <div class="type">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./assets/type01.png" alt="">
                    </div>
                    <div class="text">
                        <h4>三甲图文问诊</h4>
                        <p>三甲主治医生及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./assets/type02.png" alt="">
                    </div>
                    <div class="text">
                        <h4>普通图文问诊</h4>
                        <p>二甲主治医生及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/flexible.js"></script>
</body>
</html>

index.css

*,
::after,
::before {
  box-sizing: border-box;
}
body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
img {
  vertical-align: bottom;
}
ul {
  list-style-type: none;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
header {
  display: flex;
  height: 1.17333333rem;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
}
header .icon-left {
  font-size: 0.58666667rem;
}
header h3 {
  font-size: 0.45333333rem;
}
header .note {
  font-size: 0.4rem;
  color: #2cb5a5;
}
.banner {
  text-align: center;
  padding: 0.8rem 1.8rem 1.04rem 1.8rem;
}
.banner img {
  width: 6.4rem;
  height: 5.49333333rem;
  margin-bottom: 0.48rem;
}
.banner P {
  font-size: 0.42666667rem;
}
.banner P span {
  color: #16C2A3;
}
.type {
  padding: 0 0.4rem;
}
.type li {
  padding: 0 0.4rem;
  margin-bottom: 0.4rem;
  height: 2.08rem;
  border-radius: 0.10666667rem;
  border: 0.5px solid #EDEDEDE5;
}
.type li a {
  display: flex;
  align-items: center;
  height: 2.08rem;
}
.type li a img {
  margin-right: 0.37333333rem;
  width: 1.06666667rem;
  height: 1.06666667rem;
}
.type li a .text {
  flex: 1;
}
.type li a .text h4 {
  margin-bottom: 0.10666667rem;
  font-size: 0.42666667rem;
  color: #3C3E42;
  line-height: 24px;
}
.type li a .text p {
  font-size: 0.34666667rem;
  color: #848484;
}
.type li a span {
  font-size: 0.42666667rem;
}

base.less

*,
::after,
::before {
  box-sizing: border-box;
}

body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    PingFangSC-Regular,
    "PingFang SC",
    "Microsoft YaHei",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  color: #333;
}

img {
  vertical-align: bottom;
}

ul {
  list-style-type: none;
}

a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

index.less

// out :../css/
@import "./base.less";


// 定义变量
@rootSize:37.5rem;

header{
    display: flex;
    height: (44/@rootSize);
    justify-content: space-between;
    align-items: center;
    // line-height: ;
    // background-color: pink;
    padding: 0 (15 / @rootSize);
    .icon-left{
        font-size: (22 / @rootSize);
    }
    h3{
        font-size: (17 / @rootSize);
    }
    .note{
        font-size: (15 / @rootSize);
        color: #2cb5a5;
    }

}

// banner区域
.banner{
    text-align: center;
    padding: (30/@rootSize) (67.5/@rootSize) (39/@rootSize) (67.5/@rootSize);
    // 修改margin-top和margin-bottom
    img{
        width: (240/@rootSize);
        height: (206/@rootSize);
        margin-bottom: (18/@rootSize);
    }
    P{
        font-size: (16/@rootSize);
        span{
            color: #16C2A3;
        }
    }
}

// 问诊类型
.type{
    padding: 0 (15 / @rootSize);
    li{
        padding: 0 (15 / @rootSize);
        margin-bottom: (15 / @rootSize);
        height: (78 / @rootSize);
        border-radius: (4 / @rootSize);
        border: 0.5px solid #EDEDEDE5;
        a{
            display: flex;
            align-items: center;
            // a必须要有高度 垂直方向居中才能生效
            height: (78 / @rootSize);
            img{
                margin-right: (14 / @rootSize);
                width: (40 / @rootSize);
                height: (40 / @rootSize);
            }
            .text{
                flex: 1;
                h4{
                    margin-bottom: (4 / @rootSize);
                    font-size: (16 / @rootSize);
                    color: #3C3E42;
                    line-height: 24px;
                }
                p{
                    font-size: (13 / @rootSize);
                    color: #848484;
                }
            }
            span{
                font-size: (16 / @rootSize);
            }
        }
    }
}

在这里插入图片描述

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

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

相关文章

新章节:全设备通用调度算法-通讯重构

新章节&#xff1a;全设备通用调度算法-通讯重构 文章目录 新章节&#xff1a;全设备通用调度算法-通讯重构前言一、重构了TCP和UDP通讯二、优化了OPC和OPCUA三、升级了监控客户端四、升级了通讯的图形化其他升级 前言 现在真的很懒也很少写代码了&#xff0c;写代码和更新进度…

Laravel5+mycat 报错 “Packets out of order”

背景 近期对负责项目&#xff0c;配置了一套 主从复制的 MySQL 集群 使用了中间件 mycat 但测试发现&#xff0c;替换了原来的数据连接后&#xff0c;会出现 Packets out of order 的报错 同时注意到&#xff0c;有的框架代码中竟然也会失效&#xff0c;比如 controller 类中&…

智慧园区可视化:构建全方位智能管理体系

通过图扑的 2D、 3D 和 GIS 可视化技术结合倾斜摄影、数字孪生和视频融合等技术&#xff0c;将园区各类数据集成展示&#xff0c;实时监控和分析环境与设施状况&#xff0c;提升管理效能和安全水平&#xff0c;实现智慧园区的全方位智能化运营。

vscode python调试,找不到控制调试工具栏,被隐藏了

问题&#xff1a; 如图所示&#xff0c;最开始蓝框中的调试台被莫名其妙的隐藏了&#xff0c;没法进行调试。 解决办法&#xff1a; 打开设置输入调试点击调试&#xff08;31&#xff09;找到红框选的那个选项&#xff0c;选择floating

多步预测模型大更新

往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;Transformer-BiGRU预测模型-CSDN博客 独家原创 | 基于TCN-SENet BiGRU-GlobalAttention并行预测模型-CSDN博客 独家原创 | B…

正交的拉丁方阵(MOLS)

在组合数学中&#xff0c;如果两个同阶的拉丁方阵叠加后&#xff0c;每个位置上的有序对条目都是唯一的&#xff0c;则这两个拉丁方阵被称为正交的。 如果一组同阶的拉丁方阵中&#xff0c;任意两个方阵都是正交的&#xff0c;则这组方阵被称为一组相互正交的拉丁方阵&#xf…

SSM高校学生综合测评系统-计算机毕业设计源码16154

摘要 随着互联网时代的到来,同时计算机网络技术高速发展,网络管理运用也变得越来越广泛。因此,建立一个BS 结构的高校学生综合测评系统,会使高校学生综合测评系统工作系统化、规范化,也会提高高校学生综合测评系统平台形象,提高管理效率。 本学生综合测评系统是针对目前高校学生…

.Net C#执行JavaScript脚本

文章目录 前言一、安装二、执行 JavaScript 脚本三、与脚本交互四、JS 调用 C# 方法五、多线程使用总结 前言 ClearScript 是一个 .NET 平台下的开源库&#xff0c;用于在 C# 和其他 .NET 语言中执行脚本代码。它提供了一种方便和安全的方法来将脚本与应用程序集成&#xff0c;…

CVE-2024-6387 分析

文章目录 1. 漏洞成因2. 漏洞利用前置知识2.1 相关 SSH 协议报文格式2.2 Glibc 内存分配相关规则 3. POC3.1 堆内存布局3.2 服务端解析数据时间测量3.3 条件竞争3.4 FSOP 4. 相关挑战 原文链接&#xff1a;个人博客 近几天&#xff0c;OpenSSH爆出了一个非常严重的安全漏洞&am…

软件开发中常用的11款bug记录、跟踪、管理系统对比【2024更新】

软件开发项目的复杂性不断增加&#xff0c;有效的bug管理变得尤为关键。对开发团队而言&#xff0c;没有什么比选择一款合适的Bug跟踪工具更重要的了。工具的功能、界面友好度、整合能力及成本都是决策的关键因素。 1、PingCode 推荐指数&#xff1a;五星 简介&#xff1a;P…

常微分方程算法之编程示例十一-两点狄利克雷边值问题(紧差分法)

目录 一、研究问题 二、C++代码 三、计算结果 一、研究问题 本节我们采用紧差分法对示例八中的两点狄利克雷边值问题进行外推求解,相应的原理及推导思路请参考: 常微分方程算法之高精度算法(Richardson法+紧差分法)_richardson外推法-CSDN博客https://blog.csdn.net/L_…

python gdal 压缩栅格数据

1 压缩方法LZW 使用 LZW&#xff08;Lempel-Ziv-Welch&#xff09;&#xff0c;主要对图像数据压缩&#xff0c;可逆 2 代码 函数gdal_translate()&#xff1a;转换栅格的不同格式 我们使用的数据是GTiff格式的数据 GTiff – GeoTIFF File Format — GDAL documentation 参…

秒拿AI模型API Key!Chat2DB AI模型切换实用秘籍

智谱AI&#xff08;ZhiPu AI&#xff09; 智谱 AI 是由清华大学计算机系技术成果转化而来的公司&#xff0c;致力于打造新一代认知智能通用模型。 1.申请调用权限 智谱AI开放平台网址&#xff1a;https://open.bigmodel.cn/ 点击开始使用&#xff0c;进行登录/注册。 智谱A…

I方C是什么啊,老是听到他们说

首先说一下串口通讯&#xff0c;只能在两个设备之间进行&#xff0c;如下图&#xff1a; 若三个设备相互通讯&#xff0c;则每个设备需要两组串口。它们其实是三组相互独立的串口通讯。如下图&#xff1a; 若是四个设备相互通讯就更麻烦了&#xff0c;以此类推。这样一来&#…

【CUDA】 矩阵乘向量 matVecMul

Matrix - Vector Multiplication 矩阵-向量乘法是线性代数中的基本操作。它用于将一个矩阵与一个向量相乘。乘法的结果是与输入向量大小相同的向量。 矩阵和向量的乘法如图1所示。 图1 基础kernel与共享内存kernel 执行矩阵-向量乘法的基础kernel是使用单个线程执行输出向量…

教育行业的网络安全:保护学生数据与防范网络欺凌

在数字化的春风中&#xff0c;教育行业迎来了知识的繁花似锦&#xff0c;然而&#xff0c;随之而来的网络安全风暴也悄然逼近。学生数据的脆弱性与网络欺凌的阴影交织成一幅复杂的画卷&#xff0c;呼唤着教育工作者与技术专家共同编织一张密不透风的网络安全之网。本文深入探讨…

深度之眼(二十九)——神经网络基础知识(四)-循环神经网络

文章目录 一、 学习目标二、序列数据三、语言模型四、循环神经网络4.1 RNN的反向传播 五、门控循环单元-GNU5.1 候选隐藏状态 六、长短期记忆网络-LSTM七、回顾 一、 学习目标 二、序列数据 序列数据是常见的数据类型&#xff0c;前后数据通常具有关联性 三、语言模型 综合…

前后端分离:四种开发模式与实践指南

前后端分离&#xff1a;四种开发模式与实践指南 什么是前后端分离 当业务变得越来越复杂或产品线越来越多时&#xff0c;原有的开发模式就无法满足业务需求了。 产品越来越多&#xff0c;展现层的变化越来越快、越来越多&#xff0c;此时应该进行前后端分离的分层抽象&#…

【C语言】break 关键字

当在C语言中使用break关键字时&#xff0c;它通常用于两种主要情况&#xff1a;在循环中和在switch语句中。让我们详细看看每种情况下的用法和作用。 在循环中的使用&#xff1a; 在循环中&#xff0c;break语句的作用是立即终止当前所在的循环&#xff0c;然后跳出循环体执行…