Im4ky
Im4ky

基于HTML5、CSS3的响应式图片处理

完整代码（或者看下面的要点小结）：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        * { margin: 0px; padding: 0px; }
        /** 关键在这里下面一行 **/
        img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }
        /** 这里的宽和高是背景图片的实际尺寸，主要用于在电脑上完全显示 **/
        #wrap { width: 1080px; height: 1848px; margin: 0px auto; position: relative; }
        /** 这边的宽和高是下载按钮的实际尺寸 **/
        #wrap .btn_download { width: 774px; height: 210px; float: left; position: absolute; z-index: 99999; display: none; }
        /** 当视口宽度小于背景图片的实际宽度 1080px 时 **/
        @media screen and (max-width: 1080px) {
            /* 重新设置背景图片所属父级的宽、高 */
            #wrap { width: 100%; height: auto; }
            /* 重新设置下载按钮的宽、高，这里的高宽度是根据 774/1080=0.71666666... 得到，即下载按钮的宽度与背景图片的宽度比 */
            #wrap .btn_download { width: 71%; height: auto; }
        }
    </style>
</head>
<body>
    <div id="wrap">
        <img src="./images/bg_2_download.png" alt="" id="btn_download">
        <img src="./images/bg_2.jpg" alt="" id="img_back">
    </div>
<script>

//
var oImgBack = document.getElementById("img_back");
var oBtnDownload = document.getElementById("btn_download");

window.onload = function() {

    // 页面载入或刷新时，初始化下载按钮的位置
    setBtnLayout();

    // 视口改变时，重新计算下载的按钮的相对位置
    this.onresize = function() { setBtnLayout(); }
}

/**
 * 根据背景宽度和高度，计算下载按钮的相对布局位置
 */
function setBtnLayout() {
    // 设计给到的切图标注中，实际的top值为1499px、left值为154px
    // 这里的 0.81111 是根据 1499/1848=0.81111... ，即top值与图片实际高度的比例 
    // 这里的 0.1425 是根据 154/1080=0.1425... ，即left值与图片实际宽度的比例 
    var iBtnTop = Math.ceil(oImgBack.offsetHeight * 0.8111);
    var iBtnLeft = Math.ceil(oImgBack.offsetWidth * 0.1425);
    oBtnDownload.style.top = iBtnTop + "px";
    oBtnDownload.style.left = iBtnLeft + "px";
    oBtnDownload.style.display = "block";
}
</script>
</body>
</html>


主要点小结：

  1.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.     <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  3. img { max-width: 100%; height:auto; width: auto\9; /* ie8 */ }

  4. 当视口改变时，对下载按钮宽度、top值、left值的计算与处理

  5. 其它对于html5、css3相关内容，请自行查阅，这里不做详细说明


