让你的网站变成响应式的3个简单步骤

  如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）。

1 – 布局

　　当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。
　　当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  2.  
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  4.  
  5. <meta name="HandheldFriendly" content="true">
复制代码

 

      现在是时候添加一些媒体查询了。根据 W3C 网站，媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询，外观呈现可以针对特定范围内的输出设备，而不需要改变内容本身。换句话说，媒体查询让您的网站在各种各种显示器上看起来都很好，从小的智能手机到大的电脑屏幕等等。
　　 媒体查询取决于你的网站布局，所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是，下面的代码对于大多数网站都是一个很好的起点。在这个例子中，#primary 是主要内容区域，#secondary 是侧栏。
　　 从代码中你可以看到，我定义了两种规格：首先有一个最大宽度为1060px，为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。 第二个规格是用于平板电脑和更小的屏幕尺寸。
　　 由于智能手机的屏幕尺寸小，我决定给 #primary 设置100%的宽度，#secondary 也设置100%的宽度，他将在 #primary 下面。 正如我已经说过的，你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。
  1. /* Tablet Landscape */
  2.  
  3. @media screen and (max-width: 1060px) {
  4.  
  5.     #primary { width:67%; }
  6.  
  7.     #secondary { width:30%; margin-left:3%;}  
  8.  
  9. }
  10.  
  11.  
  12.  
  13. /* Tabled Portrait */
  14.  
  15. @media screen and (max-width: 768px) {
  16.  
  17.     #primary { width:100%; }
  18.  
  19.     #secondary { width:100%; margin:0; border:none; }
  20.  
  21. }
 
      完成以后，让我们看看你的布局是如何响应的。要做到这一点，我用这 Matt Kersley 创建的一款非常的响应式测试工具。

2 、媒体

　　一个响应式的布局是实现响应网站的第一步。现在，让我们把注意力集中在另外一个现代化网站非常重要的方面：媒体，如视频或图像。 下面的 CSS 代码将确保您的图像将永远不会大于他们的父容器，代码非常简单，适用于大多数网站。请注意，IE6 等旧的浏览器不支持 max-width 指令。
  1. img { max-width: 100%; }
复制代码
 
      虽然上述技术是有效的，有时你可能需要有更多的图像控制权，例如根据客户端的显示大小，显示不同的图像。
　　这是由 Nicolas Gallagher 发明的好方法。让我们看看 HTML：
  1. <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
复制代码

        正如你可以看到，我们使用 data-* 属性来存储替换图像的 URL。现在，让我们使用强大的CSS3 来为匹配 min-device-width 条件的媒体指定替换图像：
  1. @media (min-device-width:600px) {
  2.  
  3.     img[data-src-600px] {
  4.  
  5.         content: attr(data-src-600px, url);
  6.  
  7.     }
  8.  
  9. }
  10.  
  11.  
  12.  
  13. @media (min-device-width:800px) {
  14.  
  15.     img[data-src-800px] {
  16.  
  17.         content: attr(data-src-800px, url);
  18.  
  19.     }
  20.  
  21. }
 
       令人印象深刻，是不是？现在，让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站，我决定把重点放在 Nick La 的弹性视频技术，这种技术可让您嵌入的响应式的视频。

HTML：
  1. <div class="video-container">
  2.  
  3.     <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
  4.  
  5. </div>
复制代码

CSS：
  1. .video-container {
  2.  
  3.     position: relative;
  4.  
  5.     padding-bottom: 56.25%;
  6.  
  7.     padding-top: 30px;
  8.  
  9.     height: 0;
  10.  
  11.     overflow: hidden;
  12.  
  13. }
  14.  
  15.  
  16.  
  17. .video-container iframe,  
  18.  
  19. .video-container object,  
  20.  
  21. .video-container embed {
  22.  
  23.     position: absolute;
  24.  
  25.     top: 0;
  26.  
  27.     left: 0;
  28.  
  29.     width: 100%;
  30.  
  31.     height: 100%;
  32.  
  33. }
       在你的网站上应用了这些代码后，嵌入的视频也是响应式（Responsive）的了。

