![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 59
玩会手机就睡觉
这个作者很懒,什么都没留下…
展开
-
CSS--input默认样式(包括自动填充,颜色,边框等属性)的清除
前言众所周知,我们在写网页的时候第一步总是要清空元素的默认样式(这些都是浏览器自己渲染的),一般就是直接引用一个重置样式表不过元素属性这么多你也不可能全部都清除掉,接下来讲的就是input默认样式的清除例子清除边框,阴影正确情况下input标签没有获取焦点时是这个样子:获取焦点后是这样子:对应清除代码如下:input{ border: none; box-shadow:none; outline: none;}这样点击的时候就没有边框等的出现!!清除自动填充我用的浏览器原创 2021-06-16 22:27:54 · 2993 阅读 · 0 评论 -
CSS--动画特效
前言这个是转载自他人博客,我只是纯粹的从它的代码学习一些东西,然后给大家讲解下!原文代码<video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" autoplay muted></video> <h2><span>We</span> must uni<span>te a</span>gains原创 2021-06-01 10:33:20 · 143 阅读 · 0 评论 -
CSS新属性--mix-blend-mode
基础知识mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。可选值有:normal 正常multiply 正片叠底screen 滤色overlay 叠加darken 变暗lighten 变亮color-dodge 颜色减淡color-burn 颜色加深hard-light 强光soft-light 柔光differenceexclusionhue 色相saturation 饱和度color原创 2021-05-30 16:27:04 · 274 阅读 · 0 评论 -
CSS---后面学习到的属性(pointer-events)
前言这个属性我上网了解了一下,是一个十分有用的属性,大家可以更加深入的去了解一下!!基础了解该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。可选值有:这里只挑第一个和第二个讲,因为后面都是只适用于SVG(我不会。。)auto与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同none元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时原创 2021-05-30 16:08:50 · 118 阅读 · 0 评论 -
CSS--一些我后面学习到的属性(object-fit)
前言这里我将会向大家介绍一些我在学习中学会的一些新属性(虽然不是特别热门但在某些情况下很好用),当然我也会不断更新!!正题object-fitobject-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这里可能就有人会问了什么是可替换元素呢?我简单科普下:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。简单来说,它们的内容不受当前文档的样式的影原创 2021-05-30 15:43:57 · 108 阅读 · 0 评论 -
CSS--创意产品卡
前言这个参考自大佬的文章原文然后做了点改进,多了些js代码<div class="card"> <div class="imgb"> <img src="./90.png" alt=""> </div> <div class="con"> <h2>JORDEN</h2> <div class原创 2021-05-28 11:02:23 · 110 阅读 · 0 评论 -
CSS--视频淡出
前言参考自大佬的文章:大佬的文章这里主要是为了实现一种鼠标往下滑,视频的透明度逐渐趋于-1的过程(就是相当于变黑的意思)代码<section> <video src="../112/077680587_main_xl.mp4" muted autoplay loop></video> </section> <section> <div class="content"> <h2>玩会原创 2021-05-27 15:51:22 · 74 阅读 · 0 评论 -
CSS--box-shadow
前言本文主要是简单学习下box-shadow这一属性的使用方式,如有错误请大家多多指正!!正题简介box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。参数理解X轴偏移量(h-shadow)这个值必需的,表示水平阴影的位置,允许负值正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果有blur值会有模糊效果Y轴偏移量(v-shado原创 2021-05-27 15:23:55 · 5053 阅读 · 0 评论 -
CSS特效--视频字幕浮现
基本原理这里首先我们要学会怎么使用transition+transform-origin+transform举个例子:<div class="b"> <div class="box"></div> </div> .b{ width: 300px; height: 300px; background-color: springgreen;原创 2021-05-26 12:09:30 · 371 阅读 · 0 评论 -
元素隐藏方法的异同
前言这个是我偶然间发现scale(0)也是可以隐藏元素的时候尤为好奇的问题,接下来我将通过代码的例子来阐述它们的异同!共同点这个无可置疑的它们都能起到隐藏元素的作用(这个比较简单就不做说明,有兴趣的小伙伴可以自己试一试)不同点先上代码<div class="box"></div><div class="red"></div>.box{ width: 200px; height: 200px;原创 2021-05-25 20:43:57 · 79 阅读 · 0 评论 -
CSS特效--波浪文本
前言本文参考一位大佬的博客,大家可以通过下方网址去查看原文原文代码(有所不同)* { margin: 0; padding: 0; } .nei { box-sizing: border-box; width: 300px; height: 65px; margin: 100px auto; pad原创 2021-05-25 20:11:36 · 181 阅读 · 0 评论 -
CSS特效--折叠卡片
前言这里用的主要是flex布局+过渡+基础知识点代码<div class="con"> <div class="a"> <div class="first"> <img src="../瀑布流/img/5.jpg" alt=""> </div> <div class="secon原创 2021-05-25 12:04:54 · 474 阅读 · 0 评论 -
CSS特效---翻转卡片
前言这个CSS特效用的是过渡与翻转的知识点,不熟悉的靓仔可以先去复习一下再来看这个特效就会比较清楚!代码<div class="big"> <div class="main"> <div class="first"> <img src="../瀑布流/img/4.jpg" alt=""> </div> <div cla原创 2021-05-25 10:06:22 · 378 阅读 · 0 评论 -
CSS特效--流动字体
前言这里我们要实现这一个特效需要使用新的属性——‘clip-path’,它是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,不过自己写需要时间,一些常用的我们可以用生成器这里我给个网站大家如果参考下:生成器代码版块<div class="top"> <div class="con"> <h2 class="ico1">我想睡觉 啊啊啊啊</h2> <h2 class="原创 2021-05-25 09:25:19 · 739 阅读 · 0 评论 -
CSS---元素水平居中
前言我们在写网页的时候很多情况下都需要对元素进行居中处理,一方面是为了追求美观,另一方面也是为了产品需要,接下来我将为大家介绍几种常用的方法。(讲的几乎是水平居中,垂直居中同理可得)代码及实现第一种第一种的实现原理:设置margin值<div class="box"><div class="main"></div></div>*{ margin: 0; padding: 0; }原创 2021-05-24 20:28:31 · 85 阅读 · 0 评论 -
LOGO SEO 强化
前言在某些网页中,为了能让浏览器更好的搜索到该网页,就会使用logo SEO来提权!代码部分<div class="logo"> <h1> <a href="index.html" title="小米商城"> 小米商城 </a> </h1> <!-- 这里设置li就是为了提权,然后h1里面再放一个链接图片由背景原创 2021-05-24 19:56:49 · 67 阅读 · 0 评论 -
CSS--小三角的制作
介绍接下来我将为大家介绍CSS里各种小三角的制作,希望大家多多点赞支持一下比如说这种:还有这种:以及这种:代码及实现第一种第一种是比较简单的一种,有着比较固定的写法<div class="app"> 下载app </div>*{ margin: 0; padding: 0; } .app{ position: relative;原创 2021-05-24 19:36:35 · 278 阅读 · 0 评论 -
CSS--文本溢出显示省略号
前言首先这里分为单行文本溢出和多行文本溢出,关键是看你在什么情况下使用!!代码与实现单行文本实现我们创建一个ul,里面放几个li,设置好宽度然后在放入文字<ul> <li> <span>我好想睡觉啊啊啊啊啊啊啊啊啊啊啊啊</span> </li> </ul>样式ul{ width: 150px;原创 2021-05-24 09:44:43 · 249 阅读 · 0 评论 -
CSS--书写顺序
正题布局定位属性 display/position/float/clear/visibility/overflow自身属性 width/height/margin/padding/border/background文本属性 color/font/text-decoration/text-align/vertical-align/white-space/break-word其他属性 content/cursor/border-radius/box-shaddow/te原创 2021-05-23 20:22:57 · 50 阅读 · 0 评论 -
CSS--3d导航条
前言这个是过渡transition应用的一个例子,前面讲的是动画的例子!代码与讲解html部分,这里都是按照正常的ul来创建导航条<ul> <li> <div class="box"> <div class="front">1</div> <div class="bottom">2</div>原创 2021-05-23 20:19:46 · 156 阅读 · 0 评论 -
CSS--旋转木马
前言直接快进到用animation这个新属性来做一些动画,例如下面的3d旋转木马代码以及思路首先先做结构,放六个盒子先<section> <div></div> <div></div> <div></div> <div></div> <div></div> <di原创 2021-05-23 11:19:34 · 112 阅读 · 0 评论 -
HTML---细节
link标签很多时候我们熟知的link标签都是用来引入css文件,一般都是长这样子<link rel="stylesheet" href="">这里再谈谈它的一些其他属性:charset char_encoding HTML5 不支持该属性。 定义被链接文档的字符编码方式href URL 定义被链接文档的位置。media media_query 规定被链接文档将显示在什么设备上。rel 必需。定义当前文档与被链接文档之间的关系。sizesNew 定义了链接属性大原创 2021-05-22 21:02:53 · 66 阅读 · 0 评论 -
CSS---重置样式表
我们在写网页的时候,浏览器会设置一些默认样式,而这些样式很多时候会影响到我们的布局(就比如那些自带内外边距等等),所以我们一般都会先引入一个重置样式表来清除默认样式!!!话不多说直接上代码:html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins,原创 2021-05-22 22:49:56 · 277 阅读 · 0 评论 -
开发者工具的简单使用
进入开发者工具这里有两个方法(以chorme浏览器为例)直接F12鼠标右键里面点击检查即可简单使用更改调试窗口的显示位置就是你可以调整开发者工具的位置,个人感觉第三个选项比较舒服选中需要修改的元素以及手机端的调试这里左边可以用来选择元素,右边是手机端调试盒子模型这里当你点击你要的元素时就可以通过盒子模型来查看宽高,边距等等修改设置元素的样式第一步点击左边的代码如何在右边界面进行修改这里直接双击你要修改的代码就行,这里的修改都是不会对源代码产生影响,原创 2021-05-22 22:45:10 · 3719 阅读 · 0 评论 -
CSS浅析--单位
长度单位像素:屏幕(显示器)实际上由一个个点构成不同屏幕的像素大小不同,像素越小像素越清晰所以同样的200px在不同的设备下显示效果不同百分比也可以将属性设置为相对于其父元素属性的百分比设置百分比可以使子元素跟随父元素的改变而改变emem是相对于元素的字体大小来计算的1em=1font-size(默认是16px)em会根据大小的改变而改变remrem是相对于根元素(html)来计算对于自己没事写的demo而言,用px就行了,但到了后面需要考虑自适应等相关问题时rem+媒体查询(原创 2021-05-22 20:51:19 · 79 阅读 · 0 评论 -
CSS浅析--权重
前言我前面结束了那么多种选择器,如果发生了这么一种情况:多个选择器对同一个元素进行样式的修改,最终浏览器会听谁的呢?这个时候我们就需要引入权重这个概念!!正题当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值,发生样式的冲突时,应用哪个样式由选择器的权重(优先级)决定权重选择器的权重(由高到低):内联样式 1,0,0,0 --按1000算id选择器 0,1,0,0 --100类和伪类选择器 0,0,1,0 --10元素选择器 0,0,0,1 --1通配原创 2021-05-22 19:11:39 · 72 阅读 · 0 评论 -
CSS浅析---选择器
前言下面知识点可能会有点多,大家坚持住,如果实在记不住多用用就熟悉了!正题一.常用选择器元素选择器:作用:根据标签名来选中指定的元素语法:标签名()例子:p{} h1{}p{ color: red; } h1{ color: skyblue; }id选择器作用:根据元素的id属性选中一个元素语法:#id{}例子:#box{}#red{ color: red;原创 2021-05-22 18:52:24 · 164 阅读 · 0 评论 -
CSS浅析(一)——初了解
前言之前已经讲完了HTML,没看的可以先回去看看便于理解,看过的小伙伴就可以直接进入css的学习了!基础网页分为三个部分结构:html表现:css行为:javascriptcss 层叠样式表:网页实际上是一个多层结构,通过css可以分别为网页的每一个层来设置样式,而最终我们能看到的只是网页的最上边一层,总之,css用来设置网页中的样式使用css来修改元素的样式的方法:第一种方式(内联样式,行内元素) 不推荐使用:在标签内部通过style属性来设置元素的样式问题:使用内联样式,样式原创 2021-05-21 11:49:12 · 61 阅读 · 0 评论 -
HTML浅析---table标签
前言这个我没怎么用过,大家了解一下就行,后面如果要用到再回来看看也是可以的。正题一在现实生活中,我们经常需要使用表格来显示一些格式化数据我们可以通过table标签来创建一个表格在table中使用tr表示表格中的一行,有几个tr就有几行用td表示一个单元格,有几个td就有几个单元格其中th标签中的内容默认以粗体、居中的方式显示 !!colspan 横向的合并单元格rowspan 纵向的合并单元格例子如下:// 值得注意的是一般不推荐使用table标签的属性来设置边距宽度等等//原创 2021-05-21 11:30:12 · 122 阅读 · 0 评论 -
HTML浅析—form标签
form标签简单了解HTML form 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。这个标签在后面作一些用户账号登录注册的页面时会用到,也是一个十分重要的标签。属性这里主要讲的是关于提交表单的属性action属性这个属性是必须写的,作用是提交表单时,向何处发送表单数据,值是URL,即网址,也可以空着method属性可选择值有get、post,是用来设置表单以何种方式发送到表单页面,这里的get,post我感觉是跟接口有关了,在用AJAX的时候接触过,现在原创 2021-05-20 20:31:09 · 129 阅读 · 0 评论 -
HTML浅析(2)-- a标签
img标签原创 2021-05-20 00:03:22 · 140 阅读 · 0 评论 -
HTML的浅析(一)
作为一个萌新,原创 2021-05-18 20:40:18 · 63 阅读 · 1 评论