bomess
bomess

纯CSS3实现图片墙

预备知识

  • DIV+CSS基础
  • CSS3的transform 和 transition用法
    • 主要是用了transform的rotate/scale
    • 动画过渡的几个参数(transition-property/transition-duration/ transition-timing-function)
  • CSS3的box-shadow..这里只用到外阴影

值得一提的:更多属性的参数要查询css手册,这里展示只是会用到的;

素材获取

百度自行搜索图片素材,替换下面代码的图片路径即可..
例子中的图片大于400像素小于600像素,其中480X270居多

效果描述

初始化凌乱的图片排序(CSS控制),鼠标悬浮会让图片处于顶层显示,且图片恢复水平展示+放大1.5倍

代码实现

代码内含注释

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS3实现照片墙</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>纯CSS3实现照片墙</h1>
    <div id="container">
      <img class="position_pic1" src="img/1.jpg" alt="这是一个美眉的图片">
      <img class="position_pic2" src="img/2.jpg" alt="这是一个美眉的图片">
      <img class="position_pic3" src="img/3.jpg" alt="这是一个美眉的图片">
      <img class="position_pic4" src="img/4.jpg" alt="这是一个美眉的图片">
      <img class="position_pic5" src="img/5.jpg" alt="这是一个美眉的图片">
      <img class="position_pic6" src="img/6.jpg" alt="这是一个美眉的图片">
      <img class="position_pic7" src="img/7.jpg" alt="这是一个美眉的图片">
      <img class="position_pic8" src="img/8.jpg" alt="这是一个美眉的图片">
    </div>
</body>
</html>

style.css

  *
{ margin: 0; padding: 0; border: 0; outline: 0; }
/*简易版reset*/

h1
{ text-align: center; }
/*文字居中*/

#container
{ position: relative; width: 1200px; margin: 0 auto; }
/*块居中*/

#container  img
{ position: absolute; z-index: 1; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: all; transition-property: all; border: 5px solid #eee; box-shadow: 2px 2px 2px rgba(0, 0, 0, .5); }
/* 给图片添加一个小阴影(外阴影)及增加边框 这里的transition分开参数来写,方便小伙伴们理解.当然也可以用简写方式: eg: tansition:all 0.5 ease-out position在这里的作用是为了偏移图片位置的,,后面可以看到为何 z-index是为了图片堆叠的排放,,这里为1,hover那里为2(效果即为底层图片第一张显示) */

#container   img:hover
{ z-index: 200; -webkit-transform: rotate(0deg); -webkit-transform: scale(1.5); -ms-transform: rotate(0deg); -ms-transform: scale(1.5); transform: rotate(0deg); transform: scale(1.5); border: 5px solid #eee; box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); }
/* 这一块是让图片在hvoer下的图形变换,水平展示及放大1.5倍; transform也可以简写的: eg: transform:rotate(90deg) scale(1); */




/*下面这些子类都是来定位图片初始位置及旋转角度的*/
.position_pic1
{ top: 100px; left: 5px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); }

.position_pic2
{ top: 200px; left: 600px; -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg); }

.position_pic3
{ top: 20px; left: 400px; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
.position_pic4
{ top: 400px; left: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.position_pic5
{ top: 400px; left: 500px; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }
.position_pic6
{ top: 500px; right: 50px; -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }
.position_pic7
{ top: 600px; left: 250px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); }


.position_pic8
{ top: 200px; right: 600px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); }

其他

  • CSS前缀是补全是用插件”autoprefix”解决;
  • CSS排版的是用插件”css comb”解决;
  • 测试浏览器firefox 38 / chrome 42

