html
斷了De弦
这个作者很懒,什么都没留下…
展开
-
js前端文件下载
一、HTML与文件下载如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如:<a href="large.jpg" download>下载</a>具体介绍可参考我之前的文章:“了解HTML/HTML5中的download属性”。但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),...转载 2018-08-09 10:37:52 · 17563 阅读 · 1 评论 -
css实现圆、三角形
<div class="circular"> circular</div>* { padding: 0; margin: 0;}.circular{ width: 200px; height: 200px; border: solid 1px black; border-radius: 100%;}&l...原创 2018-09-16 17:23:47 · 470 阅读 · 0 评论 -
html js css实现九九乘法表
效果图:HTML:<body><div id="main"></div></body>CSS:.row{ text-align: center; width: 800px; margin: 0 auto;}.col{ border: 1px solid #000000; di...原创 2018-09-12 15:37:09 · 3277 阅读 · 0 评论 -
如何实现响应式布局
首先,在网页代码的头部,加入一行viewport元标签。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认...转载 2018-09-11 21:49:22 · 660 阅读 · 0 评论 -
Flex布局
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html...转载 2018-08-16 16:17:46 · 138 阅读 · 0 评论 -
返回顶部js插件的编写
【1】锚点 使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor"转载 2018-08-15 18:02:54 · 223 阅读 · 0 评论 -
css实现未知大小的块状元素垂直水平居中
思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)优点:高大上,可以在webkit内核的浏览器中使用缺点:不支持IE9以下不支持transform属性<!DOCTYPE html><html lang="en"><head> <meta charset=...转载 2018-08-08 19:57:01 · 358 阅读 · 0 评论 -
CSS世界的结界——BFC
BFC的定义BFC 全称为 block formatting context,中文为“块级格式化上下文”。关于 BFC 各种特性什么的,说起来很啰嗦,而我喜欢用“ CSS 世界的结界”这种称谓概括BFC 的特性。“结界”这个词大家应该都理解的,指通过一些特定的手段形成的封闭空间,里面的人出不去,外面的人进不来,具有极强的防御力。 BFC 的特性表现如出一辙。大家请记住下面这个表现原则:如果...转载 2018-08-08 16:05:22 · 1497 阅读 · 0 评论 -
html圆角按钮的实现
1、使用css3的boborder-radius 属性border:2px solid;border-radius:25px;2、使用图片作为<a></a>标签背景图a{ display:inline-block; line-height:40px; text-decoration:none; background:...原创 2018-08-07 11:55:43 · 16042 阅读 · 0 评论 -
单页应用SPA
spa指的是single page application,就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。优点: 1.分离前...转载 2018-08-07 11:26:03 · 480 阅读 · 0 评论 -
js事件委托(事件代理)的原理
事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,是对“事件处理程序过多”问题的解决方案。在一个复杂的web应用程序中,如果对每个可单击的元素都添加事件处理程序,那么结果会有数不清的代码用于添加事件处理程序。此时,可以使用事件委托技术解决这个问题。使用事件委托,只需在DOM树中尽量最高的层次上添加一个事件处理程序。Event对象提供了一个属性叫target,可以...原创 2018-08-07 10:56:11 · 1368 阅读 · 0 评论 -
css清除浮动的方法
清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错)1、添加额外的标签通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可优点:通俗易懂,容易掌握缺点:添加无意义的空标签,有违结构与表现的分离,不利于后期维护2、父元素设置 ov...转载 2018-08-06 22:13:28 · 157 阅读 · 0 评论 -
两列布局,三列布局的实现
一、两列布局1、利用BFC<div class="left"> left</div><div class="right"> right</div>* { padding: 0; margin: 0;}.left{ float: left; width: 200px; height: 80...原创 2018-09-14 18:43:52 · 870 阅读 · 0 评论