黑胡子大叔的小屋
黑胡子大叔的小屋

flex布局实例

DOCTYPE html>
<html lang="">

<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>Vue3title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="renderer" content="webkit">
    <style>
        :root{
            --color1:var(--color1)
        }
        *{
            margin: 0%;
            padding: 0%;
        }
        html{
            font-size: 16px;
        }
        #app{
            /* display: grid;
            place-content: center; */
            height: 100vh;
            width: 100vw;
        }
        .wrap-main{
        }
        .plate{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 1rem;
            background-size: 100% 100%;
            background-clip: border-box;
        }
        .plate-1{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: flex;
        }
        .plate-1-item-1{
            flex:1 1;
            display: grid;
            place-content: center;
            background-color: aquamarine;
            margin: .2rem;
        }
        .plate-1-item-2{
            background-color: bisque;
            width: 100%;
            margin: .2rem;
            display: grid;
            place-content: center;
        }
        .plate-2{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: flex;
            align-items: center;
        }
        .plate-2-item-1{
            flex:1 1;
            display: grid;
            place-content: center;
            background-color: aquamarine;
            margin: .2rem;
            font-size: .8rem;
        }
        .plate-2-item-2{
            background-color: bisque;
            flex: 2;
            margin: .2rem;
            display: grid;
            place-content: center;
            font-size: .8rem;
        }
        .plate-2-self{
            align-self: stretch;
        }
        /* 等高布局table */
        .plate-3{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: table;
        }
        .plate-3-item-1{
            width: 30%;
            font-size: .8rem;
            display: table-cell;
            border: .1rem solid #999595;
        }
        /* 等高布局grid */
        .plate-4{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            width: 50rem;
            display: grid;
            grid-auto-flow: column;
        }
        .plate-4-item-1{
            font-size: .8rem;
        }
        .plate-4-item-1:nth-child(1){
            background-color: aqua;
        }
        .plate-4-item-1:nth-child(2){
            background-color: rgb(95, 228, 90);
        }
        .plate-4-item-1:nth-child(3){
            background-color: rgb(228, 90, 125);
        }
        /* 等高布局，兼容最强 */
        .plate-5{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            width: 50rem;
            font-size: .8rem;
            color: white;
        }
        .plate-5-main{
            overflow: hidden;
        }
        .plate-5-left{
            float: left;
            display: inline-block;
            width: 30%;
            background-color: rgb(228, 90, 125);
            padding-bottom: 999999rem;
            margin-bottom: -999999rem;
        }
        .plate-5-right{
            display: inline-block;
            width: 50%;
            background-color: rgb(95, 228, 90);
        }
        /* 导航栏 */
        .plate-6{
            background-color: blueviolet;
            color: white;
            display: flex;
        }
        .plate-6-right{
            display: flex;
            margin-left: auto;
            cursor: pointer;
            background-color: #999595;
        }
        .plate-6-right div{
            margin: 0 2rem;
        }
        .plate-6 nav ul{
            display: flex;
            list-style: none;
            background-color: #999595;
        }
        .plate-6 nav ul li{
            margin: 0 2rem;
            cursor: pointer;
        }
        .plate-6 nav ul li:hover,.plate-6-right div:hover{
            transform:scale(1.2);
            -webkit-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -o-transform:scale(1.2);
            -ms-transform:scale(1.2);
            color: rgb(123, 255, 0);
        }
        /* flex自适应 */
        .plate-7{
            display: flex;
            flex-wrap: wrap;
        }
        .plate-7-left{
            flex: 0 0 15rem;
            /* width: 15rem; */
        }
        .plate-7-right{
            flex: 1 0 0;
        }
        /* flex效果搜索框 */
        .plate-8{
            display: flex;
            flex-wrap: nowrap;
        }
        .search-left{
            padding: 1rem 2rem;
            background-color: rgb(0, 153, 255);
            border-radius: 30%;
            color: white;
            font-weight: 600;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            text-align: center;
        }
        .search-right{
            flex-grow: 1;
            display: flex;
        }
        .search-right input[type='text']{
            border-top: none;
            border-right: none;
            border-left: none;
        }
        .search-right input[type='text']:focus{
            border-top: none;
            border-right: none;
            border-left: none;
            flex-grow: 1;
        }
        /* 圣杯布局 */
        .plate-9{
            /* width: 50rem; */
            /* height: 25rem; */
            display: flex;
            flex-direction: column;
        }
        
        @media (max-width:789px) {
            section{
                flex-direction: column !important;
                flex: 1;
            }
            .plate-9-center{
                flex: 1;
            }
            .plate-9-left,.plate-9-right{
                flex: 0 0 5rem !important;
            }
        }

        .plate-9-header{
            background-color: rebeccapurple;
        }
        .plate-9-footer{
            background-color: aquamarine;
        }
        .plate-9 section{
            display: flex;
            flex: 1;
            flex-direction: row;
        }
        .plate-9-left{
            background-color: beige;
            flex: 0 0 15rem;
            order: -1;
        }
        .plate-9-center{
            background-color: rgb(28, 123, 196);
            flex: 1;
        }
        .plate-9-right{
            background-color: rgb(150, 34, 125);
            flex: 0 0 15rem;
        }
    style>
