HTML
华洛
野生程序员,终身学习者。
展开
-
display:table和display:table-cell垂直居中显示
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜!这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中...原创 2019-05-14 10:55:55 · 2733 阅读 · 0 评论 -
如何修改网页小图标,浏览器页面上的图标。
制作名字为favicon.ico的16*16图标放在网站images目录下在网页首面HTML 的……标签之间插入代码:原创 2017-12-08 14:28:16 · 24981 阅读 · 0 评论 -
websocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享。废话这么多了,最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持转载 2017-11-30 16:14:00 · 147 阅读 · 0 评论 -
检测iframe标签加载完成。可用来做loading页面
var iframe = document.getElementById("frameMain2"); iframe.onload = function(){ alert("iframe load done"); };原创 2017-11-30 14:54:03 · 12269 阅读 · 0 评论 -
监听鼠标滚动事件,当滚动条滚动到某些距离时 显示DIV
// 这个是JQ的, 下面那个是原生JS的, 看使用场景去选 $(function(){ $(window).scroll(function() { var s = $(window).scrollTop(); if(s>300){ $("#hiden").show(); ...原创 2017-09-14 14:27:17 · 7134 阅读 · 0 评论 -
几种常见的载入中、loading页面效果的实现方法总结
原创被我打死了,我就是原创。网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。先说最简单的第一种,原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。先在首页HTML最上面...任意位置都行..加入正在载入中,请稍等.....func原创 2017-11-30 13:34:38 · 31103 阅读 · 0 评论 -
关于改变Google浏览器出现input输入框变黄色问题
1.问题:当谷歌浏览器输入框 有默认的cookie值的时候,会发现输入框背景颜色为黄色,如图:解决办法:css里面加入如下代码,如果没有实现,可以放在页面head 标签里面内来增加权重。 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #262333 in原创 2017-11-15 16:04:17 · 674 阅读 · 0 评论 -
函数怎么传event对象
兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM1 级或 DOM2 级),都会传入 event 对象。下面是一个event对象传递的小例子:var btn = document.getElementById("myBtn");btn.onclick = function(event){ console.log(event.t原创 2017-11-20 14:34:45 · 1866 阅读 · 0 评论 -
js调试工具Console命令详解
一、显示信息的命令复制代码代码如下:常用console命令console.log('hello');console.info('信息');console.error('错误');console.warn('警告');最常用的就是console.log了。二:占位符 con转载 2017-11-29 11:13:55 · 213 阅读 · 0 评论 -
利用阴影可以做背景的渐变色
box-shadow: 0px 52px 50px -20px #fff inset;原创 2017-11-29 09:38:55 · 623 阅读 · 0 评论 -
HTML5 data-* 自定义属性
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题,而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。读写方式dat原创 2017-11-20 09:16:14 · 304 阅读 · 0 评论 -
使用label标签,修改checkbox默认样式
DOCTYPE html>html>head>meta charset="UTF-8">title>checkbox css changetitle>style type="text/css">input[type="checkbox"] + label { cursor: pointer; font-size: 1em;}[id^="checkbox-"] + l原创 2017-11-10 10:43:21 · 4357 阅读 · 0 评论 -
动态的定位圆圈。
div class="quan1"> div class="quan"> div class="center">div> div>div>三个现实定位的圆圈,动态的。/*定位的圆圈*/.quan1 .quan .center{ border: 2px solid #45BDCF; width: .5rem; height: .5rem; border-rad原创 2017-11-22 09:08:04 · 341 阅读 · 0 评论 -
给iframe添加点击事件
为iframe添加onclick事件如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的,例如: $("#iframe1").click(function(){//点击iframe alert("点击1"); });或者 $(function(){//给iframe循转载 2017-12-01 10:25:07 · 9041 阅读 · 3 评论 -
checkbox和后面的文字对齐解决方案
checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式:vertical-align:middle; 1如例所示:c:forEach var="user" items="${userItem}"> type="checkbox" value="${user.map.YHID}原创 2018-01-10 10:22:43 · 11354 阅读 · 0 评论 -
iframe 取消白边的方式:真 · 没有白边
iframe src="" frameborder="0" style="dispaly:block;">iframe>就可以取消白边了。是真的取消白边!!!全网第一个!!!原创 2017-11-11 10:53:49 · 4292 阅读 · 4 评论 -
Java根据html模板创建 html文件
1,写JAVA代码 public String patientsindex(HttpServletRequest request){ //获取当前项目所在的绝对路径 path String t=Thread.currentThread().getContextClassLoader().getResource("").getPath(); int num=t.indexOf("原创 2017-12-26 15:04:53 · 4104 阅读 · 1 评论 -
Meta 标签与搜索引擎优化
当谈及到标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?什么是Meta标签Meta标签给搜索引擎提供了许多关于网页的信息。这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的。你可以在网页的 元素中发现标签。在过去,有人曾经问我它是否可以放在网页的,最好不要这样做。如果标转载 2017-12-07 11:40:38 · 1324 阅读 · 0 评论 -
前端HTML5几种存储方式的总结
总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。 目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器 1.本地存储loc原创 2017-12-09 15:10:53 · 278 阅读 · 0 评论 -
JS 制作放大镜对比图功能源码,拥有倍数可选功能
先看效果图:JS文件://$(function ($) { $.fn.blowup = function (attributes,brother,beishu) { var $element = this; var $className = $element.attr("class"); var $class1,$brother //class原创 2017-12-06 10:22:18 · 837 阅读 · 0 评论 -
WEB页面实现QQ,微博,等分享链接
div style="width:640px;margin:10px auto 20px auto; padding:0 0 0 380px;overflow:hidden"> div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px"> a原创 2017-12-09 14:57:19 · 2382 阅读 · 0 评论 -
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持,webkit内核浏览器需添加-web原创 2017-12-13 09:42:25 · 493 阅读 · 0 评论 -
CSS3实现文字流光渐变特效
制作流光文字有几个要点:text-fill-color一般设置为transparent(透明色),然后利用background-image和渐变颜色来设置文字的背景色,利用background-clip来实现文字的截取,再利用background-size设置扩大背景,已使运用animation的时候能达到动画的效果等。DOCTYPE html>html lang="en">原创 2017-12-12 09:27:58 · 7109 阅读 · 0 评论 -
td长度固定,内容过长,超过部分用省略号代替
html的table表格中td长度固定,当内容过长时,超过部分用省略号代替. 具体代码如下: html> head> style type="text/css"> .mytable { table-layout: fixed; width: 98% border:0px; margin: 0px; } .mytable tr原创 2017-12-20 09:37:08 · 691 阅读 · 0 评论 -
(年薪30万)淡入淡出轮播图。CSS+JS
一个有淡入淡出与拉远效果的四张图自动轮播图。 自动轮播图 #box_A{原创 2017-10-20 15:06:06 · 301 阅读 · 0 评论 -
HTML页面使用js获取项目上下文路径
在做项目中,原本使用的是JSP页面,其中,里面有用到${pageContext.request.contextPath}来获取项目的上下文路径。但是,后来考虑到JSP页面初次访问的时候会转换为Servlet,这样就降低了页面的访问速度,于是就考虑使用HTML页面来替代JSP。 替代完成后,通过链接访问HTML页面的时候,会出现“No Mapping Found For URI..转载 2017-10-09 11:06:43 · 3890 阅读 · 0 评论 -
中文字,文本框,button按钮垂直居中对齐方法
中文字,文本框,button按钮垂直居中对齐方法关键,文字要包含在label标签中,并设置行高,否则文字会与文本框的顶端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中,要设置高和行高,行高要小于高。LABEL{LINE-HEIGHT: 20px;HEIGHT: 20px}原创 2017-08-05 14:27:37 · 40511 阅读 · 0 评论 -
HTML 点击更换input样式
制作一张图片然后使用选择器 input:cheacked +span 被选中的input 相邻的span使用css更改其背景图片。background-position : 坐标1 坐标2。原创 2017-08-05 09:37:27 · 1783 阅读 · 0 评论 -
HTML5 <datalist>标签
可以在input完成自动补全。option标签对中可以放 对value的注释。原创 2017-08-04 18:40:10 · 501 阅读 · 0 评论 -
超级强大的SVG SMIL animation动画详解
//zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着【右键-新标签页打开图片】。一、SVG SMIL animation概览1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准的。本文所要介绍的SVG动画就是基于这种语言。SMIL允许转载 2017-07-27 16:36:53 · 1154 阅读 · 0 评论 -
HTML 导入导出
最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。说白了,就是一件事,就是如何读取或写入本地文件系统中的文件。这件事情在HTML5以前是一件非常恐怖的,因为浏览器对本地文件系统有非常强的保护,似乎是一种叫做沙盒的机制,总之是,JS不可以直接操作它。所以,这个时候,要想转载 2017-08-04 15:05:21 · 10519 阅读 · 0 评论 -
HTML 属性继承与默认
Initial 设置属性为默认值。div {color: red; }h1 {color: initial; }这样设置,DIV下的元素 除了h1都会变成红色 h1为默认的 inherit; 继承父类属性原创 2017-08-04 09:48:57 · 2805 阅读 · 0 评论 -
HTML 渐变色
HTML 渐变色-webkit-linear-gradient( rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%)原创 2017-07-26 15:44:02 · 1111 阅读 · 0 评论 -
调节按钮亮度,调节扁平化
opacity :0.9原创 2017-07-31 17:56:32 · 327 阅读 · 0 评论 -
html中的select下拉框具有输入功能
转载:https://www.douban.com/note/395390036/一般情况下,select下拉框是只能选择,不能用来输入内容的。当select下拉框中没有要选择的信息项时,可以直接在select中输入自己想要得信息项,在输入信息项时,不改变select下拉框中原有的信息项。[html] view plain copy print?转载 2017-07-21 11:32:36 · 5050 阅读 · 0 评论 -
设置 input 为不可填写状态
将HTML文本框设为不可编辑文本框。方法1: onfocus=this.blur()方法2:readonly方法3: disabled让文本框变灰不可输入:不可输入还可以用上述三种方法原创 2017-07-17 12:13:57 · 1857 阅读 · 0 评论 -
详解用CSS3制作圆形滚动进度条动画效果
今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本。所以,今天就一起把各种效果都实现吧!内 容 先看一下效果图,会提升我们的学习兴趣哟:转载 2017-07-28 13:36:10 · 702 阅读 · 0 评论 -
分享:CSS3用transition实现边框动画效果
废话不多说,直接上代码:1:csscode:/*** css code ***/.animate{transition: all 0.5s ease-in-out;}.m{width: 200px;height: 50px;text-align: center;font-size: 20px;line-height: 50px;font-family: Microsoft Yahei; c转载 2017-08-24 13:48:05 · 5066 阅读 · 0 评论 -
JS 对象(Object)和字符串(String)互转
利用原生JSON对象,将对象转为字符串[javascript] view plain copy var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = '8 May, 2011'; var str = JSON.stringify(jsObj); al转载 2017-09-11 17:35:39 · 877 阅读 · 0 评论 -
CSS3 产生动画效果的属性
transition通过编辑属性来获得动画效果transform给一个翻转的效果animation动画效果原创 2017-09-11 15:51:50 · 432 阅读 · 0 评论