html+css
文章平均质量分 85
小明的Fire计划
前后端、算法工程师。持续分享有价值的干货,感谢关注!一个人可以走的很快,一群人才能走的更远!
展开
-
CSS3弹性盒布局详解
弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。原创 2024-01-17 21:47:54 · 1059 阅读 · 0 评论 -
CSS3十大滤镜效果详解
类似于美颜相机、美图秀秀这样的美颜工具,能够让我们轻松地应用多种特效,例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。但在CSS3的语法中,所有的这些视觉特效都是通过“”属性来快速实现的。原创 2024-01-16 21:03:31 · 2215 阅读 · 1 评论 -
CSS3中多列布局详解
在CSS3之前,想要设计类似报纸那样的多列布局,有两种方式可以实现:一种是"浮动布局",另一种是“定位布局”。为了解决这多列布局的难题,CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式,可以简单的实现类似报纸格式的布局。原创 2024-01-14 18:44:54 · 2124 阅读 · 0 评论 -
CSS3动画效果详解
在CSS3中,animation属性用于实现元素的动画。animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别。CSS3中的animation属性就是为了解决这些问题而提出的。animation属性可以通过控制关键帧来控制动画的每一步,从而实现更为复杂的动画效果。使用animation属性实现CSS3动画需要两步。原创 2024-01-13 21:06:45 · 1182 阅读 · 0 评论 -
CSS3简单运用过渡元素(transition)
概念:在CSS3中,我们可以使用transition属性将元素的某一个属性从“”在指定的时间内平滑地过渡到“”,从而实现动画效果。CSS3变形(transform)呈现的仅仅是一个结果,而CSS过渡(transition)呈现的是一个过程。这个所谓的过程,通俗来说就是一种动画变化过程,如渐渐显示,渐渐隐藏,动画快慢等实例:指定单个属性原创 2024-01-12 20:50:59 · 1236 阅读 · 0 评论 -
CSS3中transform2D变形详解
在实际开发中,有时需要实现元素的各种变形效果,如平移,缩放,旋转,倾斜等。在CSS3中,可以使用transform属性来实现元素的变形效果属性值使用transform属性实现元素的2D变形,2D变形主要有平移、缩放、旋转和倾斜4种变形效果。transform属性一般配合以下方法来实现各种变形效果注意:transform无法作用于行内元素。原创 2024-01-11 21:23:02 · 1183 阅读 · 0 评论 -
CSS3背景样式详解(图像大小,图像位置等)
在CSS3中,新增了3个背景属性。原创 2024-01-10 20:26:17 · 3578 阅读 · 0 评论 -
CSS3新增边框样式
概念:在CSS3中,针对元素边框增加了丰富的修饰属性。常见的边框样式属性有以下。原创 2024-01-09 22:38:21 · 1340 阅读 · 0 评论 -
CSS3渐变属性之重复渐变
在网页设计中,经常会需要在一个背景上重复应用渐变方式的情况,这时就需要使用重复渐变。原创 2024-01-08 17:51:25 · 881 阅读 · 0 评论 -
CSS3渐变属性详解
圆心位置用于定义径向渐变的“中心位置",可以使用“at"加上关键词或参数值来定义径向渐变的圆心位置。径向渐变是圆形渐变或椭圆渐变,颜色不再是沿着一条直线渐变,而是起始颜色会从一个中心点开始向所有方向渐变。此外,径向渐变可以接收一个值列表,可以同时定义多种颜色的径向渐变,各颜色值之间用英文逗号(参数开始颜色用于定义径向渐变的开始颜色,而参数结束颜色用于定义径向渐变的结束颜色。概念:径向渐变,指的是颜色从内到外进行的圆形渐变(从中间往外拉,像圆一样)。概念:线性渐变,指的是在一条直线上进行的渐变。原创 2024-01-07 21:51:52 · 1517 阅读 · 0 评论 -
css颜色样式详解
概念:RGB是一种色彩标准,由红(red)、绿(green)、蓝(blue)3种颜色变化来得到各种颜色。概念:用#RRGGBB规定十六进制颜色,如需增加透明度,可以在#RRGGBB后面添加两个额外的数字。概念:HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-指定了颜色的不透明度。RR(红色),GG(绿色),BB(蓝色)为十六进制整数指定颜色的成分(分量)。/* 第一个li,透明度为1.0 *//* 第二个li,透明度为0.5 *//* 第三个li,透明度为0.1 *//* 第一个li红色 */原创 2024-01-07 16:20:06 · 1220 阅读 · 0 评论 -
CSS新增文本样式(完整)
text-shadow属性可以定义多个阴影,这时,text-shadow属性是一个以英文逗号(,)隔开的值列表。最重要的一点是,该属性首先尝试挪到下一行,看看下一行的宽度够不够,不够的话再进行单词内的断句。数学坐标系一般用于数学形式上的应用,而在前端开发中几乎所有涉及坐标系的技术使用的都是W3C坐标系,这些技术包括CSS3,Canvas和SVG等。属性应用到一个段落上面,可以实现溢出处理从左到右的文本和从右到左的文本上的效果。-webkit-text-stroke是一个复合属性,是由两个子属性组成的。原创 2024-01-06 15:31:08 · 511 阅读 · 0 评论 -
HTML5-简单文件操作
概念:可以通过file类型的input控件或者拖放的方式选择文件进行操作语法格式:属性multiple:表示是否选择多个文件accept:用于设置文件的过滤类型(MIME类型)如果想要同时设置多个过滤类型,可以用英文逗号(,)隔开常见的acept属性取值/MIME类型属性值说明image/jepgJEPG图片image/pngPNG图片image/gifGIF图片text/plainTXT文件text/htmlHTML文件text/cssCSS文件JS文件。原创 2024-01-03 18:54:17 · 1420 阅读 · 0 评论 -
HTML5-简单拖放操作
要解决Firefox下的拖放问题,必须设置 setData()方法,才可以拖放除图片之外的其他标签。概念:在HTML5中,拖放是一种常见的特性,可以抓取元素并拖入不同的位置。// 要想触发drag事件,就必须在dragover事件中阻止默认行为。在HTML5的拖放操作中,首先要明确拖拽元素和目标元素。拖放事件主要分成两个部分:拖拽元素事件和目标元素事件。// 设置图片源为拖拽的数据(即图片的URL)// 将图片添加到目标元素中。// 设置数据类型和数据。// 在目标元素中释放。// 拖拽到目标元素。原创 2024-01-03 10:00:00 · 977 阅读 · 0 评论 -
HTML5-多媒体标签
embed元素可以插入多种格式的多媒体文件,常见的格式有JPG、WMV、WAV、AIFF、MP3等。概念:由于不同的浏览器对HTML5的视频格式各不相同,为满足需求,可能需要为视频文件提供多种不同的解码器,所以HTML5提供了一个新的元素source元素。如果浏览器不支持video元素,就会显示标签中的内容“你的浏览器不支持video标签,请升级到最新版本”。这个提示文字可加可不加.HTML5的音频/视频方法用于实现音频/视频的某些功能,如音频/视频的加载,播放,暂停播放等。原创 2024-01-01 21:11:48 · 1213 阅读 · 0 评论 -
三分钟就学会用正则表达式
xyz]:字符集合,匹配所包含的任意一个字符,例如[abc]可能匹配"plain"中的a,也可以匹配"boy"中的b,可以匹配"cat"中的c。电子邮件:^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$ 或者\w+@\w+.\w+身份证号: ^\d{17}(\d|X|x)$ 或 [1-9]\d{17}|[1-9]\d{16}[Xx]:\/\/\w+.\w+[a-z]:字符范围 匹配指定范围内的任意字符,例如[a-z]:匹配a-z中的任意一个字符。原创 2024-01-01 00:18:38 · 940 阅读 · 0 评论 -
HTML5-新增表单input属性
在新增表单元素那节当中介绍过,email,url,tel这3个类型的input 元素,本质上都内置了pattern属性,因此它们会自动进行相关匹配验证。表示开启,浏览器会尝试自动完成输入框中的输入,以提供对以前输入过的值的可能匹配。概念:required属性来定义文本框输入内容不能为空,如果文本框为空,则不允许提交。概念:novalidate属性就是来禁用form元素的所有文本框内置的验证功能。是否启用表单的自动完成功能,取值:on(默认)、off。是否启用该表单元素的自动完成功能,跟上面表单属性一样。原创 2023-12-31 21:04:29 · 859 阅读 · 0 评论 -
CSS笔记之CSS其他属性(七)
轮廓outline,用于在元素周围绘制一个轮廓,位于border的外围,可以突出显示元素。原创 2023-09-27 20:38:56 · 69 阅读 · 1 评论 -
CSS笔记之精灵图(六)
介绍:项目中将多张小图片,合并成一张大图片,这张大图片称为精灵图。优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度。原创 2023-09-25 20:43:50 · 80 阅读 · 1 评论 -
CSS笔记之定位方式(五)
通过position属性实现对元素的定位,有四种定位方式常用取值:取值含义说明static默认值按照常规文档流进行显示relative相对定位相对于标签原来的位置进行的定位absolute绝对定位相对于第一个非static定位的父标签的定位fixed固定定位相对于浏览器窗口进行定位。原创 2023-09-23 20:07:01 · 71 阅读 · 1 评论 -
CSS笔记之常用CSS属性(三)
如果找不到用户指定的字体,浏览器将使用默认的字体来显示文本。简写属性:font:font-style | font-weight | font-size | font-family。含义:将网页中许多非常小的图标/图片整合到一张大图中,当访问该页面时只需要下载一次,可以减少访问服务器的次数,提高性能。取值:underline(下划线)、overline(上划线)、line-through(穿越线)取值:repeat(默认)、repeat-x、repeat-y、no-repeat。原创 2023-09-21 20:30:20 · 107 阅读 · 0 评论 -
CSS笔记(二)
原因:按照书写顺序依次加载,在同优先级的前提下,后加载的会覆盖先加载的同名样式,所以离的越近越优。使用自定义名称,以 # 号作为前缀,然后通过HTML标签的id属性进行名称匹配。原因:首先加载标签选择器,再加载类选择器,然后加载ID选择器,最后加载行内样式。行内样式>ID选择器>类选择器>标签选择器。标签选择器和类选择器、标签选择器和ID选择器,一起使用。只有满足层次关系最里层的选择器所对应的标签才会应用样式。以标签的id属性作为样式应用依据,一对一的关系。后加载的会覆盖先加载的同名样式。原创 2023-09-19 20:22:58 · 69 阅读 · 1 评论 -
CSS笔记(一)
层叠样式表是一组样式设置规则,用于控制页面的外观样式。原创 2023-09-18 20:48:49 · 84 阅读 · 1 评论 -
html基础学习(四)
使用 可以将其他网页的内容以嵌入的方式显示在当前网页中。原创 2023-09-15 20:03:11 · 41 阅读 · 0 评论 -
html基础学习(三)
表单是一个包含若干表单元素的区域,用于获取不同类型的用户信息 表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉列表、按钮等。原创 2023-09-14 20:33:23 · 47 阅读 · 1 评论 -
html基础学习(二)
标签开始。每个自定义列表标题以 开始。每个自定义列表项的描述以 开始。dl:全称是definition listdt: 全称是definition titledd: 全称是definition description用法:标题描述标题描述......水果梨子西瓜原创 2023-09-13 20:30:50 · 68 阅读 · 0 评论 -
html基础学习(一)
,通过都是成对出现的,如原创 2023-09-12 20:53:02 · 322 阅读 · 0 评论