head>

<body>
    <div id="app">
        <div class="wrap-main">

            板块1：Flex布局
            <div class="plate-1">
                <div class="plate-1-item-1">1div>
                <div class="plate-1-item-1">1div>
                <div class="plate-1-item-1">1div>
                <div class="plate-1-item-1">1div>
                <div class="plate-1-item-2">2div>
                <div class="plate-1-item-2">2div>
                <div class="plate-1-item-2">2div>
            div>
            板块2 align-items 和 align-self
            <div class="plate-2">
                <div class="plate-2-item-1">1div>
                <div class="plate-2-item-1">1div>
                <div class="plate-2-item-1">1div>
                <div class="plate-2-item-2">2div>
                <div class="plate-2-item-2">2div>
                <div class="plate-2-item-1 plate-2-self">1div>
                <div class="plate-2-item-2">2div>
            div>
            板块3 等高布局实现方式一：table布局
            <div class="plate-3">
                <div class="plate-3-item-1">素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。div>
                <div class="plate-3-item-1">测试div>
                <div class="plate-3-item-1">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。div>
            div>
            板块4 等高布局实现方式二：grid布局
            <div class="plate-4">
                <div class="plate-4-item-1">素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。div>
                <div class="plate-4-item-1">测试div>
                <div class="plate-4-item-1">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。div>
            div>
            板块5 等高布局，兼容最强
            <div class="plate-5">
                <div class="plate-5-main">
                    <div class="plate-5-left">位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'fdiv>
                    <div class="plate-5-right">素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半div>
                div>
            div>
            板块6 导航栏
            <div class="plate-6 plate">
                <nav>
                    <ul>
                        <li>
                            导航一
                        li>
                        <li>
                            导航二
                        li>
                        <li>
                            导航三
                        li>
                    ul>
                nav>
                <div class="plate-6-right">
                    <div>登录div>
                    <div>注册div>
                div>
            div>
            板块7 自适应flex
            <div class="plate-7 plate">
                <div class="plate-7-left">标题信息div>
                <div class="plate-7-right">内容信息位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元div>
            div>
            板块8 自适应flex下的搜索框
            <div class="plate-8 plate">
                <div class="search-left">搜索div>
                <div class="search-right">
                    <input type="text" name="" id="">
                div>
            div>
            板块9 圣杯布局
            <div class="plate-9 plate">
                <div class="plate-9-header">头部div>
                <section>
                    <div class="plate-9-center">中间div>
                    <div class="plate-9-right">右侧div>
                    <div class="plate-9-left">左侧div>
                section>
                <div class="plate-9-footer">底部div>
            div>
        div>
    div>
