2020年09月_一只琳娜

原创从前端小白到大佬过渡效果

css3 过渡简单地说就是从一个状态慢慢的变成另外一个状态，让我们的页面更加具有动感，经常与：hover一起使用。transition：要过度的属性花费时间运动曲线开始时间属性可以是宽度、高度、背景颜色、内外边距都可以，所有就是all花费时间单位是s，如0.5s运动曲线默认是ease（减速）/linear(匀速)/ease-in（加速）/ease-in-out(先加速后减速) 可省略开始时间单位是s，可以设置延迟触发时间，默认0s 可省略实例：&lt

2020-09-26 22:35:21 142

原创从前端小白到大佬滤镜filter

css3 滤镜filtgerfilter：函数（）；如：filter：blur（5px）；模糊处理，数值越大约模糊。实例：<!doctype html><html><head> <meta charset='UTF-8' /> <title>damoe</title> <style> img { filter: blur(5px);

2020-09-26 21:42:59 100

原创从前端小白到大佬伪元素选择器

css3 伪元素选择器伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构，避免元素嵌套。::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意：-before和after创建的元素属于伪元素。-由于是在文档书中是找不到的，是虚拟的，所以称为伪元素。-before和arter必须有content属性。-伪元素与标签选择器一样，权重为1。-before和after都是行内块元素，不能直接设置大小。语

2020-09-25 21:27:45 179

原创从前端小白到大佬伪类选择器

css3 伪类选择器写法格式选择器：xxx {}常用E:first-child第一个孩子E:last-child最后一个孩子E:nth-child(n)第n个孩子（n可以是数字，可以是关键字如even偶数、odd奇数等，也可以是表达式，如2n，2n+1,-n+5（前五个）等）E:last-of-type最后一个孩子E:first-of-type第一个孩子E:nth-of-type（n）第n个孩子,与E:nth-child(n)相同注意：

2020-09-24 20:41:17 396

原创从前端小白到大佬新增属性选择器

css3新增属性选择器<!doctype html><html><head> <meta charset='UTF-8' /> <title>damoe</title> <style> input[value] { color: aquamarine; } input[value=你] {

2020-09-24 13:46:30 117

原创从前端小白到大佬新增属性

html5 新增属性1.html5新增type属性html5版本一下的input常用都是text属性，无法辨析用户输入的那内容是否符合需求，用户体验感不佳。html5新增了很多属性帮助用户提醒用户输入是否合乎规则，也更直观的了解到input的类型，也为用户提供更加简洁的输入方式。实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam

2020-09-22 22:05:10 95

原创从前端小白到大佬视频和音频标签

html5 视频和音频标签1.视频标签<video src=”...“ ...>.</video>标签属性注意-poster即视频封面，如果考虑到网速不好，视频加载缓慢的时候，则使用poster封面且不要设置autoplay自动播放，效果会好看些。-controls在不同版本的浏览器看到的效果是不一致的，一般不会使用video的属性实现，而是用js写。实例：<!DOCTYPE html><html lang="en"><head

2020-09-22 13:02:38 210

原创从前端小白到大佬盒子边框效果

CSS 盒子边框经过效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格效果</title> <style> ul li {

2020-09-20 19:34:45 246

原创从前端小白到大佬文字溢出

css溢出的文字省略号显示1.单行文字溢出2.多行文字溢出1.单行文字溢出1.先强制一行内显示文本white-space:nowrap（不换行）/normal（自动换行,默认）;2.超出部分隐匿overflow:hidden;3.文字用省略号替代超出部分text-overflow:ellipsis;实例：<!doctype html><html><head> <meta charset='UTF-8' /> &lt

2020-09-19 20:39:27 142

原创从前端小白到大佬图片与文字对齐

css vertical-align选择器{vertical-align：xxx；}vertical之对于行内块有效vertical-align: baseline(基线)/top（顶线）/middle（中线）/bottom（底线）1.解决图片、文本域与文字居中对齐<!doctype html><html><head> <meta charset='UTF-8' /> <title>damoe</title

2020-09-19 17:12:00 2647

原创从前端小白到大佬用户界面样式

css 用户界面样式1.鼠标样式变形即鼠标放到盒子上面时鼠标样式随着改变形态。选择器 {cursor：xxxx;}cursor: default ; 默认小白cursor: pointer; 小手cursor: move;十字架cursor: text; 文本cursor: not-allowed; 禁止看例子<!doctype html><html><head> <meta charset='UTF-8' />

2020-09-19 12:28:39 160

原创从前端小白到大佬三角做法

css 三角此三角其实是对话框上的小三角形，别急，先看一个效果。是不是想要这个效果？然后再看一段代码。<!doctype html><html><head> <meta charset='UTF-8' /> <title>damoe</title> <style type="text/css"> .box { width: 0;

2020-09-19 10:27:48 140

原创从前端小白到大佬字体图标

CSS 字体图标主要用于显示网页中通用、常用的一些小图标，也叫iconfont，看起来像图片但本质上属于字体。可以很方便的更改大小，改变颜色，不失真；只需要向服务器请求一次，直接加载，速度更快；兼容性较高，基本支持所有浏览器。字体图标的下载推荐下载网址：icomoon字库 http://icomoon.io 外网阿里 iconfont 字库 http://www.iconfont.cn/ 免费举例子icomoon字库下载和使用开始挑选下方会显示已经选择的icon个数，选好后点

2020-09-15 14:56:11 145

原创从前端小白到大佬精灵图

css精灵技术（精灵雪碧、sprites ）直白的解释就是把网站需要用到的很多张小的图标、图片做成一个合集，显示在一张大的图片上，在由服务器一次性传递给打开的网页。这样做的目的是为了有效的减少服务器接受和发送请求的次数，提高网页的加载速度，减轻服务器的压力。这种技术最常用在图片上，也叫精灵图、雪碧图，使用到的图片一般是网页中比较固定的，不常更换的图标。...

2020-09-15 12:06:56 154

原创从前端小白到大佬元素的显示与隐藏

css元素的显示与隐藏类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面后，会重新出现！本质：让一个元素在页面中隐藏或显现。1.display 显示隐藏-display:none 隐藏，脱标-display：block 显示或转换块级元素2.visibility 显示隐藏-visibility：visible 可视-visibility：hidden 隐藏，不脱标3. overflow 溢出显示隐藏只对溢出的部分内容隐藏或者显示-overflow：visible；可视-ov

2020-09-13 17:56:16 214

原创从前端小白到大佬定位的盒子如何水平居中、垂直剧中

CSS加了定位的盒子如何水平居中、垂直剧中1.绝对定位的盒子居中要知道加了定位的盒子使用margin：auto来布置盒子居中时无法实现的，需要用到一个小小的算法。直接用一个例子来说明：实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

2020-09-13 13:18:34 677

原创从前端小白到大佬盒子定位

css定位1.定位2.综合按3.网页布局总结4.元素的显示与隐藏1.定位①实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。②滚动窗口时，某些元素盒子固定不动。定位=定位模式+边偏移定位模式：决定定位的方式，通过css的position属性设置，取值有四个：-static 静态定位-relative 相对定位-absolute 绝对定位-fixed 固定定位边偏移：该元素的最终位置，有四个属性。-top: 80px 顶端偏移量，距离上边线80px.-bottom

2020-09-10 22:33:50 215

my_prince的博客