zy95804667
zy95804667

【HTML5】用3个步骤实现响应式网页设计

 

    写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。

        文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

 

译自：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

        转载请注明：来自蒋宇捷的博客（http://blog.csdn.net/hfahe）

        响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。

        第一步：Meta标签（查看演示）

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

 

  
  
  
  
    
   
   
   
   
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    2.

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

 

  
  
  
  
    
   
   
   
   
  1. <!--[if lt IE 9]> 
    2. 
   
   
   
   
  2. <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> 
    3. 
   
   
   
   
  3. </script> 
    4. 
   
   
   
   
  4. <![endif]--> 
    5.

 

 第二步：HTML结构

        在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。 

 

 

  第三步：媒介查询-Media Queries

 

       CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。 

        当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。 

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示 

对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。 

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

        结论

        这个教程想要为你展示响应式设计的基本原理。如果你想要更多进阶的教程，请看看我之前的教程：使用媒介查询进行响应式设计。

 

 

你可能感兴趣的:(html5,css3,休闲,响应式网页设计,兼容多分辨率屏幕)

  • ESP32-s3 LCD屏幕开发完全指南：从初始化到图片显示
    ESP32-s3LCD屏幕开发完全指南：从初始化到图片显示前言各位开发者好！今天我要分享一篇关于ESP32驱动LCD屏幕的详细教程。作为嵌入式开发中的常见需求，掌握LCD驱动技术对我们的项目开发至关重要。本文将从零开始，一步步讲解如何初始化LCD、设置背光、显示颜色和图片，以及如何转换自定义图片格式。文章内容来源于实际项目经验，希望能给大家提供实用参考。目录LCD屏幕初始化原理解决LCD花屏问题L
  • Win11任务栏设置到屏幕顶部教程 nntxthml windows
    Win11任务栏设置到屏幕顶部教程Win11系统自发布以来，以其全新的界面设计和增强的功能特性吸引了大量用户的关注和喜爱。然而，尽管默认的任务栏位置设置在屏幕底部对于大多数用户来说已经足够方便，但仍有一部分用户希望根据自己的使用习惯，将任务栏调整到屏幕顶部。本文将详细介绍如何在Win11系统中实现这一操作，帮助用户根据个人喜好自由定制任务栏的位置。一、准备工作在开始调整任务栏位置之前，我们需要做一
  • Win11任务栏位置调整指南 nntxthml windows
    Win11任务栏位置调整指南在Windows11系统中，任务栏作为用户与操作系统交互的重要界面元素，其位置默认设置于屏幕底部。然而，每个用户的使用习惯与偏好各不相同，有时我们需要根据实际需求调整任务栏的位置，以便更高效地管理和访问常用的应用程序、快捷方式及其他功能。本文将详细介绍如何在Windows11系统中调整任务栏的位置，帮助用户根据个人喜好实现个性化设置。一、了解任务栏位置调整的意义任务栏位
  • Vue与React区别分析 ╰つ゛木槿 vue3web前端vue.jsreact.js前端
    目录一、设计哲学与框架定位1.1核心定位差异1.2哲学差异对比二、核心机制深度对比2.1响应式数据管理2.2模板与渲染引擎三、组件化开发范式对比3.1组件结构设计3.2逻辑复用模式3.3通信机制差异四、生态系统与工具链4.1核心生态对比4.2开发工具对比五、性能优化策略5.1Vue优化方向5.2React优化方向六、共同点与差异总结6.1共同基础6.2核心差异矩阵七、选型建议与未来趋势7.1适用场
  • 手滑救星！通知中心一秒即达，这次真的“滑”得漂亮！ harmonyos-sdk
    你的手机还在上演"手臂伸展操"吗？是不是总因为手机放得稍远一点，想优雅地划开通知中心却误触到了旁边的控制中心？这种"指尖的距离感"困扰，我懂！以前遇到这种情况，标准流程大概是这样的：心塞地发现点错了（控制中心界面出现）→无奈收回手臂，或者艰难地再次伸长手指→精确瞄准屏幕顶端那条细细的边→小心翼翼地向下滑动，只为召唤出通知中心。在HarmonyOS5.0.1.130及以上版本中（Pura80系列机型
  • SpringCloud和SpringBoot版本对应关系 码农小麦 spring系列spring
    springcloud是基于springboot的，所以两者的版本关系需要兼容，否则会出现一些异常，以下是两者大版本的对应关系
  • 【HDMI CEC】 System Power Control 功能详解 好多渔鱼好多 HDMICECHDMICEC智能家居物联网万物互联一键控制
    目录1.概念2.用途3.实现原理3.1实现流程3.2关键点总结4.协议与实现流程5.运用示例6.注意事项7.设备操作与设置方法8.总结1.概念SystemPowerControl是HDMICEC协议中最基础、最实用且使用最广泛的功能之一。它允许用户仅操作一个设备（通常是电视或功放）的遥控器电源键，就能联动控制同一HDMI链路上所有其他兼容CEC设备的电源状态（开机或待机）。简单说，就是“一键控制全
  • springboot与springcloud对应版本 DA_ZHOU__ springbootspringcloud后端
    SpringBoot与SpringCloudAlibaba版本对应关系请根据您使用的SpringBoot版本，选择兼容的SpringCloudAlibaba版本：SpringBootVersionSpringCloudAlibabaVersionSpringCloudVersion3.0.22022.0.0.0SpringCloud2022.0.03.0.22022.0.0.0-RC2Spring
  • 同步、异步、响应式编程介绍 赶路人儿 java
    随着互联网的发展，用户的规模不断扩大，应用的架构从单一应用架构演变到微服务架构。在微服务架构下，我们把一些核心的业抽取出来，作为独立的服务。服务与服务之间通过RPC或者HTTP进行通信，这意味着微服务架通常是I/O密集型的。所以这也决定了现代互联网架构的性能瓶颈：I/O。1、阻塞架构阻塞式系统构建于Servlet框架上（Servlet3.0之前），这样的系统是阻塞的和多线程的，这意味着每个连接使用
  • Python-Funcat：同花顺通达信公式Python实现 史剑咪Nessa
    Python-Funcat：同花顺通达信公式Python实现去发现同类优质开源项目:https://gitcode.com/Python-Funcat是一个开源项目，旨在将同花顺、通达信等股票分析软件的公式写法移植到Python编程语言中。通过该项目，用户可以在Python环境下，利用熟悉的技术和方法进行股票数据分析与策略编写。项目特点：完全兼容同花顺、通达信等公式写法。基于Python，易于扩展
  • Windows 11 vs Windows 10：全面对比与升级建议 操作系统内核探秘 操作系统内核揭秘windowsai
    Windows11vsWindows10：全面对比与升级建议关键词：Windows11、Windows10、系统对比、升级建议、性能优化、兼容性、用户体验摘要：本文从用户界面、性能表现、核心功能、兼容性、安全性、硬件要求等维度对Windows11与Windows10进行深度对比，结合技术原理与实际应用场景分析差异点，为个人用户、游戏玩家、企业用户提供针对性升级建议。通过系统架构解析、功能模块对比和
  • 方配.Core网站服务器：.NET Core开发者的利器 兰森环游世界
    本文还有配套的精品资源，点击获取简介：方配.Core网站服务器是一款专为.NETCore开发的轻量级Web服务器，简化了.NETCore应用程序的部署和运行过程。提供一键安装、快速启动和友好的网站管理功能。基于.NETCore构建，兼容多操作系统，具有高性能和稳定性。利用C#的特性如异步编程实现高效服务器运行和管理。核心功能包括一键安装、快速启动、网站管理、错误日志、安全特性及性能监控，旨在提升.
  • 在Ubuntu 24.04主机上创建Ubuntu 14.04编译环境的完整指南 精英的英 ubuntulinux运维
    在Ubuntu24.04主机上创建Ubuntu14.04编译环境的完整指南1.背景与挑战1.1问题描述在Ubuntu24.04主机上开发需要Ubuntu14.04环境编译的项目时，面临以下挑战：Ubuntu14.04已结束生命周期（EOL），官方软件源不再维护不同Ubuntu版本间的库依赖和工具链存在兼容性问题直接安装旧版库可能导致系统冲突频繁切换系统环境效率低下1.2核心需求创建隔离的Ubunt
  • PDF处理控件Spire.PDF系列教程：如何使用C# 拆分 PDF 文件（完整指南） CodeCraft Studio 文档管理控件pdfc#java国产化Spire.pdf
    PDF文件因其高度的跨平台兼容性和安全稳定的格式特点，广泛应用于企业文档管理和电子资料传输中。随着PDF文档页数和内容复杂度的增加，拆分PDF成为优化文档处理流程、提升办公效率的重要需求。通过编程方式实现PDF拆分，不仅能自动化处理海量文档，还能根据需求精准提取指定页面、按页码范围分割，甚至基于关键字内容智能拆分，大大提升了工作效率和准确性。本文将详细讲解如何使用Spire.PDFfor.NET库
  • webpack未转译第三方依赖axios为es5导致低端机型功能异常
    背景：兼容性测试流程中，遇到华为p9手机上的页面按钮点击无反应的问题。开发者工具查看后发现报错如下：根据报错信息检查了一下页面引用的vendors包，发现有...语法，来自于第三方依赖axios。原因：axios包有es6语法，而我的项目的webpack.config.js配置的babel-loader排除了所有的node_modules的编译。如下：{test:/\.js$/,exclude:/
  • 人大金仓 vs MySQL 窗口函数：三大核心差异与实战对比
    一、窗口函数的演进与挑战窗口函数（WindowFunctions）自MySQL8.0引入以来，已成为数据分析和业务报表开发的核心工具。然而，随着国产数据库如人大金仓（KingbaseES）对MySQL语法的兼容性增强，开发者在迁移或选型时面临一个关键问题：如何选择支持更强大窗口函数功能的数据库？本文将从语法设计、功能特性、性能表现三个维度，结合代码实战，深度剖析人大金仓与MySQL窗口函数的核心差
  • autosize px转dp_Android屏幕适配-应用篇 weixin_39676633 autosizepx转dp
    目录Android屏幕适配最主要的原因：是由于Android手机的分辨率和尺寸千奇百怪，虽然Android官方提供了dp单位来适配，但其在各种奇怪分辨率下表现却不尽如人意。主要是由于在界面在渲染绘制时，android会将dp转为px，在转换过程中是需要dpi的(上篇文章中有提到)，而dpi是根据屏幕真实的分辨率和尺寸来计算的，每个设备都可能不一样的，从而导致显示问题。从两个大方面阐述一下Andro
  • autosize px转dp_Android屏幕适配实例教程「今日头条，AutoSize」 weixin_39683526 autosizepx转dp
    Android屏幕适配实例教程即使只是练习项目，仍然要使用屏幕适配，这样我们就可以跟着设计图上的单位参数敲，效率会快很多项目的示范代码使用kt语言，但没有用到什么高级特性，完全不懂的参考这个链接，文章参考代码已经上传到Github，本篇相关的设计图链接戳这里这里提供一个App的UI设计图小白日记，仅供参考前期与UI之间的沟通1)确定设计图基准=可以简单理解为以某个尺寸为基准，然后通过改变对应的比例
  • React 学习计划 夜游猿 Reactreact.js学习前端
    React学习计划前置知识目标熟练掌握HTML、CSS和JavaScript的基础知识。了解ES6+的新特性。学习内容HTML:标签属性表单布局CSS:选择器盒模型布局（Flexbox,Grid）响应式设计JavaScript:变量数据类型控制结构函数对象数组DOM操作ES6+:箭头函数模板字符串解构赋值类模块化资源MDNWeb文档《你不知道的JavaScript》（上卷）React基础目标能够创
  • ReactNative进阶（四十四）：Mobile App 适配性优化_react native 适配
    在ReactNative中尺寸是没有单位的，它代表了设备独立像素。尺寸上述代码，运行在Android上时，View的长和宽被解释成：100dp100dp单位是dp，字体被解释成16sp单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变；值得一提的是，ReactNative中的FlexBox和WebCSS上FlexBox工作方式是一样的
  • Spring Boot 集成 MinIO 实现分布式文件存储与管理 LOVE_DDZ Spring-BootJAVALinuxspringboot分布式后端
    SpringBoot集成MinIO实现分布式文件存储与管理一、MinIO简介MinIO是一个高性能的分布式对象存储服务器，兼容AmazonS3API。它具有以下特点：轻量级且易于部署高性能（读写速度可达每秒数GB）支持数据加密和访问控制提供多种语言的SDK开源且社区活跃二、SpringBoot集成MinIO1.添加依赖在pom.xml中添加MinIOJavaSDK依赖：io.miniominio8
  • 2025 前端工程化：从混沌到秩序，AI时代构建高性能 Web 应用的制胜之道 （万字干货）
    引言：AI时代前端工程化的新范式2025年的前端开发已不再是简单的页面构建，而是涉及复杂系统设计、性能优化、跨端兼容和团队协作的综合工程学科。本指南将深入剖析当前前端工程化的核心技术栈，结合最新工具链和最佳实践，帮助开发者构建高效、可维护的现代Web应用。前端工程化已从"构建工具+打包优化"的初级阶段，演进为包含模块化架构、智能化开发、性能监控和安全防护的全链路体系。随着WebAssembly、A
  • 3D 商品展示与 AR 试戴能为珠宝行业带来一些便利？
    对于珠宝行业而言，长久以来，如何让消费者在做出购买决策之前，便能真切且直观地领略到珠宝独一无二的魅力，始终是横亘在行业发展道路上的一道棘手难题。而3D互动营销的横空出世，恰似一道曙光，完美且精准地化解了这一困境。借助先进且高精度的3D建模技术，每一个珠宝品牌都得以将旗下的每一件珠宝产品，以极为逼真的三维立体形态，毫无保留地呈现在消费者的眼前。消费者仅需借助手机或电脑屏幕，便如同开启了一场奇妙的珠宝
  • SVG 在 VSCode 中的使用与优势
    SVG在VSCode中的使用与优势引言SVG（可缩放矢量图形）是一种基于可扩展标记语言的图形图像格式，与传统的位图格式（如JPEG或PNG）相比，SVG图像具有更高的灵活性和可缩放性。随着前端开发领域的不断发展，SVG在网页设计中的应用越来越广泛。本文将介绍SVG在VisualStudioCode（VSCode）中的使用方法及其优势。SVG简介SVG是一种矢量图形格式，与位图不同，矢量图形由直线和
  • 富文本编辑器插件支持哪些格式导入？Word、Excel、PPT全解析 路过了忘了 前端pdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 有没有编辑器支持excel、ppt、pdf及word导入？
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Excel、PPT、PDF如何导入百度富文本编辑器？ 2501_90699800 excelpowerpointpdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 液晶手写板亮点缺陷修复及相关液晶线路激光修复 syncon12 科技制造3d
    引言液晶手写板作为新型电子书写设备，在日常办公、教育教学等场景应用广泛。然而，亮点缺陷的存在会严重干扰书写与显示效果，降低用户体验。研究液晶手写板亮点缺陷修复及相关液晶线路激光修复技术，对提升产品质量和市场竞争力具有重要意义。液晶手写板亮点缺陷的成因与影响液晶手写板亮点缺陷指在书写空白状态下，屏幕上出现持续发亮、无法正常熄灭的像素点，严重破坏画面纯净度。其成因主要包括：生产过程中，液晶盒内混入微小
  • RAC (ReactiveCocoa) 的实现机制与消息传递策略 瓜子三百克 iosRAC
    ReactiveCocoa(RAC)是iOS/macOS开发中一个强大的函数响应式编程框架，它通过信号（Signals）和序列（Sequences）的概念来处理异步事件流。下面我将深入解析RAC的实现机制和消息传递策略。一、RAC核心实现机制1.信号（Signal）的底层实现RAC的核心是**RACSignal**类，其基本结构如下：@interfaceRACSignal:NSObject+(RA
  • vue项目中package-lock.json文件的作用 whale fall 前端Vuevue.jsjson前端
    package-lock.json文件是由npm自动生成的文件，记录了当前项目中安装的所有依赖包的确切版本信息。它的主要作用是确保在不同环境中（例如开发者之间或CI/CD环境中）能够安装到完全相同版本的依赖，避免因不同版本的依赖导致的兼容性问题。主要作用：锁定依赖版本：package-lock.json确定了每个包及其依赖包的确切版本，确保无论谁安装该项目，都能得到一致的依赖树。它记录了包的具体版
  • 312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费superwordHTTP代理
        124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
  • pull解析和json编码 百合不是茶 androidpull解析json
    n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}]   pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu>     <name>java
  • [能源与矿产]石油与地球生态系统 comsci 能源
          按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的....       那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
  • 类与对象浅谈 沐刃青蛟 java基础
           类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
  • 新站开始被收录后，我们应该做什么？ IT独行者 PHPseo
    新站开始被收录后，我们应该做什么？         百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。       至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
  • oracle 连接碰到的问题 文强chu oracle
    Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案 作者：草根IT网 来源：未知 人气：813标签： 导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
  • Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据） 小桔子 java继承swing接口监听
            都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。 编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
  • linux常用的命令 aichenglong linux常用命令
    1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间 语法：date [OPTION]... [+FORMAT]
  • eclipse内存优化 AILIKES javaeclipsejvmjdk
    一 基本说明      在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。     1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
  • 关键字的使用探讨 百合不是茶 关键字
    //关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的 只能在包中访问*//*final   类 方法 变量 final 类 不能被继承 final 方法 不能被子类覆盖，但可以继承 final 变量 只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
  • JS中定义对象的几种方式 bijian1013 js
        1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
  • 表驱动法实例 bijian1013 java表驱动法TDD
    获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
  • LInux启停重启常用服务器的脚本 bit1129 linux
    启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改   #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
  • 【HBase六】REST操作HBase bit1129 hbase
    HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作   1. 启动和停止HBase REST 服务 1.1 启动REST服务 前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start   后台启动 hbase-daemon.sh start rest   启动时指定
  • 大话zabbix 3.0设计假设 ronin47
    What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个：          :: Performance improvements::Trigger related da
  • http错误码大全 byalias http协议javaweb
    响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。 响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
  • J2EE设计模式-Intercepting Filter bylijinnan java设计模式数据结构
    Intercepting Filter类似于职责链模式 有两种实现 其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
  • 修改jboss端口 chicony jboss
    修改jboss端口   %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml   中找到 <!-- The ports-default bindings are obtained by taking the base bindin
  • c++ 用类模版实现数组类 CrazyMizzz C++
    最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
  • hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop预留空间
    对于datanode配置预留空间的方法 为：在hdfs-site.xml添加如下配置  <property>     <name>dfs.datanode.du.reserved</name>     <value>10737418240</value>    
  • mysql远程访问的设置 dcj3sjt126com mysql防火墙
    第一步: 激活网络设置 你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
  • ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
    1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
  • Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
    转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的 通配符只能用在shell命令中,用来处理字符串的的匹配。 判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file  表示为外部命令 alias  表示该
  • Ubuntu Mysql Install and CONF gengzg Install
    http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
  • 批处理，删除文件bat huqiji windowsdos
    @echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
  • 跨浏览器兼容的HTML5视频音频播放器 天梯梦 html5
    HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。   How to enable <video> and <audio> tags in
  • Bundle自定义数据传递 hm4123660 androidSerializable自定义数据传递BundleParcelable
          我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity   把数据放到Intent
  • C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net线程C#异步编程
    异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。 本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结 异步编程 什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
  • spark 查看 job history 日志 Stark_Summer 日志sparkhistoryjob
    SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
  • SSH框架搭建 wangxiukai2015eye springHibernatestruts
    MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。    选择Struts2 Core Libraries -<MyEclipes-Library>      点击Finish。src目录下多了struts
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他