ChouCat
ChouCat

flex弹性布局

任何一个容器都可以指定为Flex布局 行内元素也可以使用Flex布局
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

弹性布局flex

    • 容器的属性
      • flex-direction:属性属性决定主轴的方向（即项目的排列方向）
      • flex-wrap:容器属性
      • flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap flex-flow
      • justify-content：定义了项目在主轴上的对齐方式
      • align-items：属性定义项目在交叉轴上如何对齐
      • align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
      • 搜索输入框依次排列
    • 项目的属性
      • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
      • flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
      • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
      • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏 览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小；
      • flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
      • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

容器的属性

flex-direction:属性属性决定主轴的方向（即项目的排列方向）

  1. row（默认值）：主轴为水平方向，起点在左端。
  2. row-reverse：主轴为水平方向，起点在右端。
  3. column：主轴为垂直方向，起点在上沿。
  4. column-reverse：主轴为垂直方向，起点在下沿。
    flex弹性布局_第1张图片

flex-wrap:容器属性

  1. nowrap（默认）：不换行
    在这里插入图片描述
  2. wrap：换行，第一行在上方
    在这里插入图片描述
  3. wrap-reverse：换行，第一行在下方
    在这里插入图片描述

flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap flex-flow

justify-content：定义了项目在主轴上的对齐方式

  1. flex-start（默认值）：左对齐
  2. flex-end：右对齐
  3. center： 居中
  4. space-between：两端对齐，项目之间的间隔都相等
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框 的间隔大一倍。
    flex弹性布局_第2张图片

align-items：属性定义项目在交叉轴上如何对齐

  1. flex-start：交叉轴的起点对齐。
  2. flex-end：交叉轴的终点对齐。
  3. center：交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
    flex弹性布局_第3张图片

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边 框的间隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。
    flex弹性布局_第4张图片

搜索输入框依次排列

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .handle-box .item {
            display: flex;
            margin-top: 20px;
            align-items: center;
            margin-left: 10px;
            width: 260px;
            height: 30px;
            background-color: #e5eecc;
        }

        .handle-input {
            width: 200px;
            display: inline-block;
        }
    </style>
</head>

<body>
<div style="border-bottom: 1px solid #ddd;padding: 0 10px 10px 10px;margin-bottom: 10px;">
    <div class="handle-box">
        <div style="display: flex; flex-wrap: wrap;">
            <div class="item">
                姓名：<input class="handle-input" type="text" name="fname"/>
            </div>
            <div class="item">
                电话：<input class="handle-input" type="text" name="fname"/>
            </div>
            <div class="item">
                邮箱：<input class="handle-input" type="text" name="fname"/>
            </div>
            <div class="item">
                <button type="button">查询</button>
            </div>
        </div>
    </div>
</div>
<div style="margin: 0 auto 10px 20px;">
    <button type="button">新增</button>
    <button type="button">导出</button>
    <button type="button">删单</button>
    <button type="button">批量终止</button>
</div>
</body>

</html>

项目的属性

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0

order: <integer>;

flex弹性布局_第5张图片

flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-grow: <number>; /* default 0 */

在这里插入图片描述
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将 比其他项多一倍。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-shrink: <number>; /* default 1 */

在这里插入图片描述
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果 一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏 览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小；

flex-basis: <length> | auto; /* default auto */

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;

该属性可能取6个值，除了auto，其他都与align-items属性完全一致

flex弹性布局_第6张图片

