HTML
文章平均质量分 70
珍妮的小罐君
越努力,越幸运!
展开
-
<meta/>标签大杂烩
META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等,并不是专门给搜索引擎而设的。但其中的keyword 和 description 是搜索引擎来找到网页的一个方式。 1. Viewportviewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域;语法: <me...原创 2016-11-14 17:00:40 · 388 阅读 · 0 评论 -
http 和 websocket
前端时间在做项目的时候遇到这样的一个场景:网页中有一个数据表格,这个数据表格数据表格的内容是从后台读取出来的,但是这些内容会随着时间的变化而变化,有点类似于股票行情。当时我的做法是用setInterval('toPage(1)',1000)来定时执行函数,toPage()方法是通过ajax请求访问服务器,并在成功后拿到后台返回的数据然后去更新页面。但是这种定时的方法有很多不足:(1)频繁的网络请求...原创 2018-04-24 16:28:06 · 367 阅读 · 0 评论 -
hash和hashchange事件
window.location.href和window.locaiton.hash(1)window.location.href 得到的是完整的URL 比如:window.location.href = ' www.baidu.com'(2)window.location.hash 得到的是锚链接 比如:window.location.hash= ' #all'(3...原创 2018-04-17 17:31:02 · 6284 阅读 · 1 评论 -
CSS实现表格表头(thead)固定,内容(tbody)滚动
前言 最近在写一个项目,然后要实现表头固定,tbody内容滚动的效果,该项目中没有使用任何插件,并且表格列数蛮多的,刚开始实现起来遇到各种问题,感觉蛮复杂的,后来找到了一种利用transform的方法实现,效果还不错,请看代码~~~~~~————代码————<!DOCTYPE html><html><head> <meta charset="...原创 2018-03-20 10:50:10 · 27326 阅读 · 18 评论 -
使用formData对象提交表单并上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。如果把表单的编码类型设置为: enctype 属性" style="font-size:14px; margin:0px; padding:0px; border-width:0px 0px 1px; border-top-style:initial; border-right-s原创 2017-09-01 16:44:45 · 6830 阅读 · 0 评论 -
input:-webkit-autofill
chrome表单input获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东,当你选择其中一个时,input文本框的背景会变成黄色的(如下图),这是由于chrome会默认给input加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input:-webkit-autofill, textarea:-webkit-autofill, s原创 2017-09-14 15:48:15 · 11410 阅读 · 3 评论 -
图片预览效果
最近公司要求做一个控台的项目,其中一个页面需要做到类似图片预览的效果,比如,点击移到某张缩略图,上方可以看到相应的大图片,刚开始想着这个不太好实现,但最终还是做出了效果: Title div.up{ width:350px; height:300px; background:原创 2017-07-03 15:39:31 · 332 阅读 · 0 评论 -
Fontello:图标字体的使用
官方网址:http://fontello.com/原文链接:https://github.com/fontello/fontello通常,网页设计开发中,一般都采用图片的形式来做图标,比如,手机图标,定位图标,密码图标等等,使用图片作为图标的话往往有许多不便,如改变大小,颜色等等,都需要打开软件重新作图;而Fontello就像字体一样,可以改变大小,颜色,下面就是关于Fonte翻译 2017-03-17 11:53:35 · 6481 阅读 · 0 评论 -
div模拟input实现输入框
因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢? 先看下效果:看下代码(code)...原创 2017-03-30 10:09:04 · 36205 阅读 · 0 评论 -
js实现模糊匹配
功能描述:在搜索框中输入某一个字段,可以查询到相关的内容功能实现:1. 先声明变量用于保存输入框以及表格里面的内容2. 循环遍历遍历表格每一行,查找匹配项3. 判断如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏代码实现: <html><head> <style>...原创 2017-02-15 15:20:40 · 8947 阅读 · 1 评论 -
Js实现弹框
功能描述:模态框(Modal Dialogue Box)也可叫做模态对话框,或者对话框,当一个模态框被打开时,用户可以与该对话框进行交互,点击关闭按钮可关闭该模态框!功能实现:1. 页面上有一个按钮,用于打开模态框,模态框默认隐藏;2. 用户点击按钮,可打开模态框;用户点击模态框中的关闭或者点击页面其他地方可关闭该模态框原创 2017-02-16 10:22:10 · 3547 阅读 · 0 评论 -
树形列表
树形列表的展开与收缩 div{float:left; height: 100px; line-height: 100px; } #d1,#d3{ background-color: #ccff00; } #d2{ cursor: pointer; background-color: #ffcc00; }原创 2017-02-21 10:21:37 · 478 阅读 · 0 评论 -
后台伸缩二级菜单
实现后台伸缩二级菜单 li{ list-style:none; } li span{ padding-left: 20px; cursor: pointer; } .open{ background: url("img/minu原创 2017-02-20 14:38:39 · 1106 阅读 · 0 评论 -
js之相册预览效果
最近公司没有太多的项目,自己本身也是小白一枚,这几天就自己用js实现了一些小的功能,一方面想提高自己的js功底,一方面也希望给更多的小白们可以参考一下,一些大神们如果觉得有哪些不足的可以指点迷津哦,在此多谢喽。。。。功能描述:通过点击页面中的某张图片,会以弹框形式来查看当前大图,且大图之间可以来回切换,下方也会有对应的小图可反复点击查看大图和图片描述性的内容;功能实现:原创 2017-02-17 11:10:05 · 1763 阅读 · 0 评论 -
初识【前端之WEB】
关于W3C(World Wide Web Consortium):万维网联盟W3CSchool 是因特网上最大的 WEB 开发者资源,其中包括了全面的教程和完善的参考手册以及庞大的代码库。当然它对于我们这种初级学习编程的人来说,是一个非常不错的网站!先来了解什么是WEB?WEB其实就是无数网页文档的集合,也就是一个个网页所组成的,它能够将各类信息和服务进行无缝连接,并提供生动的图形用...原创 2016-11-10 21:02:08 · 248 阅读 · 0 评论 -
多余内容省略号显示
【1】利用 text-overflow:ellipsis 实现单行文本溢出显示省略号效果ps:所有主流浏览器都支持 text-overflow 属性。但这个属性仅适用于单行文本,多行的情景远比单行复杂。.demo{ overflow: hidden; text-overflow: ellipsis;//clip|ellipsis white-space: nowrap;...原创 2016-12-28 16:18:42 · 1317 阅读 · 1 评论 -
qrcode.js 生成二维码
什么是qrcode.js?qrcode.js是一个用于生成二维码的js库,主要是通过DOM元素,再通过H5中的canvas绘制而成,它不依赖任何库。下载地址:http://code.ciaoca.com/javascript/qrcode/^-^先看实例^-^<!DOCTYPE html><html lang="en"><head>...原创 2018-07-25 15:16:55 · 5053 阅读 · 0 评论