wingchiehpih
wingchiehpih

CSS3媒体查询实现网页动态分栏

媒体查询实现网页动态分栏

    • 效果展示
    • HTML代码块
    • CSS代码块

效果展示

分栏的好处： 段落分栏的好处是让阅读者看得更加通俗易懂方便理解同时也是比较美观的。
实际效果：
当页面宽度大于640px展示为三栏
CSS3媒体查询实现网页动态分栏_第1张图片
当页面宽度介于400px-600px直接时展示为二栏
CSS3媒体查询实现网页动态分栏_第2张图片
当页面宽度小于400px展示为一栏
CSS3媒体查询实现网页动态分栏_第3张图片

HTML代码块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>分栏练习</title>
    <link href="css/style.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/normalize.css" />
  </head>
  <body>
    <h1>一起读书网</h1>
    <article>
      <p>
        南京扬子江隧道是双管双层八车道X形隧道，分别经南北两条线路穿越长江，两条隧道均为上下两层，每层单向二车道，上层为江北至江南方向，下层为江南至江北方向，南线全长7363米，北线全长7014米，整个工程总投资约52亿元人民币。
      </p>
      <p>
        南京扬子江隧道于2015年7月2日顺利实现全线贯通，2016年1月1日正式通车，这是世界上同类隧道中规模最大、长度最长、地质最复杂、水压最高的隧道，被誉为“江底70米深处的世界级工程”。
      </p>
      <p>
        该隧道设计时速80公里，限速70公里，设计日通行车辆十万辆，由于距离南京长江大桥最近，南京扬子江隧道可以有效地疏解目前已是全天候超负荷运转的长江大桥的交通压力。
      </p>
      <p>
        此外，扬子江隧道的建成也为南京长江大桥的修缮争取了时间。自1968年通车以来，大桥已经持续工作了50年，必须进行一次全面、系统的修缮。在此期间，扬子江隧道承担了大桥的全部交通流量，可以称得上是南京长江大桥的“继任者”。
      </p>
      <p class="ad">
        <img src="imgs/ad.jpg" alt="" />
      </p>
      <p>
        南京扬子江隧道是双管双层八车道X形隧道，分别经南北两条线路穿越长江，两条隧道均为上下两层，每层单向二车道，上层为江北至江南方向，下层为江南至江北方向，南线全长7363米，北线全长7014米，整个工程总投资约52亿元人民币。
      </p>
      <p>
        南京扬子江隧道于2015年7月2日顺利实现全线贯通，2016年1月1日正式通车，这是世界上同类隧道中规模最大、长度最长、地质最复杂、水压最高的隧道，被誉为“江底70米深处的世界级工程”。
      </p>
      <p>
        该隧道设计时速80公里，限速70公里，设计日通行车辆十万辆，由于距离南京长江大桥最近，南京扬子江隧道可以有效地疏解目前已是全天候超负荷运转的长江大桥的交通压力。
      </p>
      <p>
        此外，扬子江隧道的建成也为南京长江大桥的修缮争取了时间。自1968年通车以来，大桥已经持续工作了50年，必须进行一次全面、系统的修缮。在此期间，扬子江隧道承担了大桥的全部交通流量，可以称得上是南京长江大桥的“继任者”。
      </p>
    </article>
  </body>
</html>

CSS代码块