你可能感兴趣的:(web)

  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • Java：爬虫框架 dingcho Javajava爬虫
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
  • MongoDB知识概括 GeorgeLin98 持久层mongodb
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
  • Python实现下载当前年份的谷歌影像 sand&wich python开发语言
    在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • Spring Boot中实现跨域请求 BABA8891 springboot后端java
    在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
  • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • 【Golang】实现 Excel 文件下载功能 RumIV Golanggolangexcel开发语言
    在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • metaRTC8.0，一个全新架构的webRTC SDK库 metaRTC webrtc音视频
    概述metaRTC8.0是metaRTC开源以来架构变化最大的一个版本，是metaIPC3.0等高性能的基础。metaRTC8.0是一个全新架构版本，并非在metaRTC7.0版本上简单升级，在QOS/语音对讲/内存占用/视频文件录制读取等方面新增多个模块，在弱网对抗/语音对讲/内存优化等效果上有显著提升。metaRTC8.0在一年多的开发中进行了近200次迭代，metaRTC8.0社区版计划在2
  • metaRTC/webRTC QOS 方案与实践 metaRTC metaRTC解决方案webrtcqos
    概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest
  • metaRTC5.0 API编程指南(一) metaRTC metaRTCc++c语言webrtc
    概述metaRTC5.0版本API进行了重构，本篇文章将介绍webrtc传输调用流程和例子。metaRTC5.0版本提供了C++和纯C两种接口。纯C接口YangPeerConnection头文件:include/yangrtc/YangPeerConnection.htypedefstruct{void*conn;YangAVInfo*avinfo;YangStreamConfigstreamco
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 原力元宇宙：Web3时代下的虚拟现实融合与普通人逆袭的机遇 口碑信息传播者
    在数字化浪潮席卷全球的今天，一个崭新的概念——原力元宇宙，正以其独特的魅力吸引着越来越多的目光。作为元宇宙国际性的一个项目，原力元宇宙不仅融合了Web3第三代互联网的前沿技术，更将虚拟现实与现实生活紧密相连，为我们描绘出一幅前所未有的数字新世界画卷。13分钟视频内容讲明白原力元宇宙创富项目，中国区运营服务对接微信：ForceZen原力元宇宙，是一个时代的跨越，它代表着互联网技术的又一次革新。Web
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • bat+ffmpeg批处理图片，图片批量转码 张雨zy 音视频ffmpeg
    直接在cmd中输入//批量转码文件for%ain("*.png")doffmpeg-i"%a"-fs1024k"%~na.webp"//删除所有pngdel*.png@echooff表示执行了这条命令后关闭所有命令(包括本身这条命令)的回显。而echooff命令则表示关闭其他所有命令(不包括本身这条命令)的回显，@的作用就是关闭紧跟其后的一条命令的回显脚本完整代码写入脚本中后，需要多加一个%，例如
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • Java实现的简单双向Map，支持重复Value superlxw1234 java双向map
    关键字：Java双向Map、DualHashBidiMap     有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。   数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。   即：既要根据Key找Value，又要根据Value
  • PL/SQL触发器基础及例子 百合不是茶 oracle数据库触发器PL/SQL编程
      触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似 过程函数必须要调用,   一个表中最多只能有12个触发器类型的,触发器和过程函数相似 触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
  • [时空与探索]穿越时空的一些问题 comsci 问题
          我们还没有进行过任何数学形式上的证明,仅仅是一个猜想.....       这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
  • easy ui datagrid上移下移一行 商人shang js上移下移easyuidatagrid
    /** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
  • Java反射 oloz 反射
    本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教 首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
  • springMVC 使用JSR-303 Validation验证 杨白白 springmvc
    JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。 登录需要验证类 public class Login { @NotEmpty
  • log4j 香水浓 log4j
    log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
  • 使用ajax和history.pushState无刷新改变页面URL agevs jquery框架Ajaxhtml5chrome
    表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
  • centos中文乱码 AILIKES centosOSssh
    一、CentOS系统访问 g.cn ，发现中文乱码。 于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。       后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
  • 触发器 baalwolf 触发器
    触发器(trigger)：监视某种情况，并触发某种操作。 触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before 
  • JS正则表达式的i m g bijian1013 JavaScript正则表达式
            g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。         i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。         m:表示
  • HTML5模式和Hashbang模式 bijian1013 JavaScriptAngularJSHashbang模式HTML5模式
            我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode         一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
  • [Maven学习笔记六]Maven生命周期 bit1129 maven
    从mvn test的输出开始说起   当我们在user-core中执行mvn test时，执行的输出如下：   /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
  • 【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
    运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
  • 记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
    　　 需求：从db获取数据然后推送到B         程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。 　　  自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。 　　　service iptables stop
  • 巧用视错觉-UI更有趣 brotherlamp UIui视频ui教程ui自学ui资料
    我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。 视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。 在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
  • 线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
    package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
  • HTTP协议详解 chicony http协议
    引言                                 
  • Scala设计模式 chenchao051 设计模式scala
    Scala设计模式                我的话： 在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
  • 安装mysql daizj mysql安装
    安装mysql   (1)删除linux上已经安装的mysql相关库信息。rpm  -e  xxxxxxx   --nodeps (强制删除)      执行命令rpm -qa |grep mysql 检查是否删除干净   (2)执行命令  rpm -i MySQL-server-5.5.31-2.el
  • HTTP状态码大全 dcj3sjt126com http状态码
    完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
  • asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
    NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
  • C语言中，关键字static的作用 e200702084 C++cC#
    在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。 一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
  • win7/8使用curl geeksun win7
    1.  WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。 下载地址：  http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包   2.  可以给Windows增加c
  • Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
    转载自：   http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
  • Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转java字符串反转栈反转
    注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768   /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
  • 代码实现任意容量倒水问题 home198979 PHP算法倒水
    形象化设计模式实战             HELLO!架构                     redis命令源码解析   倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
  • Druid datasource zhb8015 druid
    推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。 它最重要的特点是：监控、扩展和性能。 下载和Maven配置看这里： http
  • 两种启动监听器ApplicationListener和ServletContextListener spjich javaspring框架
    引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器   ServletContextListener  特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
  • JavaScript Rounding Methods of the Math object 何不笑 JavaScriptMath
        The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(),  Math.floor(), and  Math.round() — handle rounding in differen
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他