![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
白T恤架构师
爱穿白衬衫,深藏功与名
展开
-
web前端入门到实战:CSS + JS 制作满屏幕小爱心
我想最终效果是这样的(猜猜多少个爱心):[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DaD6SfWP-1589372871957)(https://upload-images.jianshu.io/upload_images/20062408-0ce34cc4787312c5.gif?imageMogr2/auto-orient/strip)]然后开始动手吧~学啥本领本文将带大家学习两个好东西:1.生成随机色的方法;2.Element.animate() 方法。原创 2020-05-13 20:29:31 · 1160 阅读 · 0 评论 -
web前端入门到实战:CSS 实现网格效果
效果CSS专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划).grid { width: 500px; height: 500px; background-image: linear-gradient( 45deg, #eeeeee 25%, transparent 25%, transparent 75原创 2020-05-13 20:27:38 · 200 阅读 · 0 评论 -
web前端入门到实战:css3实现动画的几种方式
css实现动画主要有3种方式,第一种是:transition实现渐变动画,第二种是:transform转变动画,第三种是:animation实现自定义动画,下面具体讲一下3种动画的实现方式。transition渐变动画我们先看一下transition的属性:property:填写需要变化的css属性如:width,line-height,font-size,color等,所有作用与dom样式的属性;duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成.原创 2020-05-13 20:27:04 · 327 阅读 · 0 评论 -
web前端入门到实战:css的盒模型详细解说
CSS盒子模型与怪异盒模型盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(padding),边框(border),外边距(margin),和实际内容(content)这几个部分。标准盒模型标准盒模型中盒子的大小是指:content + border + padding + margin。其中width指的是内容区域content的宽度;height指的是内容区域content的高度。下面用一段代码和图片来让说明一个盒子大小的呈现方式。.box { width:原创 2020-05-13 20:26:14 · 202 阅读 · 0 评论 -
web前端入门到实战:css绘制三角形最简单代码
实现制作一页我们需要将两张图合成一张有正反两面。这里需要将反面沿着 y 轴反转一下就可以正确的显示了。使用 transform:scale(-1,1) 原本左侧这张图是正面看时的视角,右侧图是反面看的视角想法将两张图合成一张时通过定位将图重叠在一起。反转整张图时可以看到一页的两面专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)<div cl.原创 2020-05-12 21:54:58 · 657 阅读 · 0 评论 -
web前端入门到实战:CSS 类名范式一览
今天我们来回顾几种常见的 CSS 的类名范式OOCSSBEMSMACSSACSSCSS 的特性不断增强,预编译框架也层出不穷,但是即使使用 cssModules 这样的 scope 技术,我们仍需要一些范式来指导我们在局部更规范合理地给类取名字。上面介绍的范式都不是什么新鲜事物,有的甚至相当有历史了,回顾他们主要目的在于帮助我们抬起头来重新想一想当初为什么我们选择了某一种范式(比如 BEM)来进行我们的类命名:不同的范式的侧重不同,有些范式可以相互兼容组合,有些不能。他们大都是为了达成以下原创 2020-05-12 21:54:02 · 410 阅读 · 0 评论 -
web前端入门到实战:文本图标对齐的几种解决方案
常见的对齐问题:浏览器是基于什么对齐图标和文本的?为什么明明使用了 flex或vertical-align,图标还是看起来差了 1 像素没对齐?文字图标布局开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例:html部分:<div class="wrap"> <img src="https://avatars3.githubusercontent.com原创 2020-05-12 21:53:15 · 922 阅读 · 0 评论 -
web前端入门到实战:纯CSS实现简单骨骼动画
1 背景某天设计师来找我说,“这个心愿牌傻傻地挂在那不好看,加个动效呗,就左右摆动一下就行,很简单的!”,我一想,行呀,提升用户视觉体验,开搞。十分钟后,????不对呀,这个左右摆动好假,不像现实中风吹的效果。注:此处加快了动画的速度和摆动的幅度。专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划).animate-1 { animation: s原创 2020-05-12 21:52:00 · 392 阅读 · 0 评论 -
web前端入门到实战:css的变量教程,更强大的css
css的变量教程,更强大的css当微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候,变量名前面要加两根连词线(–)。body { --foo: #7F583F; --bar: #F7EFD2;}上面代码中,body选择器里面声明了两个变量:–foo和–bar。它们与color、font-size等正式属性没有什么不同,只是没有默认含..原创 2020-05-12 21:50:55 · 180 阅读 · 0 评论 -
web前端入门到实战:CSS 网格布局:网格线
本系列第一篇讲到如何创建网格容器,以及在容器元素上能够使用的属性。网格格式化上下文一旦创建,你也就有了网格线了。有了网格线,你就能在网格项目上添加属性,对项目做定位(place items)了。读完本篇文章,你将学到:定位属性:grid-column-start、grid-column-end、grid-row-start、grid-row-end 以及对应的简写属性 grid-column...原创 2020-05-05 15:26:07 · 1537 阅读 · 0 评论 -
web前端入门到实战:CSS网格布局:创建一个网格容器
读完本篇文章,你将学到:使用 display: grid 或 display: inline-grid 创建网格容器。使用 grid-template-columns 和 grid-template-rows 设置行和列。使用 grid-auto-colums 和 grid-auto-rows 属性设置隐式轨道(implicit tracks)的尺寸。创建容器与弹性布局类似的是,使用...原创 2020-05-05 15:22:42 · 430 阅读 · 0 评论 -
web前端入门到实战:CSS 滚动捕捉技术(Scroll Snapping)
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置。非常适合用来建立下面这样的应用:基本使用实现滚动捕捉主要依靠两个属性:容器元素的 scroll-snap-type 属性,以及子元素的 scroll-snap-align 属性。最基本的使用方式如下:专门建立的学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基...原创 2020-05-05 15:20:56 · 674 阅读 · 0 评论 -
web前端入门到实战:CSS filter与前端滤镜
(2020.04.04)很多网站都换成了灰色调,如淘宝百度掘金知乎等,通过实地考察,灰度的技术无一例外都使用了以下CSS,如淘宝的:html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}第一行对非IE浏览器生效,第二...原创 2020-05-05 15:18:54 · 180 阅读 · 0 评论 -
web前端入门到实战:css+svg实现b站充电效果
css+svg实现b站充电效果难点svg图形的两块蒙版制作先上代码这是左边粉色框框的内容这个没啥好说的<div id="con"> <div id="TA-con"> <div id="text-con"> <div id="linght"></div> <div...原创 2020-05-05 15:17:11 · 571 阅读 · 0 评论 -
web前端入门到实战:网页变灰蒙灰CSS样式总汇
每次全国哀悼日,各大网站首页都变成了灰色,添加以下全局CSS样式,可以实现此效果:方法一html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 -->方法二html { fil...原创 2020-05-04 14:50:21 · 469 阅读 · 0 评论 -
web前端入门到实战:CSS 负边距的行为表现
CSS 中的负边距margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果。先介绍下我们的测试元素:一个简单的包含三个段落的容器元素。注意,段落设置了固定宽度 250px。专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具...原创 2020-05-04 14:48:48 · 216 阅读 · 0 评论 -
web前端入门到实战:这个炫酷的播放粒子效果,你也可以学会!
当谈到运动和动画时,可能没有什么比粒子更让我喜欢了,这就是为什么每次我探索新技术时,我总是以尽可能多的创建粒子来演示。在本文中,单击按钮时,我们将使用Web Animations API创建烟花效果,从而制作更多的粒子魔术。效果如下让我们开始吧!浏览器支持在我撰写本文时,除了Safari和Internet Explorer(IE是全民公敌、Safari是新时代的IE)之外,所有主流浏...原创 2020-04-30 14:50:33 · 682 阅读 · 0 评论 -
web前端入门到实战:3个非常棒的CSS技巧,可以在项目中代替JS
本文介绍三个非常棒棒的CSS技巧,完全可以在你的项目中代替JavaScript,一起来看看这些技巧吧。:active伪类与CSS数据上报超实用超高频使用的:empty伪类用好:only-child伪类1. :active伪类与CSS数据上报如果想要知道两个按钮的点击率,CSS开发者可以自己动手,无需劳烦JavaScript开发者去埋点:.button-1:active::after...原创 2020-04-30 14:49:01 · 146 阅读 · 0 评论 -
web前端入门到实战:CSS实现动态图片的九宫格布局
前提条件:content="width=750"<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">复制代码效果图如下:需求分析高宽:1张图【宽320,高320】[2倍稿尺寸]2张图时【宽332,高332】...原创 2020-04-30 14:48:03 · 812 阅读 · 0 评论 -
web前端入门到实战:纯 CSS 判断鼠标进入的方向
一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下:<style>body { padding: 2em; text-align: center;}.block { position: relative; display: inline-block; ...原创 2020-04-30 14:47:18 · 360 阅读 · 0 评论 -
web前端入门到实战:CSS聊天气泡
一、效果图京东效果模拟的效果二、原理准备一个高度和宽度为0的盒子将这个盒子设置一个边框将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色如果需要改变其大小,直接设置边框的宽度 border-width将字体 font-size 和行高 line-height 设置为0,以免影响显示最后使用定位将其设置到需要的位置三、代码HTML结构<...原创 2020-04-30 14:46:21 · 224 阅读 · 0 评论 -
web前端入门到实战:table中cesllspacing与cellpadding的区别
table是什么?它是由一个个cell单元格构成的,在表格中,<td>的个数取决于每行中包裹的cell单元格个数!此外,默认table表格在没有添加css样式html中常见table写法:A.<tr>…</tr>:表格的一行,有几对tr表格就有几行; B.<td>…</td>:表格的一个单元格,一行中包含几对<td>...&l...原创 2020-04-12 20:02:55 · 550 阅读 · 0 评论 -
web前端入门到实战:网页简单布局之结构与表现原则案例
一开始我们接触网页制作的时候,就了解到html代表结构、css代表样式、javascript代表行为,网页制作中,我们一直强调结构与表现相分离的原则,这里面的结构一般指HTML,此外分离是说把它们写在不同的文件加以引用吗?当然不是,在这里的学习中了解到,分离不单是一种方法更是一种思想,简而言之,一个平面二维坐标,其中x轴代表技术发展,y轴代表网页制作需求,分离就是根据根据技术发展和我们的网页制作需...原创 2020-04-12 20:01:20 · 384 阅读 · 0 评论 -
web前端入门到实战:行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型
行内元素水平居中如何设置?如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内水平...原创 2020-04-12 19:58:35 · 284 阅读 · 0 评论 -
web前端入门到实战:汇总css布局模型和常见代码缩写与长度单位
知识点一:css布局模型:布局模型是建立在盒模型基础之上,在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer)。一、流动模型:默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的‘;特征1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,原因?默认状态下,块状元素的宽度都为100%,导致...原创 2020-04-12 19:51:09 · 171 阅读 · 0 评论 -
web前端入门到实战:css排版常用样式、三种不同html类型、css布局盒模型介绍
把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合,实现出设计效果。字体:div{font-family: “Microsoft Yahei”;}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)现...原创 2020-04-12 19:49:44 · 271 阅读 · 0 评论 -
web前端入门到实战:CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素,类似这样body{color: pink;font-size: 16px;};:标签选择器其实就是html代码中的标签,比如<html>、<body>、<h1>、<p>、<img>等...原创 2020-04-10 14:29:49 · 157 阅读 · 0 评论 -
web前端入门到实战:css语法特点和引入页面三种方式与其优先级
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如div{font-size:12px;color:red;font-weight:bold;}文字大小、颜色、字体加粗等。css优势是什么?编写一条css语句控制3个span里面的文本语句颜色,使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一...原创 2020-04-10 14:29:15 · 156 阅读 · 0 评论 -
web前端入门到实战:11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/十字形状/cursor:pointer;/小手形状/cursor:wait;/等待形状/cursor:text;/默认 文本形状/cursor:default;/箭头指示形状/cursor:help;/帮助形状/ 列表(list-style-type):none/把列表前面的选项去除/disc/实心/circle/空心/square/方块/...原创 2020-04-10 14:27:47 · 204 阅读 · 0 评论 -
web前端入门到实战:11种常用css样式之border
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/边框宽度/,2.border-style/边框样式/,3.border-color/边框色彩/三大属性构成构成;border边框方位分为border-top/边框上方/border-bottom/边框底部/border-left/边框左边/border-r...原创 2020-04-10 14:26:54 · 1515 阅读 · 0 评论 -
web前端入门到实战:11种常用css样式之background学习
background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用**background-attachment: fixed;/固定定位/**常用的background样式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-p...原创 2020-04-09 19:57:28 · 180 阅读 · 0 评论 -
web前端入门到实战:11种常用css样式之文本字体学习
常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏文本:1.letter-spacing/字间距/2.word-spacing/词间距/3.text-decoration/下划线/4.text-align/对齐/5.text-indent/缩进/6.line-height/行高/7....原创 2020-04-09 19:50:31 · 196 阅读 · 0 评论 -
web前端入门到实战:css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式;2.类选择符.hcls{}//给class是hcls的一类标签设置模式;3.id选择符#h3{}//给id是h3的标签设置样式;4.关联选择符#div h1、#div h1.ljhcls;5.div,h1,pmspan,button{}基本...原创 2020-04-09 19:49:56 · 240 阅读 · 0 评论 -
web前端入门到实战:常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本、属性、伪类、层级(组合)选择器,具体使用情况建议先阅读[css选择器四大类:基本、组合、属性、伪类]对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且给它添加属性样式。常用的选择器有:标签、id、类、关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的;基本选择器有(/*代表注释*/),/*:first-child第一个元素*/...原创 2020-04-09 19:49:20 · 230 阅读 · 0 评论 -
web前端入门到实战:css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有(/内容注释部分/)list-style-type:circle;/空心圆/list-style:none;/去除标志/list-style:square;/方块/list-style:upper-ro...原创 2020-04-09 19:47:10 · 399 阅读 · 0 评论 -
web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距,direction改变文本从左至右的阅读顺序,white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐,至于我们...原创 2020-04-08 15:44:39 · 194 阅读 · 0 评论 -
web前端入门到实战:css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体、宋体与微软雅黑这三款字体,通常这样写font-family:“黑体”, “宋体”,“Microsoft YaHei”font-size控制字体大小,我们设置字体大小是设置它的宽度,它的高度一般电脑系统默认字体大小是16px,所...原创 2020-04-08 15:44:02 · 281 阅读 · 0 评论 -
web前端入门到实战:css常用样式背景background如何使用
css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color代表背景颜色 .background-image代表背景图像 .background-repeat 代表背景图像水平或者垂直平铺 .background-att...原创 2020-04-08 15:38:51 · 571 阅读 · 0 评论 -
web前端入门到实战:css选择器四大类:基本、组合、属性、伪类
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类!css基本选择器基本选择器又分为:通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表身份证3...原创 2020-04-08 15:38:17 · 172 阅读 · 0 评论 -
web前端入门到实战:css的核心原理分为优先级原则与继承原则两大部分
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性1》优先原则针对选择器:a.同一个选择器从上往下读取执行css样式 b.同一类选择器从上往下执行 c.不同类型的选择器优先级,先执行低优先级再执行高优先级,比方基本选择器就是从*通配符<标签div<cl...原创 2020-04-08 15:36:13 · 104 阅读 · 0 评论