squall140
squall140

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

　　例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。

CSS3 Media Queries

看下这个 在线演示，调整你的浏览器窗口尺寸，看看它的变化。

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

?
1
2
3
4
5
@media screen  and ( max-width : 600px ) {
   .class {
     background : #ccc ;
   }
}

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

?
1
< link  rel = "stylesheet"  media = "screen and (max-width: 600px)"  href = "small.css"  />

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

?
1
2
3
4
5
@media screen  and ( min-width : 900px ) {
   .class {
     background : #666 ;
   }
}

Multiple Media Queries

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

?
1
2
3
4
5
@media screen  and ( min-width : 600px ) and ( max-width : 900px ) {
   .class {
     background : #333 ;
   }
}

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

?
1
2
3
4
5
@media screen  and (max-device- width : 480px ) {
   .class {
     background : #000 ;
   }
}　

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

?
1
< link  rel = "stylesheet"  media = "only screen and (-webkit-min-device-pixel-ratio: 2)"  type = "text/css"  href = "iphone4.css"  />　

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

?
1
2
< link  rel = "stylesheet"  media = "all and (orientation:portrait)"  href = "portrait.css" >
< link  rel = "stylesheet"  media = "all and (orientation:landscape)"  href = "landscape.css" >　

Media Queries for IE

遗憾是的，IE8 及更老版本的浏览器不支持 CSS3 Media Queries，不过可以使用 Javascript  弥补，下面是一些解决方案：

附：CSS3 Media Queries 浏览器兼容性表

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第1张图片

 

CSS3 Media Queries 应用案例

需要在下面这些支持 Media Queries 特性的浏览器中浏览：IE9+, Firefox, Chrome 和 Safari。浏览每个站点，看页面布局是如何响应浏览器窗口变化的。

Hicksdesign

  • 大尺寸: 3 列侧栏
  • 较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)
  • 更小尺寸: 1 列侧栏 (右列上移到标志下方)
  • 最小尺寸: 没有侧栏 (LOGO及右列上移，其他侧边栏列移到底部)

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第2张图片

Colly

页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第3张图片

A List Apart

  • 大尺寸: 导航在顶部，图片只有一行。
  • 中等尺寸: 导航在左边，图片变成3列。
  • 小尺寸: 导航在顶部，LOGO没有了背景图片，图片变成3列。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第4张图片

Tee Gallery

这个和前面的 Colly 很像，不过这个案例中的图片也会随着布局的变化而变化。技巧是使用百分比设置元素的宽度。

【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_第5张图片

总结

　　请记住：为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化，要削减图像大小、标签数量和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现，而不是优化。

