HTml&Css关
文章平均质量分 63
疯狂紫萧
互联网难民,艰难生存。
展开
-
使用react-native-image-crop-picker上传图片
使用reac-native的图片上传插件image-crop-picker上传图片的时候遇到了好多坑,真是把我坑惨了。安装安装可以参考插件提供的方法去安装。需要注意的是,如果android或者ios是有人负责的话就不要link了。link会自动关联代码会把客户端的代码变的不是你想要的。调用相册import ImagePicker from 'react-native-image-crop-picke原创 2017-09-11 14:10:01 · 4120 阅读 · 6 评论 -
用jQuert制作轮播图-兼容各种浏览器2
原理:1.图片由ul、li组成。当它左右切换的时候移动ul的margin-left。上下移动的时候移动ul的margin-top以此来达到左右移动图片的目的。2.每个图片对应的按钮在初始化的时候生成,然后再添加事件,可以免除事件加不上去的麻烦。3.左右两侧的按钮不能写在一个div中,结果就是图片上有一条不能点击的区域。单独写即可。效果预览:一下开原创 2014-01-13 12:46:01 · 2514 阅读 · 0 评论 -
IE6下div图片下边4px空隙bug的解决办法
IE6下图片下边有空隙的解决方法网上已经有很多种解决办法了,我今天同大家一起复习一下那些办法,并提供一些新的方法供大家参考。下面请先看一下出现问题的代码: IE注释bug #all { float:left; padding:10px 30px; font-size:12px; color:#FFF; background-color:#CCC; } #sub {转载 2014-07-15 12:02:58 · 471 阅读 · 0 评论 -
二维码格式解析
随着智能设备的普及,二维码(2D barcode or QR code=Quick reference code)的使用越来越广泛,用智能手机拍下二维码就方便地获取网址、手机号码以及个人名片等有用的信息。本文将要介绍的是可被一般智能设备识别的二维码数据存储格式。1. 网址 (URL)包含网址的二维码是当前应用使用最广泛的(例如:http://lzw.me),二维码识别软件能够通过转载 2014-07-28 15:17:06 · 2979 阅读 · 0 评论 -
区分IE8 、IE9 、IE10的专属css hack
一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack.因为IE8及以下版本是不支持CSS3的,但是我们如果使用css3,在IE下IE9正常渲染,但我们又想让IE8及以下的浏览器实现同样的效果,且不希望使用css3pie或htc或条件注释等方法时,可能就会需要用到IE8和IE9的专属css hack了..test{ /*转载 2014-06-10 11:49:06 · 4961 阅读 · 0 评论 -
HTML5 中的文件(File)操作
HTML5中丰富了input 标签type为file的操作。提供了一个multiple属性。以及提供了在浏览器中操作file的接口。type:上传文件的mime属性name:上传文件的name属性不过最重要的还是FileReader接口,可以实现文件内容读取。目前,FileReader接口支持的比较好的是:Firefox,Opera。FileRead转载 2014-05-06 16:34:42 · 2422 阅读 · 0 评论 -
我的css样式重设base.css
利用这样一个样式表来达到,使得浏览器的样式在一开始就最大程度的统一一次。@charset "utf-8";/*! * @名称:base.css * @功能:1、重设浏览器默认样式 * 2、设置通用原子类 *//* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html { background:white; color:black;原创 2014-03-31 13:02:40 · 596 阅读 · 0 评论 -
全屏自适应背景图
主要代码下:(function($) { $.fn.fullBg = function(){ var bgImg = $(this); function resizeImg() { var imgwidth = bgImg.width(); var imgheight = bgImg.height(); var winwidth = $(转载 2014-03-07 12:34:31 · 801 阅读 · 0 评论 -
用jQuert制作轮播图-兼容各种浏览器
原理:1.图片由ul、li组成。当它左右切换的时候移动ul的margin-left。以此来达到左右移动图片的目的。2.每个图片对应的按钮在初始化的时候生成,然后再添加事件,可以免除事件加不上去的麻烦。3.左右两侧的按钮不能写在一个div中,结果就是图片上有一条不能点击的区域。单独写即可。以下是核心代码://取得外部div对象 var obj = $(th原创 2013-12-27 14:38:59 · 924 阅读 · 0 评论 -
H5 缓存机制浅析 移动端 Web 加载性能优化
1 H5 缓存机制介绍H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。H5 应用程序缓存为应用带来三个优势:离线浏览 用户可在应用离线时使用它们速度 已缓存资源加载得更快减少服务器负载 浏览器将转载 2015-12-17 11:01:51 · 3297 阅读 · 0 评论 -
前端头部标签汇总
lang="zh-cmn-Hans"> > charset='utf-8'> http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> name="description" content="不超过150个字符"/> name="keywords" conte原创 2016-03-30 12:02:32 · 2423 阅读 · 0 评论 -
CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法。原文博客地址:从隐藏元素谈起知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书)念念不忘,必有回响;有一口气,点一盏灯。正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法,总结如下:overflow:hiddeno转载 2016-12-10 17:23:36 · 2538 阅读 · 0 评论 -
前端页面自动接管流程探索
缘起在使用框架或者自己做的方案使用过程中总是有一些不如意的地方。比如,加载方式要不就是全部异步,要不就是后端渲染。总归是感觉比较麻烦。在此,我提出一种方式。前端的方案用前端实现。所有数据在前端页面渲染结束之后再获取并重新渲染。这个跟之前的异步方式有一些区别。第一批加载的东西会在页面下载完成,并加载完初步的组件之后再调用。剩余的部分包括其他数据的渲染甚至路由之后东西的渲染后放在第二批执行。探索1.基本原创 2017-07-28 13:35:37 · 383 阅读 · 0 评论 -
模块化前端项目解决方案--带node版
在新的项目中使用到了另外一套解决方案,根据具体情况设计了以下的解决方案。node层设计本地生成第一次访问的页面并做缓存处理。同时使用代理方式代理后端接口。 1.项目使用到了express+ mustache-express来做基础的页面生成。 考虑到要尽量少采坑,所有使用了成熟的express 使用mustache是基于: 1.语法比较接近于现代方式 2.提供了引用第三方模板原创 2017-07-15 19:55:16 · 981 阅读 · 0 评论 -
创业成长系列.前端项目模块化解决方案
一个完整的前端项目如果想要不断的持续开发下去,一定在最初的时候就要有一个完整的解决方案。在这里我教给大家其中的一种解决方案。以后会放出升级版,这一版是最原始的版本。前后端分离的开始首先简单的把前后端分离出来吧。1.所有资源全都静态化,数据都从后端的接口获取。 2.使用nginx将前端和后端链接在一起,同时将资源和页面分开。 以上部分就显示了分离以及分离之后组成的页面部分。其中前端资源包括cs原创 2017-06-22 12:06:21 · 1952 阅读 · 0 评论 -
flex弹性布局图解
下面是图片演示flex的几个属性原创 2017-02-28 09:55:02 · 650 阅读 · 0 评论 -
JavaScript 资源大全中文版
包管理器管理着 JavaScript 库,并提供读取和打包它们的工具。npm:npm 是 JavaScript 的包管理器。官网Bower:一个 web 应用的包管理器。官网component:能构建更好 web 应用的客户端包管理器。官网spm:全新的静态包管理器。官网jam:一个专注于浏览器端和兼容 RequireJS 的包管理器。官网jspm:流畅的浏览器包管理器。官网End转载 2016-12-10 10:29:40 · 4423 阅读 · 1 评论 -
css预处理语言的模块化实践
编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目,那就需要对css进行管理和规范了,否则会发生不可挽回的后果(吓唬谁呢??)。背景上一节【从css谈模块化】我们通过规范的约束,将css的编写方式进行了优化和改进,形成一种可持续发展的路线转载 2016-12-10 17:31:32 · 2019 阅读 · 0 评论 -
Javascript中构造函数与new命令
典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念。所谓“类”就是对象的模板,对象就是“类”的实例。但是,在JavaScript语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)。 以下的内容会分为如下细节:1.对象的概念2.构造函数3.new 命令 3.1:基本转载 2016-12-10 17:28:33 · 2353 阅读 · 3 评论 -
CSS魔法
趁着周五有空,将《css揭秘》这本书快速的阅读了一遍,下面将个人觉得有趣的CSS分享一下。实例地址(分别对应着下面的例子):神奇的CSS半透明边框background-clip属性的默认值是border-box,表示背景被裁剪到边框盒。另外两个参数:padding-box,表示背景被裁剪到内边距框;content-bo转载 2016-12-10 17:27:52 · 1909 阅读 · 0 评论 -
分享10段实用的HTML5代码(二)
6.HTML5页面结构0102html>03head>04 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />转载 2014-01-12 09:21:58 · 685 阅读 · 0 评论 -
分享10段实用的HTML5代码(一)
随着HTML5的流行,许多网站开始介绍HTML5元素和属性的用法,以及各种教程,并且越来越多老的浏览器开始兼容HTML5。 本文作者编译了10段非常实用的HTML5代码片段,开发者可以直接拿过去使用,帮你快速完成HTML5项目的开发工作,你也可以把它们当做一个学习资源,进行参考。 1.HTML5编写的CSS Reset CSS Reset也可以写成Reset CSS,转载 2014-01-12 09:21:07 · 1103 阅读 · 0 评论 -
不一样的设计!20个国外优秀的电子商务网站
对于电子商务网站来说,让用户在购物过程中简单快捷是最重要的,其次是要有精美的页面设计以及产品图片吸引更多客户去购买商品。一个设计良好的电子商务网站会为用户提供一个更愉快的体验,并让他们更容易浏览,搜索,并完成结帐过程。这篇文章收集了20个国外优秀的电子商务网站设计案例,希望能带给你灵感。Evie Oliver Time’s Arrow Ink转载 2013-12-18 15:34:07 · 1450 阅读 · 0 评论 -
Web 开发人员不能错过的 jQuery 教程和案例
Timeline Portfolio超炫的时间轴展示作品集效果。设计师和前端开发人员可以借助这个效果来制作新颖的个人简历。源码下载 在线演示 Swatch Book with CSS3 and jQuery基于 CSS3 & jQuery 实现的多彩的动画 Swatch Book 效果。源码下载 在线演示转载 2013-12-18 15:32:31 · 687 阅读 · 0 评论 -
Web开发者必备的20款超赞jQuery插件
jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件。jQuery插件不仅能够增强网站的可用性,有效地改善用户体验,还可以大大减少开发时间。现在的jQuery插件很多,可以根据您的项目需要来选择。这里为您介绍20款非常不错的插件。Creative Radical Web TypographyLettering.js是一个轻量经的、易于使用的jQuery插件转载 2013-12-18 14:34:46 · 654 阅读 · 0 评论 -
60款很酷的 jQuery 幻灯片演示和下载
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展示系列项目时非常好的方法。 今天这篇文章要给大家分享的是60款很酷的 jQuery 幻灯片插件,相信里面一定会有你喜欢的。Cloud Carousel (演示 | 下载)转载 2013-12-18 14:16:36 · 699 阅读 · 0 评论 -
分享30个最佳 jQuery Lightbox 效果插件
Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的。今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件。转载 2013-12-18 14:12:11 · 874 阅读 · 0 评论 -
bootstrap框架学习笔记
一. 在.spanN(N为1-12的整数)的标签内加.offsetN(N为1-12的整数)可以使标签左边距(margin-left)增加 .spanN(N为1-12的整数)的距离。二. .row以不同的固定宽度定位,而.row-fluid以百分比定位。三. .muted可以使标签背景颜色为灰色(#999999)。四. 文本可以添加以下class改变样式:转载 2013-12-03 13:57:43 · 689 阅读 · 0 评论 -
NVelocity的简单用法
1.下载最新版的Nvelocity的dll文件并且引用2.新建一个类,用来调用Nvelocity:3.初始化模板的设置这里我调用模板文件并且是utf-8格式的。----如果有乱码的现象可以用gb2312代替;4.添加一个赋值方法,将数据绑定到模板5.一个种为显示在页面上。另一种为生产静态页面6.然后就可以在页面直接调用了。原创 2013-12-02 14:20:32 · 929 阅读 · 0 评论 -
Google的一些字体
有的时候觉得网站的字体不好使,不是太大就是模糊。看见别人的网站字体挺后。想下载下来,但是又不知道怎么下载。好了。现在你可以直接引用Google的字体了。代码: 然后就可以使用这些字体了,比如“Open Sans”。具体可以看链接到的内容。提示:css3属性。原创 2013-11-26 15:19:59 · 615 阅读 · 0 评论 -
2012年最佳35款响应式 WordPress 主题【免费下载】
响应式设计(Responsive Design)是2012年设计领域最热门的话题,这个理念由著名网页设计师 Ethan Marcotte 在2010年5月份提出,其目标是要让网站能够根据不同用户使用的设备自动调整布局。 WordPress 作为最流行的博客系统,插件众多,易于扩充功能,而且有许多第三方开发的免费模板,安装方式简单易用。这篇文章和大家分享2012年最佳35款免费的响应式 W转载 2013-12-18 16:29:03 · 928 阅读 · 0 评论 -
酷站欣赏:分享13个五彩缤纷的国外网站作品
对于网页设计来说,使用正确的调色板可能是设计过程中最重要的部分,也是最具挑战性的之一。虽然现有的品牌通常对所用颜色的影响最大,但其他因素可以发挥作用。这篇文章,我们已经收集各种使用颜色的的网站作品,为您提供启发。GetResponse 15th Birthday Designeat Carlo Barberis Sta转载 2013-12-18 15:20:32 · 910 阅读 · 0 评论 -
2013年最新流行的响应式 WordPress 主题1
WordPress 是最流行的内容管理系统,经历了多年的发展和演变。它的成功体现在庞大的社区,数百万的用户,设计师和开发者推动着 WordPress 往更高的层次发展。 海量的免费主题是 WordPress 拥有众多社区的关键之一。所以,今天我们将展示一些很棒的响应式主题,适用于博客,杂志新闻和作品集演示。每个主题都适应任何设备,因此任何人在任何地方都可以访问到您的网站。转载 2013-12-18 16:15:40 · 1659 阅读 · 0 评论 -
自己做个时钟改进版-html5的canvas
上一版本的时钟做的太简单了,以至于要加点什么东西都不行或者很难了。后来我改进了一下,换了一个思路。用画圆的方法确实可以做出来,但是后续加东西就比较麻烦了。不如一次性的做好吧。具体的思路就是利用路径一次性的画好。代码如下: function clock() { var now = new Date(); var ctx = document.getElem原创 2013-12-26 09:27:05 · 594 阅读 · 0 评论 -
八大疯狂的HTML5 Canvas及WebGL动画效果
处理器的性能越来越高。我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果。现在浏览器和web技术的不断发展。浏览器如Firefox、Chrome、Safari和IE10,web技术如Canvas、SVG和WebGL。网速越来越快。一些体验需要实时数据流和预加载资源,更好的网络状况能有更好的体验。我们挑选了8个由WebGL、HTML5 Canvas和Javascript制作的绝妙效果。转载 2013-12-26 10:30:11 · 4635 阅读 · 0 评论 -
自己做个时钟-html5的canvas
这个只是用来练习对html5的掌握程度的。首先,时钟有一个表盘。表盘包括框、刻度2个框就是 一个圆,刻度是一个一个小的线段圆用arc函数可以画出来,刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉同理,指针也可以这样来完成,通过一个角度为0的圆弧。然后计算当前时间,通过判断时间来得到角度。代码如下: var canvas = null;原创 2013-12-25 14:21:36 · 1026 阅读 · 1 评论 -
三种让网站图片生成灰色效果的方法
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异。1、CSS Filter使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。现在,过滤器属性是CSS3转载 2013-12-22 11:12:31 · 1635 阅读 · 0 评论 -
2013年最新流行的响应式 WordPress 主题2
在这篇文章中,我们收集了一些在2013年发布的最好的免费的响应式 WordPress 主题。这些主题包括高级功能,如自定义模板、自定义窗口小部件、自定义菜单主题选项等。让我们来看看下面的清单,并希望你能找到你所寻找的。 Lefty Sensitive Stitch Frank Boast转载 2013-12-18 16:14:09 · 903 阅读 · 0 评论 -
国外网站设计:25个小众的电子商务网站案例
对于电子商务网站来说,网站的设计和布局的可用性对于产品的销售会产生巨大的影响,另外就是产品带给访客的第一印象也很重要。一个设计良好的电子商务网站会为用户提供一个更愉快的体验,并让他们更容易浏览,搜索,并完成结帐过程。 在这篇文章中,我们将展示了25个很好看小众的电子商务网站。你会发现,产品图片和网站的布局和界面设计的外观同样重要。希望这些优秀的案例会为你提供一些灵感,可以善加利用到自己的转载 2013-12-18 15:37:52 · 1597 阅读 · 0 评论 -
分享30个最新的单页网站设计案例
单页网站是指只有一个页面的网站,这种形式的网站曾经非常流行,现在依然有很多人喜欢。不过,并不是每个网站都适合做成单页,一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做。如果你打算做一个这样的网站,那么下面这些例子相信能带给你灵感。Pub AidAboard EntrepreneurshipSoloKiera Lacey转载 2013-12-18 15:25:05 · 1056 阅读 · 0 评论