body {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

@media screen and (max-width: 400px) {
  article {
    column-count: 1;
  }
}
@media screen and (max-width: 640px) {
  article {
    column-count: 2;
  }
}
@media screen and (min-width: 640px) {
  article {
    column-count: 3;
  }
}

article {
  width: 90%;
  margin: 0 auto;
  /* 设置列宽实现分列效果 */
  columns: 200px 3;
  column-gap: 5%;
  column-rule: aqua 3px double;
  text-indent: 2em;
}

article p.ad {
  break-inside: avoid;
  column-span: all;
  text-indent: 0;
}
article img {
  max-width: 100%;
}

你可能感兴趣的:(css)

  • CSS3动画属性：转换(transition) 前端独秀 前端css3transition
    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
  • 【瀑布流插件】vue-masonry 春晓_春眠花落 vue.jsjavascript前端
    **最近一直在画静态页面，有个图片列表，布局很紧凑，图片宽度一样，高度不一样，但是效果图上都是紧挨在一起，我用普通的v-for循环加css布局，它会以这一行最高的那张图片的高度为准，导致图片高度小的，下一行不能紧挨在一起**如图：但是我要的效果是这样的，如图：依靠vue-masonry，实现了一些简单的功能,可参考这篇文章，讲的比较详细《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
  • 【element】谷歌浏览器 el-dialog 概率出现背景全黑，透明度不生效 丶思想 vuevue.jsjavascript前端
    项目场景：谷歌浏览器问题描述谷歌浏览器el-dialog概率出现背景全黑，透明度不生效classv-modalopacity:0.5不生效解决方案：采用opacity:1background:0.5透明度的黑色代码如下：importVuefrom'vue'importElementfrom'element-ui'import'../element-variables.scss'/***来自Kare
  • element-ui修改dialog样式全局、局部修改问题 el-dialog__title/el-dialog__header/el-dialog__body/el-dialog__footer 春云资源 elementuicsshtmlcss3
    //没有scoped全局css全部文件生效但是其他地方用dialog样式也会生效//有scoped为局部css--scoped只在本文件生效在这里设置el-dialog__header不生效//因此通过el-dialog的class进行全局css中局部定义只在当前文件生效点击打开Dialogdialog内容取消确定exportdefault{data(){return{centerDialogVi
  • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 谏君之 javascriptcsshtmljavascript
    使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
  • 使用css实现镂空效果 gurenchang css前端
    前言：最近在公司完成小程序的新手引导中遇到了要将蒙层挖空，漏出后面内容的功能，找了各种资料之后，发现了一种就使用几行css代码就实现这个效果的方式，在这里分享给各位小伙伴们。功能描述：实现下图的镂空效果代码展示：.mask{position:absolute;bottom:20rpx;left:50%;transform:translateX(-50%);width:90%;height:500r
  • 对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端 昨今 前端htmlcss
    1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
  • 高级前端工程师Vue面试题 盼盼盼 面试题前端前端
    HTML/CSS1.解释HTML5中的元素及其用途。元素用于通过JavaScript绘制图形，比如图表、图像处理等。它提供了一个图形上下文，可以进行2D图形绘制。2.CSS中display:none和visibility:hidden有什么区别？display:none会将元素从文档流中完全移除，不占据空间。而visibility:hidden则元素依然占据空间，只是变得不可见。3.描述CSSFl
  • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了 阿毛sky electronvue前端
    由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
  • 【CSS】图片比例完整展示与滚动查看 Peter-Lu #CSS开发语言前端css
    文章目录一、问题背景二、问题分析为什么`100vh`会压缩图片高度？为什么固定像素高度有效？三、解决方案与改进1.页面布局代码2.样式代码3.核心点解读容器高度图片样式滚动支持在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决100vh固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。一、问
  • nodejs：express + js-mdict 网页查询英汉词典，能播放声音 belldeep nodejsweb服务nodejsexpressjs-mdict
    向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.
  • nodejs：express + js-mdict 网页查询英汉词典，能显示图片 belldeep nodejsjavascriptnodejsjavascriptjs-mdictexpress
    向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉
  • 使用JavaScript设计一款简单的数字时钟 布啦啦李 javascript时钟
    本文目录使用JavaScript设计一款带日期显示的数字时钟效果预览1.项目概述2.HTML结构代码说明3.CSS样式代码说明4.JavaScript逻辑代码说明5.运行效果使用JavaScript设计一款带日期显示的数字时钟本文将详细介绍如何使用HTML、CSS和JavaScript设计一款带日期显示的数字时钟。我们将逐步讲解每一行代码的作用，帮助你理解如何实现一个实时更新的时钟，并扩展功能以显
  • qt 使用qss控制界面外观 yaofei2006 qt开发语言ui
    在Qt中，QSS（QtStyleSheets）是一种基于CSS（CascadingStyleSheets）的样式表语言，用于自定义Qt应用程序的外观。通过QSS，你可以轻松地修改控件的颜色、字体、边框、背景等属性，而无需修改代码。以下是使用QSS的详细指南：1.基本语法QSS的语法与CSS类似，由选择器和声明块组成：选择器{属性:值;属性:值;}示例QPushButton{background-c
  • 前端开发：CSS选择器 qincjun css前端
    一、基础选择器1.1标签选择器通用型，一次将所有的同类型标签设置成相同属性；p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名；是此类名的是一样的CSS格式睡觉//一个元素可以赋予多
  • 前端框架Vue内容回顾 GISer_Jinger JavascriptVue前端框架vue.js前端
    前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采
  • 探索 Elm 的 Material Design 组件库：elm-mdl 薄垚宝
    探索Elm的MaterialDesign组件库：elm-mdlelm-mdlElm-portoftheMaterialDesignLiteCSS/JSlibrary项目地址:https://gitcode.com/gh_mirrors/el/elm-mdl项目介绍elm-mdl是一个基于Elm语言的MaterialDesign组件库，它是对Google的MaterialDesignLite库的El
  • css总结 threesevens 前端css前端
    一、CSS引入二、CSS基本选择器1.通配选择器为所有元素设置样式*{padding:0;margin:0;}2.元素选择器为某种元素统一设置样式p{color:red;}3.类选择器为某个类名统一设置样式.className{color:red;}4.ID选择器为某个ID设置样式#idName{color:red;}三、复合选择器1.交集选择器选中同时符合多个条件的元素/*选中同时包含pid="
  • 记录一次 vue3 + ele pls 改写 饿了么主题色实践 Ashy- 前端笔记前端vue.js
    一、改写element主题色在main.ts中引入需要改写的scss文件main.ts:import'element-plus/dist/index.css'import'./styles/element-plus.scss'在自定义的element-plus.scss文件中改写elepls的变量element-plus.scss：/***更改主题色*/:root{--el-color-prima
  • css:position 吴永琦（桂林电子科技大学） web前端前端技术javascript
    position属性是CSS中用于控制元素定位的重要属性，它决定了元素在文档中的定位方式以及如何响应top、right、bottom、left属性。下面详细介绍各个取值及其特点：static（默认值）描述：所有元素默认的定位方式，按照正常的文档流进行排布。特点：不受top、left、bottom、right属性影响。不会产生新的定位上下文，也不会改变元素原有的位置。relative（相对定位）描述
  • This dependency was not found: * @logicflow/core/dist/LogicFlow.css 计算机辅助工程 css前端
    在使用@logicflow/core这个库时，如果你遇到了找不到@logicflow/core/dist/LogicFlow.css的问题，通常是因为你没有正确地安装或引入该库的CSS文件。以下是几个步骤来帮助你解决这个问题：确认安装首先，确保你已经正确安装了@logicflow/core。你可以通过运行以下命令来安装它（如果你还没有安装的话）：npminstall@logicflow/core引
  • 一文讲清前端热更新 艾米栗写代码 前端
    引言前端开发中，“保存代码后页面自动刷新”早已成为开发者的标配体验。但你是否思考过，为什么某些场景下修改代码后页面无需完全刷新，甚至能保留当前状态（如表单输入、滚动位置）？这背后的核心机制就是热更新（HotModuleReplacement,HMR）。本文将从现象出发，逐步拆解其实现原理，并揭示其中涉及的关键技术。一、热更新的“现象”：开发者眼中的魔法假设你正在开发一个React应用：修改CSS文
  • matlab调用cst计算扫频,CST MWS I算法求解单站RCS是否可以进行扫频设置 林为珮 matlab调用cst计算扫频
    如题，利用I算法的FastRCSSweep求解单站RCS是否可以添加扫频设置？如果有如何添加？因为需要，必须计算一个介质目标的单站RCS，所以A算法用不了了。而I算法里面的快速RCS里又没找到扫频的设置，我知道有双站远场监视器的宏，但是单站RCS就不知道怎么办了，请各位大大帮忙解答网友回复:看看在这里设置一下fromto能不能解决扫频问题。网友回复:提供一个新思路，如果是介质的话可以用涂覆操作，这
  • vue3 使用 highlight 穿越到未来calc 模板vue.jsjavascript前端
    1.安装：npminstall--savehighlight.jsnpminstall--save@highlightjs/vue-plugin2.main.js中导入：import'highlight.js/styles/atom-one-dark.css'import'highlight.js/lib/common'importhljsVuePluginfrom'@highlightjs/vu
  • 后端学习前端-html+css 想要变瘦的小码头 后端学前端前端学习html
    第一章.HTML与CSSHTML是什么：即HyperTextMarkuplanguage超文本标记语言，咱们熟知的网页就是用它编写的，HTML的作用是定义网页的内容和结构。HyperText是指用超链接的方式组织网页，把网页联系起来Markup是指用的方式赋予内容不同的功能和含义CSS是什么：即CascadingStyleSheets级联（层叠）样式表，它描述了网页的表现与展示效果1.HTML元素
  • css块级元素和行内元素区别 serve the people 日常琐问css前端
    在CSS中，元素可以分为两大类：块级元素（Block-levelelements）和行内元素（Inlineelements）。这两种元素在网页布局中起着不同的作用，主要体现在它们的显示方式、尺寸控制、以及与其他元素的交互方式上。块级元素（Block-levelelements）特点：独占一行：块级元素会独占一行，在其前后会自动添加换行符。可设置宽度和高度：可以设置width和height属性来改变
  • CSS 核心技术知识点详解：从基础到进阶 秋水为渡 前端css
    本文基于图中提供的17个CSS核心知识点展开讲解，涵盖基础概念、布局原理、实战技巧及性能优化等内容。每个知识点均附代码示例和原理分析，帮助读者系统性掌握CSS核心能力。1.选择器作用：定位HTML元素并应用样式。常见类型：类选择器：.class-name{...}ID选择器：#id-name{...}属性选择器：[type="text"]{...}代码示例：.button{color:red;}/
  • 【CSS进阶】CSS元素的水平、垂直居中方法 Bl_a_ck html与css进阶css前端javascripthtml5bootstrapcss3less
    在前端开发中，实现水平居中和垂直居中是常见的需求。不同的HTML元素（块级元素、行内元素、行内块元素）以及不同的布局方式（传统布局、Flexbox、Grid、绝对定位）会有不同的居中方法。以下是各类居中方式的总结：1.水平居中（HorizontalCentering）1.1图片水平居中方法1：background-position当使用background-image设置背景图片时，可以通过bac
  • Webpack 打包性能优化指南 不知名靓仔 webpack性能优化前端
    引言Webpack是一款非常强大的模块打包工具，它能够将各种资源（如JS、CSS、图片等）打包成一个或多个浏览器可以理解的文件。然而，在处理大型项目时，Webpack的打包速度可能会变得相当慢，这直接影响到了开发效率。本文将介绍一些实用的技巧和最佳实践，帮助你优化Webpack的打包性能。1.Webpack基础1.1什么是Webpack？Webpack是一个模块打包器，它能够分析项目的依赖关系图，
  • 教育定制开发中，如何通过代码实现多终端适配？ 万岳科技系统开发 外卖系统外卖系统开发小程序android开源
    随着移动设备、平板电脑和PC的普及，教育平台的用户往往使用多种终端访问系统。为了提供一致的用户体验，教育定制开发必须考虑多终端适配问题。本文将探讨在教育系统开发中，如何通过代码实现多终端适配，并提供一些核心技术和代码示例。一、多终端适配的关键技术响应式设计（ResponsiveDesign）使用CSS媒体查询，根据屏幕大小动态调整页面布局。前端框架支持借助前端框架如Bootstrap、Tailwi
  • 戴尔笔记本win8系统改装win7系统 sophia天雪 win7戴尔改装系统win8
    戴尔win8 系统改装win7 系统详述 第一步：使用U盘制作虚拟光驱：         1）下载安装UltraISO：注册码可以在网上搜索。         2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
  • BeanUtils.copyProperties使用笔记 bylijinnan java
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
  • MyEclipse中文乱码问题 0624chenhong MyEclipse
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
  • 发送邮件 不懂事的小屁孩 send email
    import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
  • 动画合集 换个号韩国红果果 htmlcss
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition  制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
  • 网络最常见的攻击方式竟然是SQL注入 蓝儿唯美 sql注入
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
  • java笔记2 a-john java
    类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性：       4.1设置
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 我就看了一下，和她要了psd的文件，还好我有一点
  • 自己写的一个繁体到简体的转换程序 asialee java转换繁体filter简体
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。          实现的思路是重载request的调取参数的几个方法，然后做下转换。          
  • android意图和意图监听器技术 百合不是茶 android显示意图隐式意图意图监听器
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递   显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。   隐式意图;不指明调用的名称,根据设
  • spring3中新增的@value注解 bijian1013 javaspring@Value
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入：  <beans xmlns="http://www.springframework.
  • Jboss启用CXF日志 sunjing logjbossCXF
    1. 在standalone.xml配置文件中添加system-properties：     <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
      编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包       Firebugs3.0.0   http://sourceforge.jp/projects/sfnet_findbug
  • struts2验证框架的使用和扩展 白糖_ 框架xmlbeanstruts正则表达式
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 本文介绍一下struts2通过xml文件进行校验的方法并说
  • 记录-感悟 braveCS 感悟
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。   2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
  • 编程之美-数组中最长递增子序列 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美 数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
  • 读书笔记5 chengxuyuancsdn 重复提交struts2的token验证
    1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
  • [时空与探索]全球联合进行第二次费城实验的可能性 comsci
         二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验   至今给我们大家留下很多迷团.....      关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了      在这里,我的意思是,现在
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracleORA-12154
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
  • 简单排序:归并排序 dieslrae 归并排序
    public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
  • C语言中字符串的\0和空格 dcj3sjt126com c
       \0 为字符串结束符，比如说：                       abcd (空格)cdefg； 存入数组时，空格作为一个字符占有一个字节的空间，我们
  • 解决Composer国内速度慢的办法 dcj3sjt126com Composer
    用法： 有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
  • 高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
    /** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); }   /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
  • 三点定位的算法 haoningabc c算法
    三点定位， 已知a,b,c三个顶点的x,y坐标 和三个点都z坐标的距离，la，lb,lc 求z点的坐标 原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 但是，由于三个点的距离可能不准，不一定会有结果， 所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
  • epoll使用详解 jimmee clinux服务端编程epoll
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
  • Hibernate对Enum的映射的基本使用方法 linzx0212 enumHibernate
      枚举   /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
  • 第10章 高级事件（下） onestopweb 事件
    index.html <!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/
  • 孙子兵法 roadrunners 孙子兵法
    始计第一 孙子曰： 兵者，国之大事，死生之地，存亡之道，不可不察也。 故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 之以计，而索其情，曰
  • MySQL双向复制 tomcat_oracle mysql
    本文包括: 主机配置 从机配置 建立主-从复制 建立双向复制   背景 按照以下简单的步骤: 参考一下： 在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点   步骤1：机器A设置主机 在主机中打开配置文件 ,
  • zoj 3822 Domination(dp) 阿尔萨斯 Mina
    题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他