你可能感兴趣的:(响应式设计)

  • Vue.js从入门到就业[第20讲]：响应式设计与调优，一文吃透它！ bug菌¹ #滚雪球学Vuevue.jsflutter前端响应式设计Vue调优Vue入门
    本文收录于「Vue.js从入门到就业」专栏，手把手带你零基础教学Vue，从入门到就业，助你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！本文目录:前言摘要正文1.Vue.js的响应式系统原理1.1Vue.js响应式系统的核心Vue2与Vue3的响应式系统响应式数据的实现1.2Vue2与Vue3响应式系统的差异Vue2的局限性Vue3的优势1.3响应式系统
  • 【Axure 模版素材】Arco Design组件库 - AxureMost AxureMost NPDP产品经理开源知识库axure产品经理
    【Axure】ArcoDesign组件库/元件库ArcoDesign组件库旨在提供一套高效、美观的企业级设计解决方案。它包含丰富的组件和样式，覆盖了多种交互场景。以下是ArcoDesign组件库中的一些关键样式和组件特性：基础样式:颜色主题：提供丰富的颜色主题配置，支持自定义，包括基础颜色、字体、阴影等，且支持可视化编辑与实时预览。布局：基于模块化设计，提供灵活的布局方案，支持响应式设计，便于构建
  • 深度解析：世界上最先进的响应式前端框架——Foundation Sites 小海的小窝 前端框架开源
    1.引言在现代网页开发中，响应式设计已经成为必不可少的要求。无论是手机、平板，还是桌面设备，用户都期望能获得一致且流畅的浏览体验。为满足这种需求，开发者们纷纷寻求强大且灵活的前端框架。FoundationSites正是在这种背景下应运而生的，它被誉为世界上最先进的响应式前端框架之一，不仅为开发者提供了快速创建原型的能力，还能够生成适用于各种设备的生产级代码。2.FoundationSites的背景
  • 高级红色西餐美食企业网站模板 酸甜草莓二侠
    本文还有配套的精品资源，点击获取简介：这是一个专为西餐美食企业设计的网站模板，以红色为主色调，通过专业且美观的设计吸引顾客。模板包含多个页面布局，如首页、菜单页、关于我们、联系我们等，以展示企业品牌和菜品信息。具有响应式设计，兼容多种设备。模板附带安装和使用指南，用户可根据需求进行定制。1.西餐美食企业网站模板概述简介在当今数字化时代，企业官网是品牌身份的重要展现形式，对于西餐美食企业尤为如此。一
  • Vue 全局自适应大小：使用 postcss-pxtorem 前端程序猿i vue.jspostcss前端
    在现代前端开发中，响应式设计已经成为不可或缺的一部分。尤其是在移动设备的普及下，保证网页在各种屏幕尺寸下的显示效果变得尤为重要。Vue.js作为一个流行的前端框架，能够很方便地实现响应式设计。而在这方面，postcss-pxtorem是一个非常有用的工具，它可以将px单位自动转换为rem单位，从而实现更好的自适应布局。本文将介绍如何在Vue项目中使用postcss-pxtorem实现全局自适应大小
  • 深入探讨Web应用开发：从前端到后端的全栈实践 禁默 前端
    目录引言1.Web应用开发的基本架构2.前端开发技术HTML、CSS和JavaScript前端框架与库响应式设计与移动优先3.后端开发技术Node.js（JavaScript后端）Python（Flask和Django）RubyonRailsJava（SpringBoot）4.数据库选择与管理关系型数据库（SQL）非关系型数据库（NoSQL）5.API设计与开发RESTfulAPIGraphQL6
  • Bootstrap UI 编辑器：简化前端开发的利器 lsx202406 开发语言
    BootstrapUI编辑器：简化前端开发的利器引言在当今的网页设计和开发领域，Bootstrap已经成为了一个非常流行的前端框架。它以其响应式设计、简洁的代码和丰富的组件库而受到广大开发者的喜爱。然而，对于一些非技术背景的设计师或者初学者来说，直接使用Bootstrap可能会有一定的难度。这时，BootstrapUI编辑器就成为了他们的救星。本文将详细介绍BootstrapUI编辑器的概念、特点
  • 【商城系统技术选型】 启山智软 商城 源码 微信小程序小程序java
    商城系统技术选型是一个复杂但至关重要的过程，它直接关系到商城系统的性能、可扩展性、安全性以及用户体验等多个方面。以下是一些关键的技术选型考虑因素：前端技术选型框架选择：React或Vue.js等流行前端框架是不错的选择，它们具有良好的可组件化和可重用性，且社区资源丰富，有大量的插件和工具可供使用，能提高开发效率和界面的交互性。响应式设计：确保系统能自适应不同设备屏幕，如手机、平板、电脑等，提供一致
  • 常见的图形库对比 Echarts Highcharts AntV 后端java
    图形库图形库特点图表类型适用场景依赖项官网/文档ECharts功能丰富，支持大规模数据，交互性强折线图、柱状图、饼图、地图、雷达图、散点图、热力图等复杂数据可视化无https://echarts.apache.org/Chart.js简单易用，轻量级，支持响应式设计折线图、柱状图、饼图、雷达图、散点图等简单图表，快速开发无https://www.chartjs.org/D3.js功能强大，灵活性高
  • 【HarmonyOS】开启沉浸式（全屏）并动态获取窗口规避区的信息 m0_5南风 harmonyos华为
    鸿蒙开启沉浸式（全屏）并动态获取窗口规避区的信息动态获取窗口规避区的信息在移动端开发中至关重要，它能够提升用户体验，通过确保应用在不同设备和屏幕尺寸下合理利用可用空间，避免内容被状态栏或导航栏遮挡。此外，这种技术支持响应式设计，使得页面布局能够根据设备状态自动调整，适应小屏和分屏模式，确保信息的可见性和可访问性，从而解决了布局错位和内容遮挡的问题。知识点setWindowLayoutFullScr
  • Vue 和 uniApp 中 CSS 样式差别 洗发水很好用 vue.jsuni-appcss
    之前一直在做vue2的项目，最近开始uniapp的项目，发现两种项目之间css还是有亿点区别的。一、布局单位Vue2项目：通常使用px作为主要的长度单位，这是一个绝对单位，在不同设备屏幕上显示的物理尺寸相同。例如：.container{width:300px;height:200px;}在响应式设计中，可能会使用%或vw、vh等相对单位，以及媒体查询来适配不同的屏幕尺寸。例如：@media(max
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • html css网页制作成品 A_aspectJ项目开发 JavaWeb技术html
    前言在HTML和CSS中创建一个网页是一个简单的过程，但是要创建一个成品级的网页，你需要考虑更多的因素，例如：响应式设计：确保你的网页在不同的设备和屏幕尺寸上都能良好显示。访问性：确保你的网页对于大多数的用户都很友好。标准的遵从性：遵循HTML和CSS的最佳实践，以便更容易维护和更新。以下是一个简单的HTML和CSS结合的成品级网页示例：一、html代码header我的网站链接1链接2链接3链接4
  • 【Material-UI】Mini Variant Drawer 详解 Peter-Lu #material-uiuijavascript前端Material-UIreact.js
    文章目录一、Minivariantdrawer概述1.组件介绍2.Minivariantdrawer的核心特点二、Minivariantdrawer的基本实现三、Minivariantdrawer的细节解析1.展开与折叠的动态效果2.响应式设计3.适用场景四、如何在项目中使用Minivariantdrawer五、总结Material-UI是React生态系统中的一款强大且流行的UI框架，它提供了大
  • 推荐开源项目：WP-Player - 强大的WordPress音频与视频播放器 邹澜鹤Gardener
    推荐开源项目：WP-Player-强大的WordPress音频与视频播放器是一个专为WordPress设计的高效、灵活且功能丰富的多媒体播放器插件。它允许你在博客、新闻网站或其他基于WordPress的内容平台上无缝集成音频和视频内容，提供一流的用户体验。技术分析1.响应式设计WP-Player采用现代Web开发原则，支持响应式布局，无论在桌面、平板还是手机等不同设备上，都能自动调整以适应屏幕大小
  • PWA（Progressive Web App，渐进式网络应用） 秋夫人 计算机网络webapp计算机网络
    PWA（ProgressiveWebApp，渐进式网络应用）是一种结合了Web和原生应用程序最佳特性的现代Web应用程序开发方法。PWA旨在提供类似原生应用的用户体验，同时保持Web应用的灵活性和可访问性。PWA的主要特性：渐进式增强：能够在各种浏览器中运行，并根据设备能力逐步增强功能。响应式设计：适应不同的屏幕尺寸和设备类型。离线工作：利用ServiceWorkers技术，可以在离线或网络不稳定
  • jquery swiper插件的用法 A_aspectJ项目开发 JavaWeb技术jquery前端javascript
    一、Swiper插件简介Swiper是一个纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端，同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大，是架构移动终端网站的重要选择。它支持触摸滑动、响应式设计、循环滑动、分页器、滚动条等多种功能，非常适合用于轮播图、滑块导航等场景。以下是一个详细的Swiper插件教程及案例介绍。二、加载插件首先加载插件，需要用到的
  • 前端框架介绍 bigbig猩猩 前端框架
    前端框架是Web开发中不可或缺的工具，它们通过提供结构化的开发方式、模块化组件、响应式设计以及高效的性能优化，极大地简化了Web应用程序的开发过程。以下是对当前主流及新兴前端框架的详细介绍，这些框架不仅涵盖了广泛的功能，还具备各自独特的优势和适用场景。1.React概述：React是由Facebook开发的一个用于构建用户界面的JavaScript库。它最初于2011年推出，并迅速成为前端开发的热
  • CSS特效——图标图片悬浮旋转一周 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效——图标图片悬浮旋转一周引言基本概念CSS3动画基础示例一：简单的无限循环旋转HTML结构CSS样式代码解释示例二：添加延迟和方向控制CSS样式代码解释示例三：使用伪元素增强视觉效果CSS样式代码解释示例四：结合过渡效果CSS样式代码解释示例五：响应式设计CSS样式代码解释功能使用思路思路一：结合JavaScript控制动画思路二：利用数据属性动态设置动画思路三：多图标同步动画实际开发中
  • Bootstrap、Ant Design、Element UI特点和优势 Dingdangr bootstrapui
    在前端开发中，UI框架是提升开发效率、保持代码一致性和提高应用质量的重要工具。当前，市场上存在众多优秀的前端UI框架，其中Bootstrap、AntDesign、ElementUI等框架因其强大的功能和广泛的应用而备受推崇。以下将详细介绍这些框架的特点和优势。一、Bootstrap特点与优势：响应式设计：Bootstrap提供了一套完整的响应式网页设计框架，能够自动适应不同屏幕尺寸的设备，从手机到
  • Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕 HuiRonmantic 大前端前端信息可视化vue.js
    Vue自适应所有屏幕大小，目前页面自适应，尤其是数据可视化大屏的自适应更是案例很多今天就记录一下使用Vue全局自适应各种屏幕大小的功能在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。下面我将展示一个使用Vue2、Vuetify（一个基于MaterialDesign的VueUI框架）和Vuex（V
  • 深入解析HarmonyOS中的媒体查询及其高级用法 神码兄弟 HarmonyOS学习harmonyos媒体华为
    在移动应用开发中，响应式设计是一个关键要素。HarmonyOS提供了一整套媒体查询功能，可以让开发者根据设备类型、屏幕尺寸、方向等条件动态调整应用的布局和样式。本文将深入探讨HarmonyOS中的媒体查询功能，展示其高级用法，帮助你构建更灵活的用户界面。媒体查询在HarmonyOS中的作用媒体查询是一种强大的工具，它允许我们根据设备的属性或状态动态修改应用的样式。例如，在一个应用中，你可以使用媒体
  • 栅格布局在 HarmonyOS 中的应用及扩展 神码兄弟 HarmonyOS学习harmonyos华为
    栅格布局作为一种经典的布局方式，广泛应用于不同类型的用户界面设计，尤其是在移动设备和响应式设计中，它表现出了强大的适应性。本文将深入探讨如何在HarmonyOS中使用栅格布局组件GridRow和GridCol，并通过多种示例来展示栅格布局的灵活性及扩展性。栅格布局的核心优势1.提供规律性的布局结构栅格布局能够将页面划分为多个等宽的列和行，使得页面元素的定位和排列更加直观和有规律性。这种方式能够有效
  • 响应式Web设计：纯HTML和CSS的实现技巧 Min_nna ai分析csshtml
    响应式Web设计（ResponsiveWebDesign，RWD）是指网站能够根据不同设备的屏幕大小和分辨率自动调整布局和样式，以提供良好的用户体验。使用纯HTML和CSS实现响应式设计的技巧包括以下几个方面：使用流式布局百分比宽度：使用百分比代替固定宽度，使元素根据父容器的宽度调整大小。.container{width:100%;}.column{width:50%;/*每列占父容器的50%*/
  • 响应式Web设计（Responsive Web Design, RWD） hong161688 前端
    响应式Web设计（ResponsiveWebDesign,RWD）是一种网页设计策略，旨在确保网站能够在不同设备和屏幕尺寸上提供良好且一致的用户体验。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（MediaQueries）、灵活的布局、流式布局、相对单位、图片和字体的响应式处理等技巧。以下将详细探讨这些技巧及其在响应式Web设计中的应用。一、媒体查询（MediaQueries）媒体查询
  • 响应式 Web 设计：纯 HTML 和 CSS 的实现技巧 清水白石008 csshtmlWEB设计html
    响应式Web设计：纯HTML和CSS的实现技巧引言随着移动设备的普及，响应式Web设计（ResponsiveWebDesign,RWD）已成为现代网页开发的标准。响应式设计的目标是使网页在不同设备上（如手机、平板和桌面）都能良好显示，提供一致的用户体验。本文将深入探讨如何使用纯HTML和CSS实现响应式Web设计，提供实用的技巧和示例，帮助开发者构建灵活且美观的网页。一、响应式设计的基本概念响应式
  • CSS新增的单位ch 读心悦 深入浅出CSScss前端
    在CSS中，ch是一个相对单位，它代表数字0（零）的宽度，在当前的字体和字体大小下的度量。这个单位特别适用于需要基于字符宽度进行布局的场景，比如保持文本的垂直对齐或者在元素内部确保一定的空间以容纳文本字符。ch单位非常有用，因为它可以根据字体的实际宽度进行自动调整，这对于响应式设计尤其重要，因为不同的字体、字体大小以及浏览器渲染引擎可能会导致字符宽度的变化。使用示例假设你想要设置一个元素的宽度，使
  • 响应式 Web 设计：纯 HTML 和 CSS 的实现技巧 柯迪 edgehtml
    在当今多设备、多屏幕的网络环境中，响应式Web设计（ResponsiveWebDesign,RWD）已经成为构建用户友好网站的标准方法。响应式设计确保网站能够在各种设备和屏幕尺寸上提供一致的用户体验。虽然现代开发者常用JavaScript和框架来实现响应式设计，但本文将重点介绍如何使用纯HTML和CSS技术来实现这一目标。1.使用灵活的布局流式布局是响应式设计的基础，它允许页面布局根据屏幕宽度动态
  • 响应式Web设计：纯HTML和CSS的实现技巧-1 Dingdangr html
    响应式Web设计（ResponsiveWebDesign,RWD）是一种旨在确保网站在不同设备和屏幕尺寸下都能良好运行的网页设计策略。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（MediaQueries）、灵活的布局、可伸缩的图片和字体、以及适当的视口设置等技术。1.视口元标签（ViewportMetaTag）在HTML文档的部分添加视口元标签是响应式设计的基础。这个标签告诉浏览器如
  • 前端开发框架推荐总结二 Devil枫 前端框架前端
    在前端开发领域，框架的选择对于项目的成功至关重要。它们提供了丰富的组件、工具和最佳实践，帮助开发者快速构建出美观、功能强大的用户界面。本文将介绍下面四个前端开发框架：Bootstrap、easyui、jQueryUI和layui。一：Bootstrap特点:1.响应式设计：Bootstrap内置了强大的响应式布局系统，使得网页能够在不同设备和屏幕尺寸上都能良好地显示。2.丰富的组件：提供了大量的U
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他