天堂路上
天堂路上

旺财速啃H5框架之Bootstrap（四）

上一篇<<旺财速啃H5框架之Bootstrap（三）>>已经把导航做了，接下来搭建内容框架....

对于不规整的网页，要做成自适应就有点玩大了.... 例如下面这种版式的页面....

 旺财速啃H5框架之Bootstrap（四）_第1张图片

 

对于这样的网站，要做成自适应，那你得多花点精力了，当然我不讲这个。。。

 

所以这里肯定是对那种“列很规律”的网站，例如cnblogs首页的版式，分左，中，右

 旺财速啃H5框架之Bootstrap（四）_第2张图片

 

由于中国传统艺术版本，或习惯什么的，很多东西都讲对称性，所以几乎所有网站都是很规律的，说多了，直接上（这里我只写主要CSS）

<div class="container">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>

Container定义了一个容器，看相关CSS定义：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

在768px以上，宽度固定750px

在992px以上，宽度固定970px

在1200px以上，宽度固定1170px

可以看出在电脑上容器宽度都是固定的

 

如果你不想做这种固定宽度，而是全屏的页面，那么定义container容器就不行了，外面的容器宽度就得是百分比形式。

下面我改进：

<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>

注意：采用的是CSS重写（覆盖），引入CSS的时候一定要放到bootstrap.min.css的后面

我这里就直接写在页面上了,看我写的CSS样式：

.wrap{
  width:100%;  /* 覆盖container的宽度 */
}
.wrap .left{
  width:14%;
  margin-right:1%;
}
.wrap .center{
  width:65%;
}
.wrap .right{
  margin-left:1%;
  width:19%;
}
/* 最大宽度768的设备，只显示中间，其它情况自己添加，注意先后顺序。 */
@media (max-width: 768px) {
  .wrap .center{
     width:100%;
  }
  .wrap .left,.wrap .right{
     display:none;
  }
}

这里我就不去详细考虑每一个设备情况了。