你可能感兴趣的:(css3动画,CSS3图片,CSS3图片墙,图片墙)

  • 小白WEB前端学习（五） Sun ᥫᩣ涵 WEB前端前端学习
    续：小白WEB前端学习（四）继续正式学习CSS（三）6.float布局！主要用于左右做图片，右文字的题目标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，使⼀个元素脱离标准文档流有三种方式1.浮动2.绝对定位3.固定定位例如:块元素独占一行，行内元素可以一行显示多个。浮动作用：让块元素水平排列属性名：float属性值：left和right浮动后会脱离标准流，等于开了一个新的页面，内容在的话
  • 用JavaScript实现找不同小游戏 算是难了 javascript开发语言前端websocket
    目录倒计时的实现找不同实现对canvas的初始化实现画布的分割,父盒子>子盒子>canvas找不同逻辑的判断实现图片的导入DOM节点的监听声明两个需要监听的节点禁用页面点击事件的函数DOM监听实现勋章分数增加和生命的减少减命逻辑死亡响应websocket交互定义给后端发送的数据包断线重连最后,调用封装好的websocket创建初始之物，其行必丑代码写的非常繁琐,有很多细节在复盘的时候也会想不起来为
  • 如何进行cad地理配准_如何对扫描图片进行ArcGIS配准？ weixin_39604276 如何进行cad地理配准
    就这么个简单的问题啊昨天搞了一晚上肥肥搞了大半天百度上找愣是看见一帮智障在瞎扯工具书上又没有想要的信息水文章水得一点用没有实在是服气索性请教师兄操作今天就直接记录详细教程以供他日使用！首先，插入底图可以各种格式尽量要求清晰度高吉林莫莫格国家级保护区功能区划图下面进行地理配准，配准时确定地图图例，右键工具栏选出地理配准去掉自动校正左键点一下后右键我这个图是1：100000的比例尺所以以米为单位应该这
  • python selenium canvas_selenium webdriver 实现Canvas画布自动化测试 我不勇敢 pythonseleniumcanvas
    https://blog.csdn.net/xiaoguanyusb/article/details/80324210由借鉴意义,转过来canvas是一个画布，定位元素时只能定位到画布上，如下乳所示，网页上有一张类似于下图的eChart报表图片。selenium的基本定位方式只能定位到该画布上，画布上的子元素通过selenium的基础定位方式是定位不到的，此时就需要使用selenium的js注入的
  • 五款图片变清晰工具帮助你，轻松实现一键修复模糊图片 Ai工具分享 人工智能
    在日常生活中，我们难免会遇到图片模糊的情况，无论是年代久远的老照片因分辨率不足而显得模糊，还是在拍摄瞬间因轻微手抖导致的画面不清晰，这些问题都大大影响了图片的观赏价值。那么，面对这些模糊的图片，我们该如何让它们重焕新生，变得清晰明朗呢？接下来，我们就来介绍五款出色的软件，它们具备强大的图像处理能力，能够帮助你轻松实现一键修复模糊图片，让你的珍贵记忆恢复原有的清晰与生动。一、牛学长图片修复工具牛学长
  • hadoop图书数据分析系统 Springboot协同过滤-余弦函数推荐系统 爬虫1万+数据 大屏数据展示 + [手把手视频教程 和 开发文档] QQ-1305637939 毕业设计大数据毕设图书数据分析hadoopspringboot爬虫
    hadoop图书数据分析系统Springboot协同过滤-余弦函数推荐系统爬虫1万+数据大屏数据展示+[手把手视频教程和开发文档]【亮点功能】1.Springboot+Vue+Element-UI+Mysql前后端分离2.Echarts图表统计数据,直观展示数据情况3.发表评论后，用户可以回复评论,回复的评论可以被再次回复,一级评论可以添加图片附件4.爬虫图书数据1万+5.推荐图书列表展示,推荐图
  • 04商品详情 敲啊敲9527 vue3项目javascript开发语言ecmascript
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录详情页-热榜区域在Detail文件夹中新建组件接口导入调用渲染模版适配不同标题title图片预览sku组件(商品的一些规格)把components文件中的组件注册为全局组件，方便共享总结详情页-热榜区域在Detail文件夹中新建组件src\views\Detail\components\DetailHot.vue周日榜单一双鞋
  • 点击图片浏览大图（sui框架） this_ITBoy 原创图片浏览器H5
    项目中经常遇到点击图片或者点击相册浏览大图的情景，SUI框架自带swiper滚动的效果，详情见http://m.sui.taobao.org/中的拓展组件--图片浏览器的效果，在项目中需要做到点击图片出现图片浏览器而不是点击固定的按钮，这就需要在js里做一些改变了。部分html代码如下：这里是freemarker语法循环出每一张图片，而data-src属性的值是图片的接口，img的src属性也是图
  • sui框架 点击图片 放大显示 jiidd
    $(function(){$.init();$(document).on('click','.albumImgs',function(){varpic=$(this).parent().find(".albumImgs").map(function(){return$(this).data("src");}).get();$.photoBrowser({photos:pic,//注意此处是数组[]
  • 富芮坤fr8008gp lvgl图片:lv_img_conv生成bin文件格式；在代码中直接引用图片；合并成一个bin给代码引用；LvglImgTool转换图片lvgl_image生成C文件 cheng@yi 富芮坤FR800X蓝牙富芮坤fr8008gplvgl图片
    从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原厂让我停更的可能,但是我依旧乐于此,如果哪位道友想一起交流或者原厂同志想让我停更以及其他事项都可通过如下邮箱联系我:2478278759@
  • 富芮坤fr8008gp lvgl图片二:lv_img_conv工具的使用(脚本调用)；眼瞎说明；lv_img_conv原版工具的使用(脚本调用) cheng@yi 富芮坤FR800X蓝牙富芮坤fr8008gplvgl图片
    从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原厂让我停更的可能,但是我依旧乐于此,如果哪位道友想一起交流或者原厂同志想让我停更以及其他事项都可通过如下邮箱联系我:2478278759@
  • Python调用讯飞星火大模型v3.x api接口使用教程2.0（python sdk，支持图片理解） IT大头 NLP实战python人工智能语言模型nlpchatgpt
    前言本篇文章是针对星火大模型api接口使用的新篇章，本次主要是介绍对于pythonSDK使用，以及图片理解等新功能。相对于上篇博客中的使用方法，本次的教程相对来说更简单方便。话不多说，直接享用。1、获取api接口的ID和key参考上篇文章：https://blog.csdn.net/qq_45156060/article/details/134072123?spm=1001.2014.3001.5
  • 钉钉小程序、文件上传（excel、ppt、word等） xluo1715 钉钉（小程序和H5）钉钉小程序excelpptpdfword
    钉钉小程序上传下载（反显）文件（如excelpptworld等文件）前端处理（需要后端配合加上传下载的权限）要上传excelpptworld等文件还需要借助钉盘实现，我就不废话了，直接上代码axml结构,红框中的为钉盘文件上传和预览其余的是兼容图片上传和PC端上传的文件，这里提一嘴，如果是PC端上传到自己服务器的文件要想在小程序里显示，需要后端把服务器的文件先传到钉盘，前端再通过钉盘下载，如果是小
  • Taro 鸿蒙技术内幕系列（四）：JDImage 自研鸿蒙图片库 京东零售技术 tarotaroharmonyos华为
    基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测，本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景2024年初，京东正式启动了鸿蒙APP的开发工作。由于电商APP大量依赖图片来展示商品信息，对图片库的性能和加载体验要求极高，因此图片库被作为核心基础能力提前纳入京东鸿蒙首期基础建设计划。本文将详细介绍京东自研鸿蒙图片库的开发过程及其技术原理。技术实现前期调
  • 解决Pycharm中错误ValueError: zero-size array to reduction operation maximum which has no identity 筱戥芊茹 pycharmidepython深度学习yolov5
    在pycharm中运行train.py时，出现错误信息：ValueError:zero-sizearraytoreductionoperationmaximumwhichhasnoidentity。经检查发现是数据集中的图片和标签数量不对应：在图片images文件夹中，共有图片514张，而标签labels文件夹中，只有513个标签文件。因为我是直接下载的别人转化好后的数据集，但是发现了这个错误后就
  • docker运行Java项目，Kaptcha因为字体缺失没法显示验证码图片 商鼎云技术 dockerjava容器
    2015工作至今，10年资深全栈工程师，CTO，擅长带团队、攻克各种技术难题、研发各类软件产品，我的代码态度：代码虐我千百遍，我待代码如初恋，我的工作态度：极致，责任，死磕！欢迎点赞、收藏、关注，更多分享请进我主页。Java项目在开发主机以及宿主服务器，Kaptcha都可以正常显示验证码图片，而docker运行Java项目，Kaptcha会因为字体缺失而没法显示验证码图片，报错如下java.lan
  • unity转微信小游戏：自定义分享标题和分享图片 会潜水的小火龙 unity转微信小游戏unity微信小程序
    unity转微信小游戏：自定义分享标题和分享图片代码使用方法代码//获取微信小程序分享参数更改为自己的分享标题和分享图片publicvoidOnShareAppMessage(boolisListen=true,stringimageUrl="",stringtitle="",stringquery=""){if(isListen){WX.ShowShareMenu(newShowShareMen
  • 科研绘图系列：R语言绘制带有数值的地图（map with values） 生信学习者1 SCI科研绘图系列r语言数据可视化数据分析数据挖掘
    禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者!文章目录介绍加载R包数据下载导入数据数据预处理画图画美国地图内嵌图合并图形保存图片系统信息参考介绍科研绘图系列：R语言绘制带有数值的地图（mapwithvalues）加载R包library(maps)library(tidyverse)library(terra)library(sf)library(ggthem
  • HTML静态网页作业(HTML+CSS)——外卖平台主题网页设计制作(8个页面) 2501_90365653 htmlcss学生网页htmlcss前端
    不定期分享源码，关注不丢失哦文章目录一、作品介绍二、作品演示1、首页2、商家列表页3、商家详情页4、商家图片页三、代码目录四、网站代码五、源码获取一、作品介绍️本套采用DIV+CSS布局，未使用Javacsript代码，共有8个页面。二、作品演示1、首页2、商家列表页3、商家详情页4、商家图片页三、代码目录四、网站代码北京[更换]你好，请登录/注册全部分类全部商家商家入驻关于我们常见问题我要登录用
  • linux centos 7.6 搭建docker及安装环境部署项目 小猪与二哈 Javalinuxdockercentosjavamysql
    linuxcentos7.6搭建docker及安装环境部署项目一.配置linux环境目前docker安装只支持centOS7、centOS6.5也就是说centOS7是需要3.1以上内核centOS6.5是需要2.6以上内核linux输出命令uname-a使用腾讯云服务centos7.6重装系统，重置实例的密码[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZG2SU
  • 什么是HTTP POST请求？初学者指南与示范 lingllllove http网络协议网络
    什么是HTTPPOST请求？HTTP（超文本传输协议）是Web的基础协议，用于在客户端（如浏览器）和服务器之间传输数据。HTTP请求方法有多种，最常见的包括GET和POST。本文将详细介绍HTTPPOST请求，包括其用途、工作原理及示范。HTTPPOST请求的用途POST请求用于向服务器发送数据，通常用于以下场景：提交表单：例如用户注册或登录表单。上传文件：例如图片或文档上传。发送数据：例如向服务
  • 【开源免费】kettle作业调度—自动化运维—数据挖掘—informatica-批量作业工具taskctl 加菲盐008 KettleETL作业调度工具taskctl运维数据库linux大数据数据挖掘
    关注公众号"taskctl"，关键字回复"领取"即可获权产品简介taskctl是一款由成都塔斯克信息技术公司历经10年研发的etl作业集群调度工具，该产品概念新颖，体系完整、功能全面、使用简单、操作流畅，它不仅有完整的调度核心、灵活的扩展，同时具备完整的应用体系。目前已获得金融，政府，制造，零售，健康，互联网等领域1000多家头部客户认可。图片来自网络2020年疫情席卷全球，更是对整个市场经济造成
  • Python 操作二进制文件 昱晏 Python1024程序员节python
    在计算机中，文件可以分为两种类型：文本文件和二进制文件。文本文件包含人类可读的字符，而二进制文件包含计算机指令或数据，无法直接阅读。常见的二进制文件包括图片、音频、视频、可执行文件等。Python提供了处理二进制文件的工具，允许你读写任意类型的数据。1以二进制模式打开文件在Python中，操作二进制文件时，需要使用'b'作为文件模式的一部分。常见的二进制文件模式有：'rb'：以二进制读取文件。'w
  • buu-[GYCTF2020]Ezsqli 有点水啊 buuctf-websqlwebsqlpython
    朴实无华一张图片，一个输入框，图片太大就不放了1是Nu1L，2是V&N，剩下都是“ErrorOccuredWhenFetchResult.”fuzz一下，507的都是被过滤了的过滤了关键的information，要用到无列名注入，找库名时需要用到用到5.7版本新增的sys库利用sys库里的三个表都行schema_table_statistics/schema_table_statistics_wi
  • 使用多模态大模型转换 office 文档 人工智能图像识别
    背景介绍随着大模型的技术的不断发展，如何将各种office文档转换为markdown成为了一个刚需，包括微软在内的不少公司都给出了解决方案，但是都需要经过繁琐的步骤再本地或云端进行部署，有的对本地还有一定算力要求。现在各家的多模态大模型都在不断降价，1块钱都能处理几百张图片，不少提供商还每日提供免费额度，所以使用多模态大模型转换office文档成为一个廉价而简单的解决方案。技术方案这里介绍的是使用
  • 2017-SIGGRAPH-Google,MIT-(HDRNet)Deep Bilateral Learning for Real-Time Image Enhancements WX Chen HDR技术深度学习神经网络机器学习
    双边网格本质上是一个可以保存边缘信息的3维的数据结构。对于一张2维图片,在2维空间中增加了一维代表像素的强度slice操作(上采样)BilateralGuidedUpsampling这篇文章用双边网格实现图像的操作算子的加速。算法的核心思想是将一幅高分辨率的图像通过下采样转换成一个双边网格,在双边网格中每个格子就是一个图像的仿射变换算子,它的原理是在空间与值域相近的区域内,相似输入图像的亮度经算子
  • 021：为什么是卷积呢？ 董董灿是个攻城狮 计算机视觉保姆级教程人工智能计算机视觉CNN
    本文为合集收录，欢迎查看合集/专栏链接进行全部合集的系统学习。合集完整版请查看这里。卷积算法非常重要，但是为什么是卷积呢?在进一步学习之前，先看一看神经网络(或者叫一个AI模型)是如何完成一张图片的推理的。你肯定听说过阿尔法狗大战柯洁的故事，当时新闻一出，不知大家什么反应，反正我是被震撼到了：AI模型竟然学到了那么多的棋谱，而且人类在AI的面前毫无还手可言。但是，你有没有想过一个问题：阿尔法狗学会
  • 【音视频之SDL2】一篇搞懂纹理与渲染 人才程序员 音视频基础大合集音视频cc++SDL2计算机视觉视频编解码实时音视频
    文章目录前言SDL2的纹理与渲染什么是纹理？什么是渲染？比较SDL_SurfaceSDL_Texture纹理与渲染的关系使用纹理与渲染绘制一个BMP图片使用纹理与渲染的流程SDL_CreateRenderer作用函数原型参数返回值SDL_CreateTextureFromSurface作用函数原型参数返回值SDL_UpdateTexture作用函数原型参数返回值何时调用它SDL_RenderCop
  • Python3-excel文档操作（二）：利用openpyxl库处理excel表格：在excel表格中插入图片 liranke Python学习笔记pythonopenpyxlpython处理excelload_workbook
    1.简介excel表中可以插入图片，使用openpyxl库可以实现这个功能。2.代码：#-*-coding:utf-8-*-importosimportsysimporttimeimportopenpyxlfromopenpyxlimportload_workbookfromopenpyxl.drawing.imageimportImagedefopenxls_insert_img(fname,i
  • 使用Scrapy抓取图片网站的图片：完整教程与实战案例 Python爬虫项目 2025年爬虫实战项目scrapy爬虫python音视频开发语言selenium
    引言在互联网时代，图片已经成为我们生活和工作中不可或缺的一部分。随着社交媒体、电子商务、新闻网站等平台的普及，图片的需求量和使用量不断增加。因此，如何高效、便捷地抓取网站上的图片，成为了许多数据工程师、爬虫开发者以及数据科学家需要解决的问题。Scrapy是Python中一个非常强大且广泛使用的爬虫框架。它不仅提供了强大的抓取能力，还能够轻松地处理大规模数据抓取和高效的数据存储。Scrapy适合处理
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他