前端
前端
涂作权的博客
To do what I want to do!
展开
-
HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionSto原创 2017-03-24 09:11:48 · 1078 阅读 · 0 评论 -
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}原创 2015-07-29 11:20:41 · 4449 阅读 · 1 评论 -
通过iframe引入另外一个项目中的html片段到项目中,解决样式,高度,兼容等问题的策略
http://172.16.24.11:9000/cartoon-web/footer_new" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width='100%' height='392' id="iframepage" name="iframepage" onLoad="iFrameHeigh原创 2015-06-26 10:57:46 · 5964 阅读 · 0 评论 -
一个能够兼容IE6,IE8,IE9,IE10,IE11,谷歌,火狐,360等常见的10个浏览器的HTML头部信息配置代码
首页原创 2014-01-11 11:09:52 · 17921 阅读 · 3 评论 -
编写手机端自适应页面案例,springMVC代码,SpringMVC上传代码,去掉input框中原有的样式,使ios按钮没有圆角,css中的border-radius类似
1、编写的页面 pageEncoding="UTF-8"%>http://java.sun.com/jsp/jstl/core" prefix="c"%>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">pageEncoding="UTF-8"原创 2015-04-10 23:59:16 · 2621 阅读 · 0 评论 -
网站用户访问速度监测分析项目
刚来新公司不久做运维开发,本为以为要继续做我的开源软件开发,结果领导给分了个以前基本从来没考虑的任务,监测用户访问我们网站的速度,没错,是监测所有的用户访问我们网站的速度。刚来新公司不久做运维开发,本为以为要继续做我的开源软件开发,结果领导给分了个以前基本从来没考虑的任务,监测用户访问我们网站的速度,没错,是监测所有的用户访问我们网站的速度。就跟基调一样。因为基调不能实现我们一些特殊的转载 2014-07-31 00:05:59 · 1432 阅读 · 0 评论 -
C语言进行网站开发之cgi
安装Apach配置ApacheRuntime下面的过程中一直点击next配置CGI,放开配置:AddHandler cgi-script .cgi2.添加Option,截图3.编写CGI代码如下:#define_CRT_SECURE_NO_WARNINGS //取消安全检查#原创 2014-07-31 01:34:47 · 3150 阅读 · 0 评论 -
CSS :active 伪类
:active -- CSS :active 伪类,适用于一个元素被激活时的样式 语法: :activeCSS版本:CSS1引用网址:http://www.dreamdu.com/css/pseudo-class_active/说明: 适用于一个元素被激活时的样式,例如鼠标在此元素的区域内按下但还没有释放时客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:h转载 2014-05-11 13:03:12 · 2264 阅读 · 0 评论 -
设置双核浏览器的浏览模式<meta name=“renderer” content=“webkit|ie-comp|ie-stand”>
今天上知乎看到有人在上邀请我回答这样一个问题:如果访问的页面中有 CSS3 代码,双核浏览器会自动切换到 Webkit 内核吗?http://www.zhihu.com/question/20094625我的第一反应是:不会。目前我知道IE可以设置浏览模式: http-equiv=“X-UA-Compatible”content=“转载 2014-01-17 10:01:40 · 43207 阅读 · 0 评论 -
通过js让页面中的元素上下居中的写法
/** * brief 这些代码用于在线制图中 attention author begin modify by * null *//***alert($(window).height()); //浏览器当前窗口可视区域高度*alert($(document).height()); //浏览器当前窗口文档的高度*alert($(document.body).heig原创 2014-01-13 14:04:48 · 4486 阅读 · 0 评论 -
一个系统的base.css,兼容IE7,IE8,IE9,IE10,IE11,firefox,safari,谷歌,360,世界之窗等浏览器起的公共css
/* * name :tuzuoquan * mail :tuzq@XXXXX * date :2013/12/13 * version :0.1 * description:XXXX系统通用CSS * CopyRight (C) 2013-12 */html,html *{ margin:0px; padding:原创 2014-01-11 11:12:07 · 5885 阅读 · 0 评论 -
Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素 1、格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例:window.frames["ifm"].doc转载 2015-11-04 22:55:01 · 1550 阅读 · 0 评论 -
在IFrame中查找IFRAME中的元素的方式
var websiteSearchButton = window.parent.parent.document.getElementById('mainFrame') .contentWindow.document.getElementById("webresource-search-button");原创 2016-04-19 10:21:56 · 7248 阅读 · 0 评论 -
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/案例效果如下:2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例:3.编写的html代码如下: div id="light" class="white_content"> div class="vatitlee">原创 2015-09-10 23:55:20 · 9845 阅读 · 1 评论 -
01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下:2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的Boilerplate.html:3 代码内容如下: 作者:XXX@qq.com 时间:2015-08-02 描述:使用MUI,您可以原创 2015-08-03 00:40:37 · 4398 阅读 · 0 评论 -
zTree的调用设使用(跨两个系统,两类技术实现的项目案例SpringMVC+Spring+MyBatis和Struts2+Spring+ibatis框架组合)
1、从zTree官网上下载zTree的包,zTree的官方网址是:http://www.ztree.me/v3/main.php#_zTreeInfo2、引入zTree所需的依赖,例如(jQuery的js自己引入): page language="java" import="java.util.*" pageEncoding="utf-8"%> include file="co原创 2015-11-26 21:45:02 · 2826 阅读 · 4 评论 -
CSS中编写省略号代码片段
#component-content #dtMain .dt-ul > li .component-item .component-name{ display:inline-block; text-align:center; height:37px; line-height:3原创 2016-02-20 09:48:10 · 1709 阅读 · 0 评论 -
让页面中的元素在网页最底部的代码片段
代码片段内容: 欢迎页面 <img alt="" src="${imagesPath}/student/student_footer_logo.png" style="margin-top:15px;"/> 技术支持:上海互宝能源科技有限责任公司原创 2017-02-11 00:58:37 · 5182 阅读 · 1 评论 -
相对路径和绝对路径的区别
绝对路径:是从盘符开始的路径,形如C:\windows\system32\cmd.exe相对路径:是从当前路径开始的路径,假如当前路径为C:\windows要描述上述路径,只需输入system32\cmd.exe实际上,严格的相对路径写法应为.\system32\cmd.exe其中,.表示当前路径,在通道情况下可以省略,只有在特殊的情况下不能省略。假如当前路径为c:转载 2014-02-12 16:39:13 · 3014 阅读 · 0 评论 -
CSS中强制ul li中的文字换行
无标题文档 li{ display:block; float:left; width:40px; margin-right:8px; white-space:normal; word-break : break-all; word-wrap: bre原创 2013-08-08 14:56:11 · 12847 阅读 · 0 评论 -
页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow: hidden; } 效果图:原创 2016-07-12 20:39:55 · 7250 阅读 · 0 评论 -
Iframe高度自适应(兼容IEFirefox、同域跨域)
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于J原创 2016-07-13 14:59:40 · 4221 阅读 · 0 评论 -
JS中回调函数的写法
回调函数(callback) var f; function d(){ alert("我是Jquery定义的函数"); } var e = function(){ alert("我也是Jquery定义的函数"); } function a(callback) { alert("我是parent函数a!转载 2016-06-01 11:30:47 · 15339 阅读 · 0 评论 -
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-s转载 2013-12-25 10:48:04 · 2220 阅读 · 0 评论 -
线性渐变(linear-gradient)
线性渐变(linear-gradient)现行渐变首先看下示例(1)垂直渐变(2)垂直渐变IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数:startColo转载 2014-01-08 13:26:57 · 1912 阅读 · 0 评论 -
linear-gradient与radial-gradient
渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。要得上面的线性渐变效果,我们这样去定义CSS3样式:background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(lin转载 2014-01-08 13:22:33 · 1764 阅读 · 0 评论 -
图片格式介绍
BMP格式:Windows系统下的标准位图格式,未经过压缩,生成的图像文件较大,用于网页显示会增加用户的下载时间,不建议大量使用。GIF格式:CompuServe公司在1987年开发的图像文件格式,GIF图像文件的数据时经过可变长压缩的,支持2~256种色彩的图像,故不适合保存照片。JPEG格式:由软件开发联合会组织制定的有损压缩格式,压缩比较高,支持24bit色彩,适合保存照片。原创 2012-12-27 14:53:31 · 1199 阅读 · 0 评论 -
一个JSON的实例
html> head> title>demo.htmltitle> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> style type="text/css"> style> script type="text/javascript">funct原创 2012-12-27 14:54:44 · 909 阅读 · 0 评论 -
showModalDialog和showModelessDialog缓存问题,参数详解,
一、前言要打开一个可以载入页面的子窗口有三种方法,分别是window.open、window.showModalDialog和window.showModelessDialog。open方法就是打开一个页面,可以说同用url链接打开一个页面一样,不推荐使用,因为很多浏览器会拦截。这里推荐使用的是window.showModalDialog和window.showModelessDial原创 2012-12-24 16:36:25 · 1192 阅读 · 0 评论 -
JS关闭窗口兼容Firefox、Chrome、IE(二次总结后)
要想使Chrome,IE,Firefox点击一个按钮调用js方法都自动关闭窗口,应该写成如下的。function windowclose() { var browserName = navigator.appName; if (browserName=="Netscape") { window.open('', '_self', '');原创 2012-12-23 21:30:03 · 2030 阅读 · 0 评论 -
CSS控制所有浏览器水平居中和控制链接不换行的效果
CSS部分/*页尾开始*/#footer{ clear:both; height:auto; background:rgb(38,88,87);}#footer *{ color:rgb(217,230,210); text-align:center;}#footer .bottom{ height:auto; text-align:center原创 2012-12-05 20:02:17 · 1304 阅读 · 0 评论 -
6种CSS控制元素上下居中效果
通常我们用到的css布局都是左右居中,经典css写法如下: body{ margin:0; padding:0; width:100%; height:100%; } div{ margin:0 auto; width:500px; heigth:auto; } 上面是原创 2012-12-05 19:56:26 · 1688 阅读 · 0 评论 -
CSS中控制不换行属性
强制不换行属性 white-space:nowrap; word-break:break-all;只对英文起作用,以字母作为换行依据 word-wrap:break-word; 只对英文起作用,以单词作为换行依据 white-space:pre-wrap; 只对中文起作用,强制换行 white-space:nowrap; 强制不换行,都起作用 white-space:n原创 2012-08-30 10:20:35 · 6869 阅读 · 0 评论 -
CSS写省略号
http://www.w3.org/TR/html4/strict.dtd">css写省略号方法/* CSS DEMO */ * { margin: 0; padding: 0; }a { text-decoration: none; color: #000; }a:hover { text-decoration: none;原创 2012-07-22 10:01:38 · 1189 阅读 · 0 评论 -
CSS中一个font缩写的实例
font:italic bold 100px/200px Arial, Helvetica, sans-serif;表示的意思是是:这个元素里的字体是斜体,加粗,字体大小为100px,行间距是200px,字体是:Arial, Helvetica, sans-serif;原创 2012-07-18 23:12:40 · 1253 阅读 · 0 评论 -
开发每个静态网站是的模版代码(自己开发是长期优化过的觉得最简的代码)
/*Index page,designed by tuzuoquan,version:1.0,2012-7-16*//**Styles which is common in most website,the styles blow can controll all the pages in the website.**//*全局样式*//*这里是子页面的CSS样式*/*{原创 2012-07-18 23:37:31 · 1243 阅读 · 0 评论 -
使用DOM解析常用方法
使用DOM修改HTML文档的使用方法方法名称返回类型方法描述documentElement节点获取文档的根元素节点childNodes节点数组获取节点下的子节点firstChild节点获取第一个子节点la原创 2012-12-27 14:52:31 · 1273 阅读 · 0 评论 -
JavaScript操作select标签详解
获取select值获取显示的汉字document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text获取数据库中的idwindow.document.getElementById("bigclass").value获取select组转载 2012-12-17 09:25:36 · 1425 阅读 · 0 评论 -
当内容超出最大的长度的时候,使用CSS使文本显示省略号
.description{ height:17px; overflow:hidden; text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}原创 2014-01-06 20:43:10 · 3312 阅读 · 0 评论 -
利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法 方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器的高度也为500px,同样可以实现垂直居中,但转载 2013-12-31 16:36:26 · 3409 阅读 · 0 评论