Html
关注
分享
扫一扫
文章平均质量分 75
zzc1684
这个作者很懒，什么都没留下…
展开
-
JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onload方法要节省很多时间，甚至一分钟以上都有可能，并且这种方法适用主流浏览器包括IE低版本浏览器。我们一步一步进入这个过程。一、简陋的获取图片方式 / 图片地址 后面加时间戳是为了避免缓存var img_url = 'http://www.qttc.net/static/uploa...原创 2015-12-08 18:30:33 · 153 阅读 · 0 评论 -
jquery Jcrop图像裁切插件中文api文档及示例
Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。jcrop是添加图像裁剪功能的Web应用程序的快速简便的方法。它将使用一个强大的跨平台的DHTML种植引擎，忠实于熟悉的桌面图形应用的典型的jQuery插件轻松。options 参数说明名称默认值说明allowSelecttrue...原创 2015-12-08 18:27:43 · 377 阅读 · 0 评论 -
设计师必读的15个响应式网页设计教程
@陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。” 这种兼顾多屏幕多场景的...原创 2015-11-22 13:45:09 · 229 阅读 · 0 评论 -
Window.ShowModalDialog使用详解 模态对话框
Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来...原创 2014-04-29 11:02:37 · 306 阅读 · 0 评论 -
window.open() 获取返回值
1. 主页main.html<html><head></head><script language="javascript" type="">function show(){ var x=(window.screen.width-200)/2; var y=(window.screen.height-200)/2; var ...原创 2014-04-29 10:35:00 · 4466 阅读 · 0 评论 -
css input[type=file] 样式美化，input上传按钮美化
思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构： <a href="javascript:;" class="a-upload"> <input type="file" name="" id=""&原创 2016-09-18 15:19:10 · 1575 阅读 · 0 评论 -
免费下载！22个最新的HTML&CSS3 UI工具包
概述：本文盘点了22款适用于网页设计的HTML&CSS3 UI工具包，并且全部都是免费的哦！喜欢就赶紧下载或收藏吧。App开发者福利：iOS7图标模板和UI工具包汇总推荐10款最新的免费用户界面工具包（附下载)直接拿来用：13款免费的CSS UI工具包10个超酷炫Bootstrap HTML & CSS UI工具包12款免费且精美的We...原创 2015-09-09 10:30:30 · 259 阅读 · 0 评论 -
Padding与line-height的区别
你对Padding属性与line-height的区别是否了解，这里向大家描述一下，其实padding是布局设置，对容器进行内边距定义。而line-height是行距设置，设置对象（如文本）的行高。Padding属性与line-height的区别最近有朋友提出一个问题，padding与line-height的区别。这是CSS基础知识，对盒模型知识与布局以及相关属性不是很了解的时候，是很容易...原创 2015-09-07 20:11:30 · 886 阅读 · 0 评论 -
6款漂亮HTML CSS样式用户留言表单
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。标记首先我们要在网页中加上常用的几个...原创 2015-08-08 10:17:40 · 1308 阅读 · 0 评论 -
javascript上传图片前预览图片兼容大多数浏览器
上传图片前预览图片这种效果应用比较广泛，实现的方也大同小异，下面为大家介绍下，在javascript中是如何实现的，感兴趣的朋友可以参考下 <div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div&原创 2015-12-08 21:45:21 · 164 阅读 · 0 评论 -
FileReader：读取本地图片文件并显示
查看演示要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返 回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供 相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接...原创 2015-12-08 21:47:10 · 3058 阅读 · 0 评论 -
使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)
原理：1.使用FileReader 读取图片的base64编码2.使用ajax，把图片的base64编码post到服务器。3.根据接收到post的数据分析图片的类型(jpg,gif,png)，并把base64_decode后的数据生成对应类型的图片文件。 <!DOCTYPE HTML PUBLIC> <html> ...原创 2015-12-08 21:49:58 · 199 阅读 · 0 评论 -
HTML5 Geolocation（地理定位）
http://www.runoob.com/html/html5-geolocation.html HTML5 Geolocation（地理定位）HTML5 Geolocation（地理定位）用于定位用户的位置。定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息...原创 2016-02-26 22:29:40 · 125 阅读 · 0 评论 -
使用scrollIntoView方法解决抛锚定位时网页往上跳的问题
一直都是使用抛锚location.href = "page.htm#anchor";在页面定位位置，但是经常会出现在抛锚定位时页面整体往上跳的问题，每一次都是怀疑页面div+css闹出来的问题，折腾来折腾去依然是无法解决。在网上查了一下，终于找到一个替代方案，就是使用scrollIntoView方法：语法：object.scrollIntoView( [bAlignToTop])...原创 2016-02-16 18:04:00 · 2350 阅读 · 0 评论 -
CSS3实例教程:hover、active和:focus伪选择器。
CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。 今天我们先来接触:hover、active和:focus这三种状态伪类选择器。:hover选择器、:active选择器和:focus选择器 :hover选择器：当鼠标悬停在所指定的元素上时所使用的样式； ...原创 2016-01-16 15:39:17 · 638 阅读 · 0 评论 -
如何使用CSS设置<input>标签的背景小图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/ur...原创 2016-01-16 14:55:02 · 432 阅读 · 0 评论 -
行内元素和margin叠加问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&原创 2016-01-15 10:34:00 · 264 阅读 · 0 评论 -
盒子模型，块级元素和行内元素
总结块级元素和行内元素区别行内元素同一行水平排列。块级元素各占据一行，垂直方向排列。块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效可以通过修改样式display属性改...原创 2016-01-15 09:37:52 · 295 阅读 · 0 评论 -
CSS中margin边界叠加问题及解决方案
本文向大家描述一下CSS的margin边界叠加问题，边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 你对CSS的margin边界叠加的概念是否了解，这里和大家分享一下，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加。CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念。但...原创 2016-01-13 12:11:25 · 172 阅读 · 0 评论 -
js获取网页高度和宽度
jquery获取：//整个网页高度alert($(document).height());//当前可见网页高度alert($(window).height()); controlSize = Math.ceil($(document).height() / $(window).height());//向上取整controlSize = Math.floor($(documen...原创 2016-01-13 09:31:04 · 171 阅读 · 0 评论 -
JS 对图片base64编码字符串进行解码并输出图像
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>..原创 2015-12-09 15:51:08 · 2123 阅读 · 0 评论 -
半透明遮蔽层div
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>半透明遮蔽层div</title> <meta content="width=device-width, ini原创 2016-05-30 09:55:07 · 204 阅读 · 0 评论 -
css兼容性的图片变灰
img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0...原创 2014-09-22 15:33:10 · 225 阅读 · 0 评论 -
css把背景图片拉伸至100%
<html> <head> <title>test</title> <style type="text/css"> #bodybg { position: absolute; width: 100%; height: 100%; l...原创 2016-05-06 17:46:07 · 448 阅读 · 0 评论 -
IE浏览器下当滚动网页滚动条的时候DIV依然固定在屏幕的设定的位置上
IE浏览器下当滚动网页滚动条的时候DIV依然固定在屏幕的设定的位置上 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" cont...原创 2014-12-30 17:10:00 · 249 阅读 · 0 评论 -
用JavaScript限制textarea输入长度 (For: IE、Firefox ...)
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> &原创 2014-12-19 19:54:53 · 140 阅读 · 0 评论 -
在html 的img属性里只显示图片的部分区域(矩形,给出开始点和结束点),其他部份不显示,也不要拉伸...
在html 的img属性里只显示图片的部分区域(矩形,给出开始点和结束点),其他部份不显示,也不要拉伸方法1：<div style= "position:absolute;left:0px; top:0px;width:600px; height:400px; clip:rect(10px 30px 30px 10px) "> <img ...原创 2012-09-13 18:36:40 · 661 阅读 · 0 评论 -
div在同一行中显示
一般我们在做网页的时候如果放两个DIV，那在显示的时候这两个DIV是在列的方面上显示的，也就是第二个DIV显示在第一个的下面，如果我们想要让这两个DIV在行的方向上显示，可以用下面的css来实现 <html><head><style type="text/css">.left1{float:left; /**//* 这个是关键的地方 让co...原创 2012-05-09 16:06:57 · 288 阅读 · 0 评论 -
适合做faq或menu的滑动效果菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2011-11-03 13:25:51 · 121 阅读 · 0 评论 -
避免表格table被撑开变形的CSS
如何避免表格因为图片尺寸或者过长的英文字符而变形撑开，在CSS加入以下代码就可以防止，同时英文单词也会按单词断行，不是按字母这个。我想说的是这个在CSS2.0是不支持的，但是能解决一些实际问题。页面设计不是为了标准检验而设计，还是以用户使用为主，在目前有些WEB标准无法解决的一些问题上，我会采用一些非标准的方法处理，只要主流BROWSER如IE,Firefox,Netscape,Opera等上...原创 2011-11-02 10:22:36 · 150 阅读 · 0 评论 -
html滚动条样式
一、滚动条的轨迹，记作：scrollbar-track。所谓“轨迹”，指滚动条的滑动块运行时所必经的路线。 二、滚动条的滑动块，即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块，记作：scrollbar-face。face即滚动条的“脸”，注意它有三张“脸”：滑动条和两头的小方块。 三、滚动条亮边框部分，记作：scrollbar-highlight。这个亮边框，和表格的亮边...原创 2011-10-10 07:21:03 · 241 阅读 · 0 评论 -
Html 滚动条样式大全
属性设置： WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度. OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为：auto(需要时才显示) BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码. &l...原创 2011-10-10 07:18:07 · 445 阅读 · 0 评论 -
Html中tab的实现(3种类型)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2011-09-30 10:48:00 · 1532 阅读 · 0 评论 -
让DIV的滚动条自动滚动到最底部 - 4种方法
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。网上有资料介绍说通过设置scrollTop属性来控制滚动条位置，具体可参见：http://hi.baidu.com/chen1345789/blog/item/de727bfb45...原创 2014-12-31 09:57:38 · 186 阅读 · 0 评论 -
js跳转到锚点
1，在页面添加location.hash可实现无论哪个页面跳到该页面都跳到固定位置。<script language="javascript"> location.hash="#navBar"; </script><html> <head> </head原创 2014-12-31 11:10:22 · 404 阅读 · 0 评论 -
jquery简单的拖动效果
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单拖曵原理实例</title> <style type="text/css"原创 2015-02-06 09:42:00 · 102 阅读 · 0 评论 -
CSS+DIV+UL+LI制作横向导航菜单
本文通过实际的例子利用CSS+DIV+UL+LI来实现一个兼容各大浏览器的导航菜单。阅读完后，根据你自己的需求加以改善，做出一个属于自己的导航。 由于HTML代码和CSS代码都比较基础，不对代码做详细解释。代码看不懂也没有关系，先“糊里糊涂”按部就班的看下去，“难得糊涂”也是一种境界，之后看看【附录2】弥补一下欠缺的知识就可以了。 在这个过程中请...原创 2014-09-12 09:08:48 · 1323 阅读 · 1 评论 -
CSS 清除浮动
div定位布局图解（position:absolute|relative|fixed和float浮动）http://www.ipmtea.net/css/201010/09_335.html 众 所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句 简单好理解的话...原创 2015-06-13 01:00:48 · 185 阅读 · 0 评论 -
十步图解CSS的position
CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家...原创 2015-06-12 15:07:51 · 134 阅读 · 0 评论 -
IE6 下父级(relative)使用padding后,子元素绝对定位(absolute)的bug
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但 ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等貌似有些不一致。在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，...原创 2015-06-12 15:02:20 · 338 阅读 · 0 评论