HTML5+CSS3
文章平均质量分 85
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
深入了解 CSS 变量,让 CSS 创造更多可能!
日常开发中所说的 CSS 变量,实际上是 CSS 的变量函数 var() 与 CSS 自定义属性的统称。使得开发和维护成本更低了,如让整个网站的换肤变得更容易;改变了在图形交互效果的实现中 JavaScript 的占据比重,使得开发门槛降低了,体验升级了。使自定义语法的扩展成为可能。原创 2023-07-11 22:18:30 · 475 阅读 · 0 评论 -
CSS新特性,提升开发效率与视觉表现,必读!
CSS2.1中的CSS属性的设计初衷是图文展示,所以并没有专门与布局相关的CSS属性。因此,在CSS2.1中出现了很多奇怪的现象,如float属性,设计之初是为了文字环绕效果,最后居然成了布局中常用的属性。CSS2.1从2002开开始制定,到2011年成为规范,花费了10年。CSS3.0及以后版本,为了加速CSS标准化,将 CSS 划分为更小的组件,称之为模块。模块之间互相独立,按照各自速度走镖标准化。下面列举一些在开发中可以经常用到,且节省大量代码及提升效率的CSS新特性:原创 2023-07-04 11:42:31 · 781 阅读 · 0 评论 -
发明专利公开 -- CSS动画精准实现时钟
上一篇【setTimeout不准时,CSS精准实现计时器功能】的博文,最后提到了通过 CSS 动画实现计时器的方式。本文详情描述如何通过 CSS 完整实现时钟效果,这也是团队 21 年专利的一项内容(专利公布号:CN114003087A)。该发明专利主要解决大屏下通过 javascript 实现的时钟不准确的问题。通过 CSS 动画进行计时,避免同步阻塞卡顿的问题。原创 2023-05-12 13:55:02 · 920 阅读 · 0 评论 -
map&area标签实现图片热点区域点击
在购物网站 Landing page 页,往往会存在商品宣传信息,为提升首页加载速度,往往会使用一张图片来包含所有要展示商品(① 减少http请求个数;② 减少页面DOM数)。如何在一张商品海报上,实现点击某商品,跳转到该商品详情页面?以上,也可以使用指定不规则的热点(可点击)区域。HTML与一起使用来定义一个图像映射 (一个可点击的链接区域)。原创 2023-02-28 10:37:54 · 743 阅读 · 0 评论 -
css-height
height属性值这个属性定义元素内容区的高度,在内容区外面可以增加内边距、边框和外边距。 The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to...原创 2018-02-28 19:31:59 · 987 阅读 · 0 评论 -
【实例】调整区域大小&动态隐藏区域
CSS布局相关及Flex详解,提及到使用Flex来完成一侧固定大小,另一随浏览器大小自动缩放。今天开发中,有这样一个需求,在两块内容中间增加一条线,然后拖拽线,可以自动调整两侧区域。实例:调整区域大小实例参照地址:https://jsfiddle.net/381510688/fb6Lz9rm/<!doctype html><html lang...原创 2018-01-19 20:23:23 · 948 阅读 · 0 评论 -
transform、transition方法详解及scale、zoom差异性说明
CSS3变形处理 transform 可以对文字或图像的旋转、缩放、倾斜、移动进行变形处理。基准点为元素的中心点,可以通过transform-origin 修改基准点,如 transform-origin: left bootom;旋转使用rotate方法来实现文字或图像的旋转处理,在参数中指定旋转角度。/*顺时针旋转30°*/transform: rotate(30deg);缩放使用sca原创 2017-12-07 20:46:43 · 6756 阅读 · 0 评论 -
CSS布局相关及Flex详解
float及postion缺点对于两个div元素,其是相对独立的,如果在其中一个div元素中加入内容,将会使得两个元素的底部不能对齐,导致页面多出空白区域。多栏布局css3中加入了多栏布局,可以将一个元素中的内容分为两栏或者多栏显示,并且确保各栏中内容的底部对齐。<style>#div1 { width: 500px; column-count: 2; -moz-column-count原创 2017-11-23 20:55:05 · 2648 阅读 · 15 评论 -
HTML防止input回车提交表单
最近在做一个小需求时,发现了一个问题:当form表单中,存在一个button,在input中按回车会自动触发form提交,很是郁闷,经过查询资料,特总结如下:自动提交情况说明:1.默认情况下,单个输入框,无论按钮的type="submit"还是type="button"类型,回车即提交。2.当type="submit"时,无论有几个type="text"输入框,回车均表示提交。原创 2015-03-28 11:01:54 · 45323 阅读 · 2 评论 -
input disabled不能提交表单
今天,在开发过程中发现一个问题,在提交form表单时,有一个input一直不能被提交,后台一直报错!究其原因,是因为该input上设置了disabled属性。然而,有时我们又不得不设置某些元素为不可操作的,建议使用readonly替之。一、readonly & disabled区别readonly和disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。原创 2015-04-07 16:17:06 · 24562 阅读 · 0 评论 -
HTML基础标签
学习HTML标签,要从标签的用途、标签在浏览器中的默认样式入手,已经深刻了解其语义。语义化:在什么情况下可以使用这个标签才合理1. 更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。一、p标签段落文本标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。二、hx标签标题文本标题标签一共有6个,h1、h2、h3、h4、h5、原创 2015-03-03 16:58:20 · 1447 阅读 · 1 评论 -
CSS基础知识
CSS全称为"层叠样式表(Cascading Style Sheets)"内联式 > 嵌入式 > 外部式 【就近原则(离被设置元素越近优先级别越高)】但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。一. CSS样式基本知识子选择器(作用于元素的第一代后代): .food>li{border:1px solid red;}包含选择器(作用于元素的原创 2015-03-03 17:16:27 · 1002 阅读 · 0 评论