前端标签属性基础
文章平均质量分 55
前端开发基础标签学习集
昔冰_G
积善者必有余庆!
展开
-
怎么把网页变成灰色?怎么让头像或某一部分不变灰色?filter/backdrop-filter/mix-blend-mode/svg/grayscale(1)
在国家公祭日,我们哀悼沉思,势要勿忘国耻振兴中华;这些时段很多网站都会积极呼应,给与自己的网页设置成灰色;那给网页设置成灰色是经过怎样的设置来实现的呢?filter?backdrop-filter?mix-blend-mode? svg?grayscale(1)?原创 2023-02-04 14:36:36 · 1845 阅读 · 1 评论 -
图片和文字同行垂直居中、对齐问题
图片和文本垂直居中显示;消除图片下面的空隙;消除空白节点;原创 2022-09-20 20:38:26 · 3747 阅读 · 1 评论 -
flex/fixed上中下(移动端)
使用flex或fixed实现移动端顶部、内容、底部布局;别忘了html和body的高度!原创 2022-06-10 23:50:55 · 505 阅读 · 0 评论 -
web基础·transform:rotate()搭配perspective实现3D旋转
perspective:透视;像素(单位)3d变换需要透视,透视要加在观察元素的父盒子上【透视的值越小会越明显】rotate():旋转;rotateX()、rotateY()、rotateZ()、rotate3d()rotate3d(1,1,0,90deg) 以原点(0,0,0)到(1,1,0)两点的连线为轴线旋转90度<style> div{ perspective:200px; width:200px; ...原创 2021-07-04 18:51:21 · 771 阅读 · 0 评论 -
web基础·animation的steps(n)用法1
steps(n):把动画或者过渡效果分割成n段;例如打字机的效果;存在于:animation-timing-function和transition-timing-function中。每个字占20,一共10个字,总共200,那每次出一个字,也就是分10次:<style> div{ overflow:hidden; white-space:nowrap;/* 强制文字在一行显示 */ font-size:20px;原创 2021-07-03 14:30:13 · 215 阅读 · 0 评论 -
web基础·@keyframes+animation:热点波纹图
<style> body{ background-color:#333; } .map{ position:relative; width:800px; height:620px; background:url(img/map.png) no-repeat; margin:0 auto; } .city{ position:abso.原创 2021-07-03 13:51:06 · 189 阅读 · 0 评论 -
web基础·CSS3动画基本使用@keyframes,animation
@keyframes 无需鼠标触发,加载页面时即刻启动(自启动)和animation一起搭配使用@keyframes和animation的使用方法是:@keyframes后面加动画名,来设置不同阶段的不同状态animation-name后加动画名,来设置这个持续的时间、进行的速度、何时开始(页面加载后开始还是开始后延迟开始)、执行次数或是否重复执行、是否反方向播放、是否回到起始状态、是否运行或暂停等。例如:<style> ...原创 2021-07-01 20:05:09 · 1923 阅读 · 0 评论 -
web基础·书写倒三角(div+伪元素::after)
倒三角可以看成是div的两条边组成,但是没有直接对div进行操作,因为如果div出来的两条边不会是一个倒三角,倒三角需要做旋转,如果要旋转,那么就会影响到div,所以用伪元素,在div的内部进行变换。<style> div { width: 35px; height: 35px; line-height:35px; border-left: 1px solid #000000; b...原创 2021-07-01 14:12:24 · 2546 阅读 · 0 评论 -
web基础·偏移、旋转、过渡效果、缩放
位移transform:translate(x,y)以页面左上角为0,0;transform:translate(x,y)表示移到某个位置<style> div { position: relative; width: 202px; height: 220px; background-color: pink; transform:translate(100px,100px);原创 2021-06-29 23:56:49 · 1477 阅读 · 1 评论 -
web基础·多媒体视频标签:video及相关属性
基础·多媒体标签·video(H5的新标签)可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。<video src="movie.ogg" ><!--src是引入的视频地址--> 您的浏览器不支持 video 标签。</video>属性·autoplay设置自动播放autoplay=“autoplay”<video scr="movie.mp4" autoplay="autoplay">&原创 2021-06-26 17:36:42 · 1437 阅读 · 0 评论 -
web基础·选择器-(属性选择器、结构伪类选择器、伪元素选择器)
属性选择器原创 2021-06-28 22:37:21 · 276 阅读 · 0 评论 -
web基础·表单标签:input及相关属性
(所有的浏览器都支持input标签)根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。属性·typetype="email"邮箱地址类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2021-06-27 12:09:33 · 2159 阅读 · 0 评论