摘要:
上图是原生实现,下图是 css 边框,手机上对比更加明显 然后,如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了。到底有哪些方案,到底好不好用呢?试过才知道,把我试过的结论记录一下。 有说用 0.5px 解决的 在2014年的 WWDC,“设计响应的Web体验” 一讲中,Ted O’Con 阅读全文
摘要:
CSS 自定义属性 CSS 自定义属性现在也不算什么稀罕物了。自从浏览器开始支持以来,就能通过 JavaScript 操作自定义属性值。 具体来说,用 JavaScript 操作自定义属性有以下几种方式。第一个是 setProperty : document.documentElement.styl 阅读全文
摘要:
在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法。 html 行间距的设置方法与问题 设定一段文字内的行距: <p> 但我们怎么设定两段文字之间的行 阅读全文
摘要:
object-fit: 指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框 平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放,在这里我们就探讨object-fit对图片处理的应用 语法及作用 fill (充满) 整个对象将完全填充内容框。当对象的宽高与内容框不匹配 阅读全文
摘要:
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像我们想象的那么难! 阅读全文
摘要:
介绍 事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流,分别是事件冒泡流和事件捕获流。 事件冒泡 IE的事件流称为事件冒泡,从最具体的元素开始,然后逐渐向上传播到文档节点。如下图: 我们以下面代码展示事件冒泡: <!DOCTYPE html> <html> 阅读全文
摘要:
<video> 标签定义视频,比如电影片段或其他视频流,可以放置视频资源,并添加视频控件。 支持的浏览器: Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。 注:Internet Explorer 8 以及更早 阅读全文
摘要:
在css中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。 语法: filter: blur() 属性值: ● blur():给图像设置高斯模糊,值越大越模糊。如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比 阅读全文
摘要:
<object>标签是一个html标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目。它还可以用于在html页面内显示另一个网页。 <object>标签可以和<param>标签一起使用以定义各种参数。当浏 阅读全文
摘要:
css中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。 插入纯文字 content : ”插入的文章”,或者 content:none 不插入内容 #html 阅读全文
摘要:
前言 由于html语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不太完整,所以小茄今天就来总结下纯css实现居中的各种方案。学疏才浅,文中如有不当之处,万望指出! 6种方案 1 阅读全文
摘要:
1. Django Django应该是Python最知名、最有代表性的Web框架了。它的名字来自于Django Reinhardt,一位法国作曲家和吉他演奏家。在2000年初有一个报社的两位程序员为了给报社的报纸开发线上应用,开始用 Python编写网站,最后把他们的工作总结出一套开源框架,就是今天 阅读全文
摘要:
由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题。 即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。 在本文中,您将学习有关 阅读全文
摘要:
Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时,我们通常会查看性能,seo友好性和可访问性等指标,而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端,后端开发人员也必须采取重要措施来保护服务器,但最终,保护数据的责任在后端和前端之间共享。虽然敏感数据可能被安全地锁 阅读全文
摘要:
高度自适应第一种情况 1.高度不去设置,或者高度设置auto 内容撑开父元素的高度。2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷 解决高度塌陷的方法 (1)给出现高度塌陷的元素添加:overflow 阅读全文