完整案例来一个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
    .col{min-height: 580px; float: left;}
    .left,.right{background-color: #e6e6e6;}
    .center{background: #000;}
    .row{margin: 0;}
    .wrap{
      width:100%;  /* 覆盖container的宽度 */
    }
    .wrap .left{
      width:14%;
      margin-right:1%;
    }
    .wrap .center{
      width:65%;
    }
    .wrap .right{
      margin-left:1%;
      width:19%;
    }
    /* 最大宽度768的设备，只显示中间 */
    @media (max-width: 768px) {
      .wrap .center{
         width:100%;
      }
      .wrap .left,.wrap .right{
         display:none;
      }
    }

    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand active" href="javascript:;">教程</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:;">iOS</a></li>
                <li><a href="javascript:;">SVN</a></li>
                <li class="dropdown">
                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">jmeter</a></li>
                        <li><a href="javascript:;">EJB</a></li>
                        <li><a href="javascript:;">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>
</body>
</html>

查询效果：《猛点这里》

改变窗口大小看效果

如果你想做得更加到位，页面缩放后版式更加和谐，你可以更详细的针对不同设备写不现的样式，但要注意先后顺序哦~~~

 

OK，框架搭建好了，这些框架仅仅是“整体框架”，就好比房子的地基、梁柱之类的，那么接下来向里面插入“内容框架”，内容框架当然是直接或间接与内容有关系的框架

当大框架没有固定宽度的情况下，里面的内容框架宽度能固定宽度么？要记住，外面的框架在没有宽度的情况是会被里面的内容影响的（特别指浮动元素），块元素的话不用设置宽度，就让它默认为父容器的宽度就OK。

有的人发现上面有点问题：

旺财速啃H5框架之Bootstrap（四）_第3张图片

缩小后，出现下拉导航会把下面给抵下去。。。   这种问题自己都能解决的吧，不是大问题，我也只能说，“你”太懒了，这样学东西可不行。。。   OK~~~ ，我稍微调整一下，看下面完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
    .col{min-height:580px; float: left;}
    .left,.right{background-color: #e6e6e6;}
    .center{background: #000;}
    .row{margin: 0;}
    .wrap{
      width:100%;  /* 覆盖container的宽度 */
    }
    .wrap .left{
      width:14%;
      margin-right:1%;
    }
    .wrap .center{
      width:65%;
    }
    .wrap .right{
      margin-left:1%;
      width:19%;
    }
    /* 最大宽度768的设备，只显示中间 */
    @media (max-width: 768px) {
      .wrap .center{
         width:100%;
      }
      .wrap .left,.wrap .right{
         display:none;
      }
      .container-fluid{
          position: relative;
      }
      .navbar-collapse{
          position: absolute;
          width: 100%;
          background-color: #FFF;
      }
    }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand active" href="javascript:;">教程</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:;">iOS</a></li>
                <li><a href="javascript:;">SVN</a></li>
                <li class="dropdown">
                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">jmeter</a></li>
                        <li><a href="javascript:;">EJB</a></li>
                        <li><a href="javascript:;">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container wrap">
    <div class="row" >
        <div class="col left"></div>
        <div class="col center"></div>
        <div class="col right"></div>
    </div>
</div>
</body>
</html>

查询效果：《猛点这里》

相信你已经知道自适应是怎么回事了吧，是不是不用框架也能去写了呢？ 如果不行的话，接受留级吧~~~，你的问题是不是在于：不自学、不总结、不脚踏实地、只看不练、不…只ctrl+v，不查手册只度娘… ……………………………….不想说你了。。。

今天over~~~

你可能感兴趣的:(旺财速啃H5框架之Bootstrap（四）)

  • 使用 OkHttp 与 FastJSON 发送 POST 请求 李少兄 Javaokhttpjava
    目录前言一、依赖配置Maven依赖配置Gradle依赖配置二、常量定义三、学生对象定义四、常规情况：发送单个学生信息代码实现代码解释五、多线程情况：发送多个学生信息线程池基础知识代码实现代码解释六、注意事项和优化建议常规情况异步请求处理多线程情况前言在现代Java开发中，与外部服务进行数据交互是极为常见的需求。其中，发送HTTPPOST请求以提交数据更是屡见不鲜。OkHttp作为一款高效且功能强大
  • Self-Attention 中的 Q / K / V 有人给我介绍对象吗 文献阅读专栏深度学习
    Self-Attention中的Q/K/V没问题！你能继续追问就说明真的在思考了我再用一个更形象、生活化的类比来讲一下Self-Attention中的Q/K/V，你一定能懂。✅更生动的类比：课堂里学生讨论问题想象一个场景：你在教室里，四个学生正在讨论一个问题，每个人都在听别人说话，同时思考谁讲的内容最值得我听。每个学生都扮演三个角色：含义角色说明Q（Query）我在“主动”问：谁对我来说重要？K（
  • PyTorch深度学习框架进阶学习计划 - 第21天：自然语言处理基础 凡人的AI工具箱 深度学习pytorch学习人工智能AI编程AIGC自然语言处理
    PyTorch深度学习框架进阶学习计划-第21天自然语言处理基础今天我们将深入学习自然语言处理(NLP)的基础概念，重点关注词嵌入技术、序列建模原理以及主流模型之间的区别和优缺点。通过理解这些基础知识，你将能够更好地应用PyTorch构建NLP应用。1.词嵌入原理与实现词嵌入(WordEmbeddings)是NLP中的核心概念，它将单词映射到连续向量空间，使得语义相似的词在向量空间中距离较近。为什
  • PyTorch深度学习框架60天进阶学习计划 - 第19天：时间序列预测 凡人的AI工具箱 深度学习pytorch学习人工智能AI编程迁移学习python
    PyTorch深度学习框架60天进阶学习计划-第19天：时间序列预测目录时间序列预测概述滑动窗口数据构造方法归一化策略对比：MinMaxvsZ-ScoreLSTM基础原理Attention机制与LSTM结合LSTM-Attention模型实现TeacherForcing技术与应用Prophet基准模型对比多步预测的滚动验证方法综合实战：股票价格预测1.时间序列预测概述时间序列预测是机器学习中的一个
  • PyTorch深度学习框架60天进阶学习计划 - 第18天：模型压缩技术 凡人的AI工具箱 深度学习pytorch学习python人工智能
    PyTorch深度学习框架60天进阶学习计划-第18天：模型压缩技术目录模型压缩技术概述知识蒸馏详解软标签生成策略KL散度损失推导温度参数调节结构化剪枝技术通道剪枝评估准则L1-norm剪枝算法APoZ剪枝算法量化训练基础量化类型与精度PyTorch量化API剪枝与量化协同优化Torch.fx动态计算图修改自动化模型压缩流程实现实战案例：ResNet模型压缩性能评估与分析进阶挑战与思考1.模型压缩
  • python web开发django库安装与使用 范哥来了 python前端django
    下面我将指导您如何安装Django库以及基本的使用方法。Django是一个高级的PythonWeb框架，它鼓励快速开发和干净、实用的设计。以下是详细的步骤：1.安装Django首先，确保您的系统上已经安装了Python和pip（Python的包管理工具）。然后，您可以使用pip来安装Django。pipinstalldjango如果您想安装特定版本的Django，可以指定版本号，例如：pipins
  • 信息学奥赛一本通 1395：烦人的幻灯片(slides) 第四章 图论 长春高老师编程 信息学奥赛一本通-数据结构图论算法
    1395：烦人的幻灯片(slides)时间限制:1000ms内存限制:65536KB【题目描述】李教授将于今天下午作一次非常重要的演讲。不幸的事他不是一个非常爱整洁的人，他把自己演讲要用的幻灯片随便堆在了一起。因此，演讲之前他不得不去整理这些幻灯片。作为一个讲求效率的学者，他希望尽可能简单地完成它。教授这次演讲一共要用n张幻灯片（nusingnamespacestd;structnode{intx
  • Java 集合框架：数据管理的强大工具 进一步有进一步的欢喜 java
    Java集合框架：数据管理的强大工具目录Java集合框架：数据管理的强大工具引言一、Set集合1.定义与特点2.常用实现类-HashSet创建方式常用方法遍历方式二、Map集合1.定义与特点2.常用实现类-HashMap创建方式常用方法遍历方式三、List集合1.定义与特点2.常用实现类-ArrayList创建方式常用方法遍历方式四、Set、Map和List的对比相同点不同点引言Java集合框架提
  • Python爬虫学习笔记_DAY_26_Python爬虫之requests库的安装与基本使用【Python爬虫】_requests库ip 苹果Android开发组 程序员python爬虫学习
    最后Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习Python门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的Pytho
  • Ubuntu18.04系统新手入门 糖糖不是堂 ubuntulinuxubuntu
    Ubuntu18.04系统新手入门Ubuntu系统介绍Ubuntu系统与Windows系统的区别介绍Ubuntu之灵魂：命令行语句常用启动终端的方法：我的Ubuntu18.04系统入门下载支持Linux系统的deb文件并安装Linux文件管理对比Windows系统常用Linux系统快捷键Ubuntu编程入门第一个C++程序：hello.cpp关于Ubuntu中程序存储位置使用vim或CodeBlo
  • NPM安装与配置全流程详解（2025最新版） ╰つ゛木槿 web前端npm前端node.js
    写目录一、环境准备与Node.js安装1.下载Node.js（含NPM）2.验证安装二、NPM核心配置优化1.全局模块与缓存路径设置2.镜像加速3.代理配置（企业网络适用）三、NPM基础操作指南1.项目初始化2.包管理命令3.依赖锁定与版本管理四、进阶配置与工具1.权限问题解决2.缓存清理3.替代工具推荐五、常见问题排查1.安装失败场景2.脚本执行权限（Windows）六、最佳实践建议一、环境准备
  • Spring Boot Bromide-0 #Spring框架springbootjava
    文章目录1.关于SpringBoot2.创建SpringBoot工程3.SpringBoot工程的结构4.在SpringBoot工程中使用Mybatis5.关于Profile配置6.关于YAML配置7.使用Druid数据库连接池8.编写持久层（数据访问层）代码9.关于业务逻辑层（Service层）10.使用Lombok框架11.Slf4j日志框架12.密码加密13.控制器层开发14.Validat
  • 测试直播web自动化所学 one day321 自动化运维
    web框架封装web自动化开始：用电脑替代人工测试。日常人工测试——先点击XX输入XXX。。。页面是否符合预期自动化测试的编码：web自动化，Selenium[常用测试库]Selenium，每个页面，是由元素组成的。html构成。selenium：每个元素都可以被操作，自动化测试，找到元素，操作元素selenium：八大元素定位方式，操作函数1.打开对应的浏览器。2.输入网址3.找到对应的元素，进
  • AI面试助手大比拼：多面鹅、智面星和Offerin AI实测 offer收割机小鹅 人工智能
    金三银四，求职旺季如约而至。对众多求职者而言，面试往往是整个求职过程中最具挑战性的环节。在面试官的犀利目光下，清晰且有条理地展现自身优势至关重要。那么，如何让面试变得游刃有余呢？随着人工智能技术的飞速发展，市场上涌现出了一批专为求职者量身定制的AI面试助手。这些工具声称能够帮助求职者熟悉面试流程、预测面试问题，甚至还能提供针对性的回答建议。小编亲自体验了几款热门的AI面试助手，试图一探究竟：它们究
  • AI编程方法第二弹：边提问边调整 leeshuqing AI编程AI编程
    AI编程的提问词非常类似于传统搜索引擎中的检索词，虽然采取了自然语言表示，但是在获取结果的策略上却很一致。因为用户在一开始可能并不非常清楚AI编程工具如何理解用户的提问，因此输出结果可能并不能完全满足用户要求，此时用户可以不断的根据生成结果，动态的灵活的调整提问，使之不断趋近于自己满意的结果。比如，对于“Python”等任意英文单词，允许用户指定总宽度后，通过自动填充空格，使之总宽度尽可能等于该宽
  • 从零开始搭建搜索推荐系统（五十四）多路召回之万剑归宗 hanyi_ 搜索推荐javajava搜索系统
    聊的不止技术。跟着小帅写代码，还原和技术大牛一对一真实对话，剖析真实项目筑成的一砖一瓦，了解最新最及时的资讯信息，还可以学到日常撩妹小技巧哦，让我们开始探索主人公小帅的职场生涯吧！（PS：本系列文章以幽默风趣风格为主，较真侠和杠精请绕道~）一、奶茶引发的血案（会议室里，行服小姐姐把笔记本往桌上一拍，屏幕上是密密麻麻的搜索日志）行服姐姐："小帅！你自己看看！用户搜'朝阳区低糖芝士草莓冰沙'，你家系统
  • Python 网络编程实战：5分钟实现多线程下载工具与 Web 服务器 吴师兄大模型 pythonWeb服务器多线程下载工具网络编程人工智能开发语言PYTHON
    Langchain系列文章目录01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南02-玩转LangChainMemory模块：四种记忆类型详解及应用场景全覆盖03-全面掌握LangChain：从核心链条构建到动态任务分配的实战指南04-玩转LangChain：从文档加载到高效问答系统构建的全程实战05-玩转LangChain：深度评估问答系统的三种高效方法（示例生成、手
  • flutter 如何与原生框架通讯安卓 和 ios 爱学习的大牛123 flutterflutter与原生通讯
    在Flutter中与原生框架（Android和iOS）进行通信的主要方式是通过**平台通道（PlatformChannels）**。平台通道允许Flutter代码与原生代码进行双向通信。以下是详细的步骤和示例，说明如何在Flutter中与Android和iOS原生代码进行通信。###1.平台通道的基本概念平台通道是Flutter提供的一种机制，允许Dart代码与原生代码（Java/Kotlinfo
  • 交通工具驱动电机技术解析：电瓶车、汽车、地铁与高铁的电机对比 【云轩】 汽车单片机stm32
    点击下面图片，为您提供全新的嵌入式学习路线文章目录@[TOC](文章目录)一、引言二、电瓶车：直流无刷电机（BLDC）三、电动汽车：永磁同步电机（PMSM）与感应电机1.永磁同步电机（主流选择）2.交流异步电机（特殊场景）四、地铁：交流异步牵引系统五、高铁：大功率异步牵引电机六、四大电机性能对比表七、技术演进路线八、未来展望一、引言电机作为现代交通工具的核心动力部件，其选型直接影响效率、续航与可靠
  • Python讲解：模板方法模式 软件架构师笔记 pythonpython模板方法模式网络
    Python讲解：模板方法模式简介模板方法模式（TemplateMethodPattern）是一种行为型设计模式，它定义了一个操作中的算法骨架，而将一些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的情况下重新定义算法的某些特定步骤。核心概念AbstractClass（抽象类）：定义了模板方法和基本操作。模板方法是一个具体的方法，它给出了一个顶级逻辑框架，并调用其他抽象或具体的操作。C
  • Neo4j CQL命令大全（一） 正函数_d neo4jneo4j
    文章目录一、CREATE命令CREATE命令语法语法说明Neo4jCQL创建具有属性的节点语法说明二、MATCH命令MATCH命令语法语法说明三、ETURN子句RETURN命令语法：四、MATCH&RETURN匹配和返回MATCHRETURN命令语法：语法说明：CREATE+MATCH+RETURN命令创建客户节点创建CreditCard节点观察节点查看客户节点详细信息查看CreditCard节点
  • Vue3的Hook指南 Hopebearer_ Vue3vue.js前端javascript
    文章目录一、什么是Hook？1.技术本质2.与工具函数的区别二、Hook存在的意义1.解决传统模式的三大痛点2.核心优势矩阵三、开发实践指南1.基础创建模式2.组件内使用四、最佳实践1.复杂Hook结构2.类型安全增强五、应用场景1.状态共享方案2.跨组件通信六、性能优化策略1.副作用管理2.惰性加载Hook七、调试技巧1.开发工具追踪2.控制台检查八、应用案例1.数据可视化Hook2.微前端状态
  • Neo4j之CQL基础 风云诀4 图数据库知识图谱大数据人工智能
    Neo4j之CQL基础文章目录Neo4j之CQL基础一、CQL概念二、CQL简介三、CQL命令使用creatematch+returnwheredeleteremovesetorderbymerge四、CQL函数使用StringAggregationRelationship一、CQL概念关系型数据库的查询语言是SQL，Neo4j图数据库也有自己的查询语言，那就是CQL。CQL全称CypherQue
  • 【C#】VS2019怎么能无论是Debug还是Release模式，生成路径都在Release文件夹下？ JosieBook #C#语言vs
    文章目录⭐问题⭐解决标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生口号Tobeyourself，todowhatyouwant.联系方式q:1967473153欢迎三连点赞、✍评论、⭐收藏⭐问题正常情况下，是这样：怎么让
  • 【智能客服】意图识别训练协作优化机制 姚瑞南 智能客服意图识别训练流程及规范人工智能AIGC自然语言处理正则表达式
    本文原创作者：姚瑞南AI-Agent大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录一、背景二、识别训练协作模式三、识别归类规则及定义1.间接识别归类2.未识别归类四、标准问与扩展问新增原则1.扩展问编写原则2.标准问编写原则五、识别优化流程1.获取数据来源2.
  • vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化 mirahs vue.js
    问题编辑src/views/Home.vue，添加一个主颜色的按钮。Primary首页{{item}}正常鼠标滑过发现鼠标滑过后颜色出问题了，这是因为按钮样式使用了主颜色相关的变量，而主颜色相关的变量不止el-color-primary这个css变量。按钮样式主颜色变量所以我们要把这些主颜色相关的变量都动态设置解决编辑src/store/color.ts，添加如下辅助方法。import{defin
  • cocos creator从零开发简单框架(13)-Panel打开关闭 mirahs cocoscreator从零开发简单框架cocos2d
    编辑framework/scripts/AppConstants.ts，内容如下。定义了Panel的显示方式和遮罩类型，遮罩类型可以叠加，即可同时拥有不可穿透、半透明、关闭组件特性。//Panel显示方式publicstaticreadonlypanelShowStyle={//正常出现Normal:1,//中间变大CenterSmallToBig:2,//上往中UpToCenter:3,//下往
  • vite+vue+ts+element-plus从零开发管理后台框架(03)-路由 mirahs vue.js
    新建视图新建src/views/Login.vue，内容如下。这是登录页新建src/views/Main.vue，内容如下。这是主页新建src/views/errors/404.vue，内容如下。404pagenotfound编辑src/App.vue，内容如下。路由配置安装组件[email protected]新建src/router/index.ts，内容如下。import{
  • 基于SWIFT和Qwen1.5-0.5B-Chat进行大模型全参微调（魔搭社区） m0_65156252 大模型学习笔记python开发语言
    一、环境安装因魔搭社区中的Notebook有自己的机制来处理虚拟环境,因此我们直接使用原生镜像即可。1，swift框架安装pipinstallms-swift2，模型下载gitclonehttps://www.modelscope.cn/qwen/Qwen1.5-0.5B-Chat.git二、数据集准备使用ShenNong大模型-中医对话数据，选取前140条构建自己数据集ChatMed_TCM-v
  • 简单好用的四级作文模板 梁辰兴
    四级作文模板注：开头部分类别现象解释观点选择问题解决图画通用部分注：来源：哔站-瑞思拜课程开头部分类别现象解释Withtherapiddevelopmentofsociety/economy/education/technology/culture/medicalservice.Itisofgreatnecessityforyoungster/studentstoimproveourspeakin
  • JVM StackMapTable 属性的作用及理解 lijingyao8206 jvm字节码Class文件StackMapTable
            在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版
  • 回调函数调用方法 百合不是茶 java
    最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记 记录一下   代码很简单:           MainDemo  :调用方法  得到方法的返回结果        
  • [时间机器]制造时间机器需要一些材料 comsci 制造
          根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质     和材料...       甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得......      
  • 开口埋怨不如闭口做事 邓集海 邓集海 做人 做事 工作
    “开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。 　　 　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。 　　 　　
  • jQuery插件开发全解析，类级别与对象级别开发 IT独行者 jquery开发插件　函数
    jQuery插件的开发包括两种： 一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。   1 、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuer
  • Rome解析Rss 413277409 Rome解析Rss
    import java.net.URL;  import java.util.List;    import org.junit.Test;    import com.sun.syndication.feed.synd.SyndCategory;  import com.sun.syndication.feed.synd.S
  • RSA加密解密 无量 加密解密rsa
    RSA加密解密代码 代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat
  • linux 软件安装遇到的问题 aichenglong linux遇到的问题ftp
    1 ftp配置中遇到的问题    500 OOPS: cannot change directory   出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了   修改方法:1 修改/etc/selinux/config 中SELINUX=disabled    2 source /etc
  • 面试心得 alafqq 面试
    最近面试了好几家公司。记录下； 支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败； 阿里金融，面试官人也挺和善，只不过我让他吐血了。。。 由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样
  • java的多态性探讨 百合不是茶 java
    java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S
  • 网络编程基础篇之JavaScript-学习笔记 bijian1013 JavaScript
    1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h
  • 探索JUnit4扩展：深入Rule bijian1013 JUnitRule单元测试
            本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。         在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte
  • [CSS]CSS浮动十五条规则 bit1129 css
    这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。   1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了
  • 【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景 bit1129 partition
    0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取   1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.
  • zabbix_agentd.conf配置文件详解 ronin47 zabbix 配置文件
    Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]， 或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个
  • java--19.用矩阵求Fibonacci数列的第N项 bylijinnan fibonacci
    参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac
  • Netty源码学习-LengthFieldBasedFrameDecoder bylijinnan javanetty
    先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下： 实
  • AES加密解密 chicony 加密解密
    AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod
  • 文件编码格式转换 ctrain 编码格式
    package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
  • mysql 在linux客户端插入数据中文乱码 daizj mysql中文乱码
    1、查看系统客户端，数据库，连接层的编码  查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+------
  • 好代码是廉价的代码 dcj3sjt126com 程序员读书
      长久以来我一直主张：好代码是廉价的代码。 当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。 当他们走近看我的表情、知道我是认真的时，才收敛一点。 当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只
  • Android网络请求库——android-async-http dcj3sjt126com android
    在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通
  • ORACLE 复习笔记之SQL语句的优化 eksliang SQL优化Oracle sql语句优化SQL语句的优化
    转载请出自出处：http://eksliang.iteye.com/blog/2097999   SQL语句的优化总结如下   sql语句的优化可以按照如下六个步骤进行： 合理使用索引 避免或者简化排序 消除对大表的扫描 避免复杂的通配符匹配 调整子查询的性能 EXISTS和IN运算符 下面我就按照上面这六个步骤分别进行总结：
  • 浅析：Android 嵌套滑动机制（NestedScrolling） gg163 android移动开发滑动机制嵌套
    谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？<!--[if !supportLineBreakNewLine]--><!--[endif]--> 比如你使用了Toolbar，下面一个ScrollView，向上滚
  • 使用hovertree菜单作为后台导航 hvt JavaScriptjquery.nethovertreeasp.net
      hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css
  • SVG 教程 （二）矩形 天梯梦 svg
    SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作： 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>
  • 一个简单的队列 luyulong java数据结构队列
    public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front
  • 基础数据结构和算法九：Binary Search Tree sunwinner Algorithm
      A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all
  • 项目出现的一些问题和体会 Steven-Walker DAOWebservlet
         第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。     这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。  &
  • 高手问答：Java老A带你全面提升Java单兵作战能力！ ITeye管理员 java
    本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介： 淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他