3 – 字体

       本教程的最后一步绝对非常重要，但往往被网站开发人员忽视——字体。到现在为止，大多数开发人员（包括我自己）使用像素来定义字体的大小。虽然像素在普通网站使用是OK的，但是对于响应式网站来说应该有响应式的字体。事实上，一个响应式的字体大小应关联它的父容器的宽度，这样它才可以适应客户端的屏幕。
　　 CSS3 规范引入了一个新的单位叫 rem，和 em 类相似，但相对于 HTML 元素来说， rem 更易于使用。
　　 rem 是相对于 HTML 元素的，不要忘了重置 HTML 的字体大小：
  1. html { font-size:100%; }
完成后，您可以定义响应式的字体大小，如下所示：
  1. @media (min-width: 640px) { body {font-size:1rem;} } 
  2.  
  3. @media (min-width:960px) { body {font-size:1.2rem;} } 
  4.  
  5. @media (min-width:1100px) { body {font-size:1.5rem;} }

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

  • 【从零开始：如何用Vue3打造响应式个人博客网站】 小怪兽9699 vue.jsjavascriptecmascript
    前言在前端开发领域，Vue.js是一个非常流行且强大的框架。本文将详细介绍如何使用Vue3构建一个完整的响应式个人博客网站。无论你是初学者还是有一定经验的开发者，本文都将为你提供详细的步骤和代码示例。1.环境搭建首先，确保你已经安装了Node.js和npm。然后，全局安装VueCLI：npminstall-g@vue/cli2.项目初始化使用VueCLI创建一个新的Vue项目：vuecreatem
  • ChatGPT + Vue3：如何打造 AI 智能助手？ Js_x chatgpt人工智能
    引言人工智能（AI）正快速渗透到前端开发领域，越来越多的开发者希望将ChatGPT集成到自己的应用中，为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手，让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术：Vue3-现代化的前端框架，响应式强，适合构建交互式应用。Vite-高效的Vue3项目构建工具，提升
  • React-state响应式内部数据(类组件&Hook两种方式整理) 一蓑烟雨，一任平生 Reactjavascript前端react.js
    类组件在类组件中要定义内部数据，由两种方案构造器里面定义state属性，在这个对象中定义你需要的数据constructor(){super()this.state={count:1}}在类的下面直接定义一个属性state(推荐)state={count:10}页面要使用state数据{this.state.count}建议大家在React中使用内部state数据的时候，使用解构的方式将内容解构出来
  • Vue2与Vue3：深入比较与迁移指南 布兰妮甜 #Vuevue2vue3迁移指南
    文章目录前言一、响应式系统的进化二、组合式API的引入三、生命周期钩子的变化四、新特性与优化五、迁移指南六、实际案例结语前言Vue.js自从2014年首次发布以来，凭借其简洁的语法、灵活的组件化架构以及高效的性能，迅速成为了最受欢迎的前端框架之一。随着技术的不断进步，Vue.js也在不断地迭代和优化，Vue3就是在这样的背景下诞生的。Vue3不仅带来了许多新特性和性能优化，还在API设计和开发者体
  • 1.1Vue 3 核心优势与架构革新 北辰alk vue.js架构前端
    文章目录**1.1Vue3核心优势与架构革新****一、设计哲学演进****二、响应式系统革命****三、组合式API范式****四、编译器架构升级****五、类型系统集成****六、生态融合能力****七、性能基准对比****八、架构升级路线****本章深度总结**1.1Vue3核心优势与架构革新一、设计哲学演进渐进式框架的终极形态模块化架构：通过@vue/reactivity、@vue/run
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • 【Vue.js 2.x源码解析】第18章 从Vue源码分析计算属性与侦听属性的本质差别 代码简单说 教你读懂Vue2.x源码vue.js前端javascript
    想深入了解Vue2.x源码底层原理实现，从编译系统、渲染系统到响应式系统vue-router和vuex等实现方式可以关注『Vue.js2.x源码精讲』专栏或查看专栏目录了解详情从Vue源码分析计算属性与侦听属性的本质差别计算属性（Computed）——了解它，你就能高效利用它`defineComputed`和`createComputedGetter`侦听属性（Watch）——灵活监听变化`wat
  • 深入理解Vue 3：计算属性与侦听器的艺术 qcidyu 实战案例性能优化模板路由侦听器计算属性Vue3
    title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性
  • 前端学习路线：从零基础到初级工程师的完整指南（2025最新版） 超浪的晨 前端学习
    前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体
  • HarmonyOS NEXT ArkTS布局优化与性能提升指南 架构教育
    在ArkTS应用开发中，布局优化和性能提升是确保应用流畅运行的关键。本文将从避免二次布局、优先使用layoutWeight、响应式布局设计、懒加载、优化大型对象更新以及内存管理六个方面，探讨如何优化布局和提升性能。避免不必要的二次布局二次布局通常发生在子元素尺寸或位置发生变化时，导致父容器需要重新计算布局。以下是常见的二次布局场景及优化方法：场景1：动态改变子元素尺寸当子元素的尺寸动态变化时（如字
  • SwiftUI 内功：探索 SwiftUI 的默认架构 YUELJe swiftui架构iosswift
    SwiftUI内功：探索SwiftUI的默认架构SwiftUI是一种用于构建iOS、macOS、watchOS和tvOS应用程序界面的现代化框架。它提供了一种声明式的方式来构建用户界面，使开发人员可以更轻松地创建交互式、响应式的应用程序。在本文中，我们将深入探讨SwiftUI的默认架构，并通过源代码示例来说明其工作原理。SwiftUI的默认架构基于一种称为“状态驱动”的模式。它使用一组可变状态来描
  • HarmonyOS NEXT ArkTS布局优化与性能提升指南 架构教育
    在ArkTS应用开发中，布局优化和性能提升是确保应用流畅运行的关键。本文将从避免二次布局、优先使用layoutWeight、响应式布局设计、懒加载、优化大型对象更新以及内存管理六个方面，探讨如何优化布局和提升性能。避免不必要的二次布局二次布局通常发生在子元素尺寸或位置发生变化时，导致父容器需要重新计算布局。以下是常见的二次布局场景及优化方法：场景1：动态改变子元素尺寸当子元素的尺寸动态变化时（如字
  • vue2和vue3的响应式原理有何不同？
    大家好，我是V哥。Vue2和Vue3在响应式原理上存在显著差异，下面为你详细介绍。如果你是前端开发，V哥建议抓紧入坑鸿蒙，2025年鸿蒙趋势将引领国产化替代的新征程，大量内推岗位等你来拿。推荐一本鸿蒙NEXT书《鸿蒙HarmonyOS开发之路》卷1，可以让你少走弯路。Vue2响应式原理Vue2使用Object.defineProperty()方法来实现响应式系统。该方法可以直接在一个对象上定义一个
  • Vue 3 vs Vue 2：深入解析从性能优化到源码层面的进化 银之夏雪 vue.js性能优化前端
    Vue.js是当今前端开发中最受欢迎的框架之一。随着Vue3的发布，它在性能优化、开发体验、响应式系统、构建工具和热更新等多个方面都带来了巨大提升。本文将深入剖析Vue3的进化，包括其源码实现方面的优化，如diff算法、静态标记、编译优化，以及Vue3在热更新、构建工具上的改进。1.性能提升：底层优化的革命1.1响应式系统的改进：从Object.defineProperty到ProxyVue2的响
  • Android开源库——RxJava和RxAndroid 松仔log #Android开源库android开源rxjava
    RxJava和RxAndroid是什么？RxJava是基于JVM的响应式扩展，用于编写异步代码RxAndroid是关于Android的RxJava绑定RxJava和RxAndroid使用依赖implementation'io.reactivex.rxjava3:rxjava:3.1.0'implementation'io.reactivex.rxjava3:rxandroid:3.0.2'使用过程
  • 探索未来架构：基于AWS的响应式微服务框架 柏赢安Simona
    探索未来架构：基于AWS的响应式微服务框架reactive-refarch-cloudformationReactiveMicroservicesArchitectureswithAmazonECS,AWSLambda,AmazonKinesisStreams,AmazonElastiCache,andAmazonDynamoDB项目地址:https://gitcode.com/gh_mirror
  • 深入理解 Android 中的 ViewModel 和 LiveData：实现数据与 UI 的分离与响应式更新 tangweiguo03051987 androidandroiduiViewModelLiveData
    ViewModel和LiveData是Android架构组件中的两个核心类，用于帮助开发者构建健壮、可维护且响应迅速的应用程序。它们通常一起使用，以实现数据与UI的分离，并确保数据在配置更改（如屏幕旋转）时不会丢失。ViewModelViewModel的主要目的是管理与UI相关的数据，并在配置更改时保持数据的持久性。它允许数据在Activity或Fragment销毁和重新创建时保持不变。1.1Vi
  • 他来了，为大模型量身定制的响应式编程范式（1） —— 从接入 DeepSeek 开始吧 CodeCaster langchainaijava
    哒哒哒，他来了！今天我们要介绍一种新型的Java响应式大模型编程范式——FEL。你可能听说过langchain，那么你暂且可以把FEL看作是Java版本的langchain。话不多说，今天我们就从接入当前热门的DeepSeek开始，带大家认识一下FEL。通过FEL，你可以轻松实现大模型应用的编排和运行，开启智能编程的新篇章！️快速上手：轻松接入DeepSeek1.准备环境首先，进入老生常谈的环节—
  • RxSqlUtils（base R2dbc） xdpcxq1029 技术分享oracle数据库
    一、前言随着Solon3.0和Solon-Rx3.0发布，用于“响应式”操作数据库。RxSqlUtils是基于R2dbc和Reactor接口构建。极简风格，就像个工具类，故名：RxSqlUtils。尤其在solon-web-rx和场景开发时，RxSqlUtils会是最好的良配。二、RxSqlUtils使用1、引入依赖org.noearsolon-data-rx-sqlutils2、新建数据库表（f
  • （一）响应式编程理论 糖心何包蛋爱编程 响应式编程java响应式框架经验分享
    小编大学毕业后面试的第一家公司问我会响应式吗，我当时觉得好陌生呀，完全没有听说过的名词，还在那里胡编乱造说一堆，但是也不是完全没有沾边，提到了Java8的新特性，现在想想也是印象很深，但好在成功拿到offer,入职后我就很努力的恶补很多相关知识，现在纯纯就是干货拿来分享，让你少走弯路。在了解响应式编程之后，发现响应式编程在行业内还没有普及，因为这对程序员有比较高的要求，不比传统编程好调试，但是当我
  • （二）Reactor核心-前置知识1 糖心何包蛋爱编程 响应式编程java响应式编程Lambda表达式干货分享
    本章是Reactor核心-前置知识（第一期），主要讲解Lambda表达式。回忆上一章我们学习了什么是响应式编程、基础概念、必读知识。一篇文章我不想写得太长了，文章不像是视频或者图片比较生动，文章太长了容易犯困。所以我直接上干货，能插图的地方我尽量插图，希望您能坚持看完。觉得有用的话点赞加藏关注，这就是我文思泉涌的动力。一、lambda表达式Lambda表达式是Java8引入的一个重要特性，它是一种
  • Web三要素：CSS之Flex/Grid布局(4) 双囍菜菜 前端随记前端css
    CSS布局革命：Flex与Grid的双子星战法文章目录CSS布局革命：Flex与Grid的双子星战法一、布局进化史：从洪荒时代到现代文明二、Flex布局：一维空间的舞蹈家2.1核心概念深度解析容器属性详解：2.2典型应用场景实战导航栏布局（React示例）垂直居中（Vue示例）三、Grid布局：二维空间的指挥官3.1网格系统深度解析核心概念图解：3.2高级布局技巧实战响应式网格（React示例）复
  • CSS伸缩盒模型(弹性盒子) 申朝先生 css前端
    伸缩盒模型（Flexbox，FlexibleBoxLayout）是CSS中一种一维布局模型，用于更高效地处理元素的对齐、分布和响应式布局。其核心思想是让容器内的子元素（称为“项目”）能够灵活地自动调整大小和位置以适应不同屏幕尺寸和内容变化。1.核心特性1.1容器与项目容器：使用display:flex或display:inline-flex定义的父元素。项目：容器内的直接子元素，默认沿容器的主轴排
  • 从底层到实践：深度解析 Vue Composition API 与 React Hooks 的异同
    一、设计哲学与底层原理差异1.1响应式系统的基因差异Vue3的CompositionAPI建立在Proxy-based响应式系统之上，通过劫持对象的getter/setter实现依赖收集。当访问响应式对象时，Vue会自动建立组件与数据的依赖关系。//Vue响应式原理简版实现functionreactive(obj){returnnewProxy(obj,{get(target,key){track
  • 深入解析 Vue 3 Teleport：原理、应用与最佳实践 赵大仁 前端Vue.js技术vue.jsjavascript前端
    深入解析Vue3Teleport：原理、应用与最佳实践1.引言Vue3引入了Teleport组件，它可以让我们将组件的渲染位置从当前组件层级移动到DOM的其他位置，而不影响Vue的响应式和组件状态管理。在开发中，我们经常遇到模态框、通知、弹窗、工具提示（Tooltip）等UI组件，这些组件通常需要被渲染到body或特定DOM节点，以避免z-index层级问题。Vue3的Teleport解决了这个问
  • React 和 Vue _使用区别 开心小老虎 react知识点+组件vue3知识点+组件前端知识点vue.jsreact.js前端
    目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
  • C# 事件使用详解 鲤籽鲲 C#c#C#知识捡漏开发语言
    总目录前言在C#中，事件（Events）是一种基于委托的重要机制，用于实现对象之间的松耦合通信。它通过发布-订阅模式（Publisher-SubscriberPattern），允许一个对象（发布者）在特定条件发生时通知其他对象（订阅者）执行相应操作。事件是构建响应式、动态应用程序的核心工具，广泛应用于UI交互、游戏开发、网络通信等领域。本文将全面详细地介绍C#事件的使用，包括事件的定义、发布、订阅
  • 对vue VS react的理解 向贤 前端开发vue.jsreact.js前端
    对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • 响应式设计已死？流体布局才是未来！ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在当今的Web设计领域，挑战从未如此巨大。各种屏幕尺寸和分辨率的智能设备层出不穷，要让网站在所有设备上保持一致的用户体验，难度可想而知。但别担心，流体布局（FluidLayout）正是为了解决这一问题而生。它不仅适用于超大屏幕，同样也能完美适配小型移动设备，真正做到自适应！接下来，我们深入了解流体布局的原理
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
  • 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5
    读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。  
  • [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
  • 算法之时间复杂度 周凡杨 java算法时间复杂度效率
          在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法，
  • Java事务处理 g21121 java
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
  • Linux awk命令详解 510888780 linux
    一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
  • android permission 布衣凌宇 Permission
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
  • Oracle和谷歌Java Android官司将推迟 aijuans javaoracle
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
  • linux shell 常用命令 antlove linuxshellcommand
    grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA
  • underscore.js 学习（二） bijian1013 JavaScriptunderscore
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
  • plSql介绍 bijian1013 oracle数据库plsql
    /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
  • 【Nginx一】Nginx安装与总体介绍 bit1129 nginx
    启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件  
  • spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
  • Lua的io库函数列表 ronin47 lua io
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
  • java-26-左旋转字符串 bylijinnan java
    public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
  • 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
  • [轨道与计算]新的并行计算架构 comsci 并行计算
         我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？      
  • 重复执行某段代码 dai_lm android
    用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
  • Java实现堆栈（list实现） datageek 数据结构——堆栈
    public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
  • 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup
    一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co
  • github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤
  • ">的作用" target="_blank">JSP中的作用 蕃薯耀
    JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • linux下SAMBA服务安装与配置 hanqunfeng linux
    局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
  • guava cache IXHONG cache
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   (
  • 美国人的福利和中国人的储蓄 nannan408
       今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
  • N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
    package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
  • C语言算法之打渔晒网问题 qiufeihu c算法
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
  • XML中DOCTYPE字段的解析 wyzuomumu xml
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他