你可能感兴趣的:(html5,css3,响应式图片)

  • 从零实现OSS阿里云图片上传：前端采用的vue3+element-plus，后端采用javaspingboot，实现上传图片到云，然后存储数据库链接能够回显的效果 绝顶少年 阿里云前端数据库
    后端（JavaSpringBoot）1.添加依赖在pom.xml中添加必要的依赖，包括阿里云OSSSDK、SpringBootWeb、MyBatis-Plus等：org.springframework.bootspring-boot-starter-webcom.baomidoumybatis-plus-boot-starter3.4.3.4com.aliyun.ossaliyun-sdk-oss
  • ueditor图片上传跨域问题 hello_simon javascriptphpueditor图片上传跨域
    ueditor置于A域，图片置于B域，B域需放flash跨域策略文件crossdomain.xml，如下修改ueditor配置文件ueditor.config.js//图片上传配置区,imageUrl:"http://abupload.xxx.com/imageUp.php"//图片上传提交地址,imagePath:"http://abupload.xxx.com/"
  • 对vue VS react的理解 向贤 前端开发vue.jsreact.js前端
    对vueVSreact的理解Vue与React的核心区别在于设计哲学：Vue追求渐进式开发和开箱即用，通过模板语法、响应式系统和官方生态提供低门槛的集成方案。React强调函数式编程和纯JavaScript驱动，以JSX、单向数据流和灵活的生态构建高自由度的视图层。核心差异可总结为：响应式机制、模板vsJSX、API设计、生态策略、性能优化模式。分点论述：1.响应式机制Vue：基于数据劫持（Vue
  • 打造专业海报，不再难！5款AI绘画工具助你轻松生成 Ai工具分享 AI作画
    在过去，不会PS却想要制作一张拿得出手的海报，那简直是一项艰巨无比的任务。但新增使用AI绘画功能，稍等一会就能生成1-4张设计感不错的成品营销海报。只需输入一句需求，即可轻松完成。下面小编就来给大家分享3款这种神奇的AI设计工具。一、牛学长图片修复工具在众多AI生图工具中，牛学长图片修复工具凭借其强大的AI技术和用户友好的界面设计脱颖而出。该工具的AI图片生成功能，不仅支持一键生成高质量图像，还特
  • 4款老照片AI自动修复工具分享，让老照片重焕光彩 Ai工具分享 人工智能
    老照片承载着我们的成长历程、家庭的变迁以及社会的发展印记。然而，岁月无情，它们逐渐失去了原本的光彩，让我们在回忆时总觉得少了些什么。但随着自动修复软件的出现，让老照片的修复变得不再遥不可及。这些软件利用先进的图像处理技术，能够自动识别并修复照片上的瑕疵，让老照片重焕光彩。下面小编就来给大家分享几款AI自动修复工具，帮助你找回那些遗失的美好时光。一、牛学长图片修复工具牛学长图片修复工具是一款功能强大
  • 用Vue实现海报排版设计功能 powerx_yc javascriptViewUI
    一、前言本来想做个微信小程序，实现一键生成海报图片（可替换文字、图片，不需要用户排版），所以后台管理系统上需要实现一个制作海报模板的功能（“简单版ps”），写了挺长时间的，逻辑太多了，现在写得差不多了，但是由于各种事情项目一直没有进展，估计是没能做完了，所以把这个“简单版ps”开源出来。二、界面三、动态效果图四、github源码地址（欢迎star，谢谢~）github.com/CB-ysx/pag
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • 独立开发者 5 个月，月收入赶超北京工资，我的一点心得 秦少卫 开源编辑器
    大家好，我是一名开源项目作者，也是一名独立开发者，今年5月份我从北京离职，回到老家河北，开始了自己的独立开发之路，最近几个月的收入慢慢赶超了北京的工资，自己心态上也有很大的变化，把自己的一点心得分享出来，希望一起交流，也给准备踏上独立开发的朋友一点点参考。目前主要的盈利模式是为其他研发团队提供可二次开发的在线图片编辑器源码，省去基础功能的研发成本，附带提供定制功能开发，目标就是帮助企业快速搭建在线
  • 推荐开源项目：YFT Design - 强大的在线图片设计工具 咎旗盼Jewel
    推荐开源项目：YFTDesign-强大的在线图片设计工具yft-design基于fabric.js的图片设计,fabric.jsandvue3andtypescriptandelement-plus,supportingthemostcommonlyusedelementtypessuchastext,images,shapes,lines,QRcodes,andbarcodes.Eachelem
  • 快图设计：一款强大的Vue图片编辑器 姚婕妹
    快图设计：一款强大的Vue图片编辑器项目地址:https://gitcode.com/gh_mirrors/vu/vue-fabric-editor在数字化时代，图片编辑工具已成为设计师和开发者的必备利器。今天，我要向大家推荐一款基于fabric.js和Vue开发的插件化图片编辑器——快图设计（vue-fabric-editor）。这款开源项目不仅功能强大，而且易于扩展，非常适合需要轻量级图片编辑
  • vue+ts+electron从客户端跳转网页，public文件中的图片不显示如何解决以及动态环境配置中数据获取不到 是小许同学吖 vue.jselectronubuntu前端typescript
    客户端跳转网页遇到的问题跳转新窗口打开浏览器客户端跳转网页，public文件中的图片不显示如何解决在.env.dev中设置的环境配置信息获取不到跳转新窗口打开浏览器从客户端跳转新窗口打开浏览器代码如下：//跳转新窗口，打开浏览器constgoNewWindows=(item:any)=>{console.log(item
  • ddddocr识别图片中的汉字 雪小妮 python
    ddddocr识别图片中的汉字importddddocrfromioimportBytesIOfromPILimportImageurl='图片地址'resp=requests.get(url)img=Image.open(BytesIO(resp.content))#初始化OCR模型#创建DdddOcr对象并初始化模型ocr=ddddocr.DdddOcr()#调用recognize函数进行图像
  • python执行cmd命令行异步执行_Python 异步调用命令行工具 weixin_39719732
    当你在自己的Python程序中采用了基于事件循环的异步编程方法之后，你就会发现自己不自觉地被其牢牢吸引住，并不是说这一方法多么棒，而是因为你不得不想办法保证程序中的任意环节都不能是阻塞的！例如当前的场景是希望从MongoDB中读取每一条未处理过的数据，下载并保存其中的图片信息，然后更新数据库的内容。Python常用的MongoDB异步驱动是Motor:结合asyncio使用方法如下：importm
  • 响应式设计已死？流体布局才是未来！ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在当今的Web设计领域，挑战从未如此巨大。各种屏幕尺寸和分辨率的智能设备层出不穷，要让网站在所有设备上保持一致的用户体验，难度可想而知。但别担心，流体布局（FluidLayout）正是为了解决这一问题而生。它不仅适用于超大屏幕，同样也能完美适配小型移动设备，真正做到自适应！接下来，我们深入了解流体布局的原理
  • 图片加载框架Glide与Picasso原理剖析 Ya-Jun glideandroid
    图片加载框架Glide与Picasso原理剖析一、前言图片加载是Android应用开发中的一个重要环节，良好的图片加载机制可以提升应用性能和用户体验。Glide和Picasso是目前最流行的两个图片加载框架，本文将深入分析这两个框架的核心原理和实现机制。二、图片加载基础2.1图片加载的挑战内存管理OOM（OutOfMemory）问题内存缓存策略图片复用性能优化异步加载图片压缩缓存机制用户体验加载占
  • 比付费软件强大的，免费工具！ 海斗星河 智能手机科技电脑
    今天给大家介绍一款超实用的图片处理软件——洋芋田图像工具箱。它不仅完全免费，还是开源的，使用起来非常顺手，能轻松搞定批量图片处理。洋芋田图像工具箱：专业的图片处理工具洋芋田图像工具箱是一款专业的图片处理工具。它完全免费，没有任何广告和弹窗，使用体验十分清爽，不用担心被打扰。它支持Windows和Mac系统，无论是电脑新手还是资深用户，都能轻松上手。这款软件的功能非常丰富，包括图片加水印、长图拼接、
  • 流星雨特效css3 你的美，让我痴迷 cssCSS动画HTML5星系背景关键帧视觉艺术
    *{margin:0;padding:0;box-sizing:border-box;}body{overflow:hidden;}section{position:absolute;top:0;left:0;width:100%;height:100vh;background:url(img/xingkong.jpg);background-position-x:center;backgroun
  • CSS3 用户界面设计指南 froginwe11 开发语言
    CSS3用户界面设计指南引言随着互联网的快速发展，用户界面设计已经成为网站和应用程序吸引和留住用户的关键因素之一。CSS3，作为Web开发中的核心技术之一，提供了丰富的工具和特性来改善用户界面。本文将深入探讨CSS3在用户界面设计中的应用，包括基本概念、常用技巧以及实际案例分析。CSS3用户界面基本概念1.媒体查询媒体查询（MediaQueries）是CSS3的一个重要特性，它允许开发者根据不同的
  • ArcGIS切片缓存目录结构及配置文件说明 笑轩辕 ArcGIS软件使用切片缓存ArcGISServer
    目录缓存目录结构conf.cdi文件：conf.properties文件：conf.xml文件：ArcGIS切片缓存目录：3个配置文件和图片目录缓存目录结构服务名//Map//-_alllayers//服务名//Map//【1】conf.cdi主要记录范围，等于所切图层的范围，平面坐标显示【2】conf.properties固定【3】conf.xml包含参考系、起始点坐标、瓦片尺寸、读取切片原点、
  • arcgis 切片分析录入mongodb tvrddmss arcgismongodb
    将arcgis的切片数据录入mongodb，这样可以支持自定义的server发步以下是对3种arcgis切片规则的分析松散型也就是我们常见的文件式的切片管理方式，将ArcgisServer切出来的切片图片按照行列号的规范，存储在相应的文件夹中。循环所有.png文件路径，存入mongodb数据库for(leti=0;i0){letb3dmData={'level':level,'row':rowin
  • 使用excel4node向excel批量写入图片 weixin_41415820 javascript前端vue.js
    importfsfrom'fs';importpathfrom'path';importxlfrom"excel4node";//创建一个新的工作簿constwb=newxl.Workbook();//添加一个工作表constws=wb.addWorksheet('Sheet1');//指定要读取的文件夹路径constdirectoryPath='G://测试';//替换为你的文件夹路径leti=
  • 【Python爬虫(71)】用Python爬虫解锁教育数据的奥秘 奔跑吧邓邓子 Python爬虫python爬虫开发语言教育数据
    【Python爬虫】专栏简介：本专栏是Python爬虫领域的集大成之作，共100章节。从Python基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发者，都能从中汲取知识，助力掌握爬虫核心技能，开拓技术视野。目录一、引言二、确定目标网站2.1教育机构官网2.2在线学习平台三、爬
  • Flutter：签名板封装 sunly_ Flutterflutterjavascript开发语言
    签名板依赖安装#图片处理image:^4.1.3#签名signature:^5.4.1封装组件import'dart:typed_data';import'package:dogex/common/index.dart';import'package:ducafe_ui_core/ducafe_ui_core.dart';import'package:flutter/material.dart';
  • 批量将 Excel 文档中的图片提取到文件夹 inxunoffice excel
    前面我们介绍过如何批量删除Excel文档中的所有图片或者指定的图片，其中就需要用到批量提取Excel文档中图片的操作。我们如何才能够将Excel文档中的图片快速的提取出来呢？其实单个Excel文档中的图片提取到文件夹中是有多种方法可以完成的，但是我们面临的Excel文档通常是多个的大批量的。因此常规的提取Excel文档中图片的方法可能就已经不适用了。那今天我们就给大家来介绍一下如何批量提取多个Ex
  • Vue3中使用exceljs和file-saver实现Excel导出（含图片导出）完整方案 叫我OldFe excel
    问题背景在Vue3项目中，当我们需要将包含图片的数据导出到Excel时，常用的sheetjs/xlsx库存在局限性：无法直接导出图片到单元格。本文将提供完整的解决方案，封装可直接复用的工具函数。解决方案技术选型使用exceljs+file-saver组合：exceljs：支持图片插入的Excel操作库file-saver：前端文件保存工具功能特性✅支持多图片列导出✅自动识别Base64和DataU
  • uniapp [安卓苹果App端] - 详细实现下载文件保存到用户手机本地，指定文件存储位置路径及文件夹名称下载并保存，Uniapp app端将文件下载保存并储存到指定目录（手机系统存储空间权限检测） 王二红 +UniAppuni-app安卓Android苹果ios下载文件到指定目录位置如何将文件保存到用户手机上下载指定文件存储路径并提示信息解决app端真机下载报错失败
    前言网上的教程乱七八糟且兼容性太差，本文提供优质示例。在uni-appApp端（安卓APP|苹果APP）开发中，详解在app平台端实现下载文件到用户本机指定目录，检测并提示开启读写存储权限后执行保存文件功能，Uniapp下载文件并保存到本地解决方案，并且指定文件保存位置及文件夹名称，支持任意文件音视频/文档/图片等，下载成功或失败会有手机系统提示，提供详细示例代码。uniapp（v2|v3）版本项
  • android读写缓存文件路径,获取Android应用专属缓存存储目录的实例 落霜枫舞 android读写缓存文件路径
    如果你想摆脱缓存目录使用的尴尬：找不到目录？忘记申请读写权限？害怕污染用户存储空间？……请往下看SD卡缓存目录当应用需要将图片或者文件缓存到SD卡中时要去申请创建目录，有下面几种途径我们可以通过API调用应用专属目录:///storage/emulated/0/Android/data/app_package_name/files/PicturesContent.getExternalFilesD
  • Android高级组件实践：ViewPager详解与案例 Bachnroth
    本文还有配套的精品资源，点击获取简介：ViewPager是Android开发中用于页面切换的组件，广泛应用于引导页、图片查看器和Tab布局等。它通过PagerAdapter管理页面，提供页面创建与销毁的方法实现。本篇详细解析了ViewPager的使用方法，包括如何设置Adapter、绑定ViewPager、添加页面指示器、监听页面改变、自定义滚动效果、优化性能、调整离屏页面策略、动态页面管理及与F
  • HarmonyOS NEXT 实战系列-综合案例新闻页 harmonyos-next
    预览图片编辑接口文档编辑实现步骤：准备ForEach遍历数据的页面使用http获取数据渲染落地代码：准备ForEach遍历数据的页面interfaceNews{id:numbertitle:stringsource:stringcmtcount:numberimg:stringtime:string}@Entry@ComponentstructIndex{@StatenewsList:News[]
  • 【编程向导】Nginx-静态资源服务器 wtrees_松阳 nginx服务器运维
    静态资源静态资源即非服务器动态生成的文件。常见静态资源类型：浏览器端渲染：HTML、CSS、JS图片：JPEG、GIF、PNG视频：FLV、MPEG文件：TXT等任意下载文件基本配置Web服务器一个重要的功能是服务静态文件（图像或静态HTML页面）。例如，Nginx可以很方便的让服务器从/data/www获取html文件，从/data/images获取图片来返回给客户端，这只需要在http块指令中
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他