body>
<script src="https://unpkg.com/vue@next">script>
<script src="./learnTs/02_baseType.js">script>
<script>
    const Counter = {
        data:function(){
            return {
                num:0,
                name:'张三'
            }
        }
    }
    let app =Vue.createApp(Counter).mount('#app')
    console.log(app)
script>
html>

你可能感兴趣的:(前端,前端,javascript,css)

  • jQuery实现前端下载功能 天农学子 前端jqueryjavascript
    js实现前端下载功能前端代码html代码导出明细js代码functionexportExcel(){//定义要发送的参数letpostData=$("#searchForm").serializeObject();//发送POST请求fetch('${ctxPO}/url/PosInvoiceUrlController/exportPosInvoice',{method:'POST',body:J
  • 使用Nginx部署前端Vue项目 bigbig猩猩 前端nginxvue.js
    在使用Nginx部署前端Vue项目时，我们主要关注的是如何高效地将静态资源（HTML、CSS、JavaScript、图片等）提供给客户端浏览器。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Nginx作为一个高性能的HTTP和反向代理服务器，非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目，包括环境准备、Vue项目构建、Nginx配置、部署过程以及
  • 2020-12-17 幸福大黑鸭
    IT1.LeetCode：各位相加Java编写2020-12-17（258.各位相加）2.《Java从入门到精通》明日科技：P391~395阅读记xmind笔记，并自己实现实例。知识点之前确实都学过，但还是再系统复习一下吧。3.《Semantic-awareWorkflowConstructionandAnalysisforDistributedDataAnalyticsSystems》：精读关键
  • Easyui Datagrid实现行操作 天农学子 easyui前端javascript
    EasyuiDatagrid实现行操作效果分析实现此功能需要实现2点1、首列的内容全部需要渲染成申请开票2、点击申请开票可以获获取到指定的行内容，在执行后续操作实现方案1、首行格式化，在table的th属性中加入formatter示例代码如下操作2、在JavaScript中编写代码formatOperatefunctionformatOperate(val,row){return'申请开票';}当
  • 前端框架与库的区别：深入解析与实战指南 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML前端webJavaScriptH5
    前端框架与库的区别：深入解析与实战指南基本概念和作用框架库功能使用思路与代码示例示例一：使用React框架构建组件示例二：使用Lodash库进行数据处理示例三：使用Vue.js框架进行双向数据绑定实际工作中的使用技巧经验分享自行拓展内容在前端开发领域，框架（Framework）和库（Library）是两个经常被提及但又容易混淆的概念。它们都是构建Web应用程序的重要工具，但各自拥有不同的设计哲学和
  • 前端开发中的单元测试与端到端测试：全面解析与实战指南 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML前端webJavaScriptH5
    前端开发中的单元测试与端到端测试：全面解析与实战指南引言单元测试：基础与实践基本概念目的与优势实战演练示例一：加法功能单元测试扩展视角端到端测试：场景与执行基本概念目的与优势实战演练示例二：登录流程端到端测试扩展视角结合经验的技巧分享引言在现代前端开发中，测试是保证代码质量和维护系统稳定性不可或缺的一环。单元测试（unittesting）与端到端测试（end-to-endtesting）是两种常用
  • 前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML5前端web前端三大核心网页开发
    前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南基础概念与作用说明PNG8PNG16PNG24PNG32代码示例与使用场景PNG8示例PNG24示例PNG32示例性能优化与最佳实践防范漏洞提示结语与讨论在网页设计与前端开发中，选择合适的图像格式是至关重要的一步，它直接关系到页面加载速度、视觉效果乃至用户体验。PNG作为一种广泛应用的图像格式
  • SpringBoot项目集成数据脱敏（密码加密）功能 明明在干嘛 springboot后端java数据脱敏jasyptAES
    代码连接【https://gitee.com/pengmqqq/sensitive-data-encryption】介绍后端敏感数据加密的一些解决方案，包括：配置文件敏感数据加解密前端传输敏感数据加解密数据库获取的敏感数据加解密软件架构配置文件数据脱敏：Jasypt+AES前后端传输以及数据库存储数据脱敏：AOP+AES使用说明配置文件数据脱敏将需要脱敏的数据进行加密之后再放入配置文件（注意要使用
  • MATLAB机器人常用代码程序（以UR5e机器人为例） FL17171314 机器人
    需要一个UR5e的机器人模型。MATLAB的RoboticsToolbox或者RoboticsSystemToolbox提供了创建和模拟机器人模型的功能。UR5e=importrobot('universalUR5e.urdf');show(UR5e)showdetails(UR5e)figure(Name="InteractiveGUI")gui=interactiveRigidBodyTree
  • 白骑士的CSS教学高级篇之高级选择器与伪类 4.2.2 伪类 白骑士所长 CSS教学css前端
    伪类选择器是CSS中一种非常强大的工具，允许我们根据元素的特定状态来应用样式。通过使用伪类选择器，你可以创建更具交互性和动态性的网页。常用的伪类选择器包括‘:focus‘、‘:hover‘、‘:active‘和‘:visited‘，它们在设计用户体验时起着至关重要的作用。‘:focus‘伪类‘:focus‘伪类选择器用于选择当前处于焦点状态的元素。通常，当用户通过键盘或鼠标与表单元素（如输入框、按
  • 如何设置element ui选择结束时间为23:59:59？ weixin_42220130 前端elementui时间结束
    两个方法，不过都是针对于传值给后端做的处理，不包括前端展示1每次发送请求时更改结束时间给后端//请求函数getDataList(){this.dataListLoading=true;//请求参数手动更改if(this.searchForm.timeArray.length===2&&this.searchForm.timeArray[1]!==""){this.searchForm.timeAr
  • html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇) 游苏昱 html语言及js脚本基础
    什么是变量？变量是用于存储信息的容器变量的声明语法：var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头；变量也能以$和_符号开头(不过我们不推荐这么做)；变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾。有个好的编码习惯，都要以;结尾数据类型在JavaScript中，一段信息就是一个值(value)。
  • 菜鸟笔记-001 如何用JavaScript脚本在文字中实现向左或向右插入空格 胤祥矢量商铺 菜鸟学习笔记笔记illustratorjavascript文字操作
    这是一个网友在线上问我的一个问题：如何用JavaScript脚本在文字中实现向左或向右插入空格下图是在文字左边插入了1/2个空格的效果：那么如何用javascript实现向左向右插入空格？其实这个功能，我在实际工作确实很少碰到，我只有祭出宝典查阅-IllustratorJavaScriptScriptingReference2022.pdf，当然你有更新版的更好。查到文字的向左插入空格或向左插入空
  • this 关键字的绑定类型 浮游本尊 前端
    在JavaScript中，理解this关键字的指向对于编写高质量的代码至关重要。this的指向取决于函数的调用方式，而不是定义方式。以下是几种常见的this绑定情形及其工作原理的解析。全局上下文中的this当在全局作用域中使用this或者函数在全局作用域被调用时，this通常指向全局对象。在Web浏览器中，这个全局对象是window，而在Node.js环境中则是global对象。functionc
  • JavaScript 模块化开发：ES6 模块与 CommonJS 的对比与应用 程序员小羊！ Javajavascriptes6开发语言
    您好，我是程序员小羊！前言随着前端项目规模的增长，代码组织和管理变得越来越复杂。模块化开发成为解决这一问题的有效手段，能够帮助开发者将代码进行分割、复用和维护。JavaScript在发展过程中出现了多种模块化规范，其中最为广泛使用的有ES6模块（也称为ESModules）和CommonJS模块规范。本文将从原理、语法、应用场景和两者对比等多个方面深入探讨这两种模块化规范，帮助开发者更好地理解和应用
  • 【js逆向专题】4.python调用JS和扣代码 Regent Wan js逆向javascriptjs逆向
    小节目标:掌握python调用js代码方式熟悉js开放接口进行调用了解补环境的基本概念掌握js调试技巧一.pyexecjs的使用1.简介PyExecJS是一个Python库，用于在Python环境中执行JavaScript代码。它实际上是对ExecJS库的Python封装，ExecJS本身是一个通用的JavaScript运行环境的抽象层。使用PyExecJS，你可以在Python中执行JavaSc
  • 滴滴前端日常实习一面 真的很上进 前端面试javascriptvuejava
    同步到csdn上一面水平居中、垂直居中的方法。align-item实现的是水平居中还是垂直居中。flex-direction为column的时候，是什么居中。js有什么数据类型。简单数据类型和复杂数据类型的区别深拷贝和浅拷贝的区别JSON.stringify有什么弊端怎么判断数组类型Vue3和Vue2的区别Vue生命周期钩子，activated和deactivated用过吗Vue里keep-ali
  • 制作一个简单HTML旅游网站（HTML+CSS+JS）桂林旅游网页设计与实现5个页面 软件技术NINI html+css+js旅游html旅游css
    一、‍网站题目旅游，当地特色，历史文化，特色小吃等网站的设计与制作。二、✍️网站描述桂林旅游主题的网页一共五个个页面-旅游网页使用htmlcssjs制作有banana图-页面可以相互跳转包含表单三级页面-网页可以使用vscodehbuilderdw等打开修改-里面的图片和文字都可以替换为其他旅游网页-桂林旅游网页介绍了景点，美食，联系我们，桂林旅游等-html静态网页没有复杂效果布局简单原创htm
  • Vue——认识day06_class与style绑定 WenJGo Vue前端HTMLCSSJSvue.js前端javascript
    在Vue中，可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定：对象语法：可以将一个包含CSS属性和值的对象传递给v-bind，将对象的属性与HTML元素的style属性进行绑定。例如：HelloWorld在上面的例子中，textColor和textSize是Vue实例的data属性，可以在Vue实例中定义和修改它们的值。当数据发生变化时，
  • js html css代码缩进,HTML/CSS/JS代码格式化 吃货喵 jshtmlcss代码缩进
    8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？我们在编辑器当中写代码的时候，可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON，使用SublimeText自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点，一些html文件的格式不够优美！
  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面 南北极之间 web前端特效源码前端javascripthtml网页设计代码实例css3
    效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
  • 基于Springboot和Vue的在线小说阅读平台系统(570) 源码出售和定制 vue.js前端springboot后端spring前端框架
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：Springboot3、项目图片4、演示视频基于Springboot和Vue的在线小说阅读平台系统(570)
  • html5 css3 JavaScript响应式中文静态网页模板js源代码 Yucool01 html5javascriptcss3
    该批次模板具备如下功能：首页，二级页面，三级页面登录页面均有，页面齐全，功能齐全，js+css+html,前端HTML纯静态页面，无后台，可用dreamweaver,sublime,webstorm等工具修改；部分网页模板效果图：有需要的同学可以下载学习一下：https://download.csdn.net/download/Yucool01/22408278https://download.c
  • How can I change from OpenAI to ChatOpenAI in langchain and Flask? 营赢盈英 AIlangchainpythonflaskopenaiapipy-langchain
    题意：“在LangChain和Flask中，如何将OpenAI更改为ChatOpenAI？”问题背景：ThisisanimplementationbasedonlangchainandflaskandreferstoanimplementationtobeabletostreamresponsesfromtheOpenAIserverinlangchaintoapagewithjavascript
  • 前端工程环境变量配置 比苦瓜苦 笔记前端
    前端工程环境变量配置以Vite为例1.创建.env环境变量文件2.配置package.json3.当执行script中的内容时mode会被传入vite.config.ts文件中的defineConfig，作为回调函数的参数以Vite为例1.创建.env环境变量文件在根目录创建文件内容：#生产环境下的环境变量配置#变量命名需要VITE_作为开头#apptitleVITE_APP_TITLE=生产#b
  • 前端配置环境 葱头的故事 前端
    工具类配置一、下载GitBash下载地址二、下载google浏览器下载地址三、下载微信开发者工具下载地址四、下载vscode下载地址1、安装中文包安装中文包教程2、安装插件3、vscode中使用git教程4、setting.json我自己常用的：{"editor.fontSize":18,"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vs
  • 测试老鸟汇总，接口测试总结与用例编写，一文策底概全... 软件测试老莫 接口测试
    1、为什么要做接口测试？1）现在很多系统前后端架构是分离的，因为不同端（前段，后端）的工作进度不一样，所以我们要针对最开始出来的接口，以及需要调用其他公司的（银行，支付宝，微信，qq等）一些接口进行接口测试及验证数据，从安全层面来说，只依赖前端进行限制已经完全不能满足系统的安全要求（绕过前端太容易了），需要后端同样进行控制，在这种情况下就需要从接口层面进行验证。在这种情况下就需要从接口层面进行验证
  • uniapp壁纸项目笔记 京城五 前端学习脚步uniapp项目实践uni-app笔记
    项目初始化static文件夹中尽量不要存放一些测试时用的图片。因为项目在打包的时候会将static文件夹一并的打包，这样会使得打包后的项目变得臃肿。解决办法是在项目的根目录下创建一个common文件夹，用于存放测试用的图片和其他文件。common文件夹中的文件只有在被引入的时候才会被一并打包。否则要避免这个情况就只能在打包项目前清理static文件夹。同理，一些公共样式（scss文件）也可以放在c
  • 【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程 秋说 前后端项目开发前端框架vue.js前端htmlcssJavaScript
    文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一：vite打包方法二：webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套：HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应
  • Dom 周华华 JavaScripthtml
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • 【Spark九十六】RDD API之combineByKey bit1129 spark
    1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：
  • msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql设置密码
    MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后
  • 路漫漫其修远兮 吾将上下而求索 周凡杨 学习 思索
    王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
  • Hadoop(二)对话单的操作 朱辉辉33 hadoop
    Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
  • web报表工具FineReport常用函数的用法总结（日期和时间函数） 老A不折腾 finereport报表工具web开发
    web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
  • c++ 宏定义中的##操作符 墙头上一根草 C++
    #与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs
  • 分析Spring源代码之，DI的实现 aijuans springDI现源代码
    (转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print
  • for循环的进化 alxw4616 JavaScript
    // for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
  • 网络编程Socket和ServerSocket简单的使用 百合不是茶 网络编程基础IP地址端口
      网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的
  • JDK1.5 生产消费者 bijian1013 javathread生产消费者java多线程
    ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
  • JAVA版身份证获取性别、出生日期及年龄 bijian1013 java性别出生日期年龄
            工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
  • 【Java范型六】范型与枚举 bit1129 java
    首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
  • 【Nginx五】Nginx常用日志格式含义 bit1129 nginx
    1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes
  • Lua 语言 15 分钟快速入门 ronin47 lua 基础
    - - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
  • java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
    the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
  • mongoDB文档型数据库特点 开窍的石头 mongoDB文档型数据库特点
    MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，
  • [毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
        一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
  • PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHPExcel
    导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
  • IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBMjmsuserMQMCAUSER
    IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
  • 网线的接法 dcj3sjt126com
    一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb
  • Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chromevim
    什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件
  • MongoDB查询（2）——数组查询[六] eksliang mongodbMongoDB查询数组
    MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
  • cordova读写文件（1） gundumw100 JavaScriptCordova
    使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
  • HTML5 FormData 进行文件jquery ajax 上传 到又拍云 ileson jqueryAjaxhtml5FormData
    html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
  • swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
      swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &
  • java实现SMTP邮件服务器 macroli java编程
    电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
  • mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境mongo纵观千象
    SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
  • Struts2 Pojo（六） Luob. POJOstrust2
    注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
  • struts2步骤 wuai struts
    1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他