CSS
.ByeBye
这个作者很懒,什么都没留下…
展开
-
CSS学习之选择器
学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSSCSS 网页的美容师CSS的出现,拯救了混乱的HTML,当让更加拯救了我们web开发者。 让我们的网页更...原创 2019-04-22 18:26:12 · 172 阅读 · 0 评论 -
[CSS3]伸缩布局
Flex布局CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的方向:默认主轴从左向右,侧轴默认从上到下主轴和侧轴并不是固定不变的,通过flex-direction可以互换。...原创 2019-05-22 10:59:37 · 238 阅读 · 0 评论 -
动画(CSS3) animation
animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;(除了名字,动画时间,延时有严格顺序要求其它随意)@keyframes 动画名称 { from{ 开始位置 } /*0%*/ to{ 结束 } /*...原创 2019-05-22 10:11:25 · 505 阅读 · 0 评论 -
[css3]transform
(一)2D变形(CSS3) transformtransform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和动画,可以取代大量之前只能靠Flash才可以实现的效果。transform 变换 变形的意思 《 transformers 变形金刚》1.移动 translate(x, y)tra...原创 2019-05-22 09:58:54 · 226 阅读 · 0 评论 -
过渡transition(CSS3)
过渡transition(CSS3)过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态...原创 2019-05-20 19:54:37 · 153 阅读 · 0 评论 -
凹凸文字
凹凸文字案例使用text-shadow属性实现<head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微...原创 2019-05-09 10:59:30 · 1232 阅读 · 0 评论 -
CSS学习
学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSSCSS 网页的美容师CSS的出现,拯救了混乱的HTML,当让更加拯救了我们web开发者。 让我们的网页更...原创 2019-04-23 19:37:47 · 199 阅读 · 0 评论 -
CSS之字体图标
字体图标图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(iconfont).字体图...原创 2019-04-23 20:10:54 · 563 阅读 · 0 评论 -
CSS精灵技术
CSS精灵技术(sprite)小妖精 雪碧1. 精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS S...原创 2019-04-23 20:20:06 · 184 阅读 · 0 评论 -
[CSS]元素的显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是displayvisibilityoverflow他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!!display 显示display 设置或检索对象是否及如何显示。display : ...原创 2019-04-23 19:07:02 · 161 阅读 · 0 评论 -
CSS学习之复合选择器
CSS复合选择器复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。记忆技巧:交集选择器 是 并且的意思。 即…又…的意思比如: p.one 选择的是: 类名为 .one 的 段落标...原创 2019-04-23 18:36:45 · 236 阅读 · 0 评论 -
CSS 背景(background)
CSS 背景(background)CSS 可以添加背景颜色和背景图片,以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写(复合属性)...原创 2019-04-22 19:32:58 · 135 阅读 · 0 评论 -
CSS学习之[定位]
定位(position)如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。要爱上它,它可以让我们工作更加轻松。为什么要用定位那么定位,最常运用的场景再那里呢?小黄色块可以再图片上移动元素的定位属性元素的定位属性主要...原创 2019-04-22 19:20:33 · 243 阅读 · 0 评论 -
CSS学习之[浮动]
浮动(float)普通流(normal flow)这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?CSS的定位机制有3种:普通流(标准流)、浮动和定位。html语言当中另外一个相当重要的概念----------标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从...原创 2019-04-22 19:04:52 · 198 阅读 · 0 评论 -
CSS学习之盒子模型
盒子模型(CSS重点)其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按照美工...原创 2019-04-22 18:54:22 · 243 阅读 · 0 评论 -
CSS三大特性
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出...原创 2019-04-22 18:45:23 · 65 阅读 · 0 评论 -
css学习之标签显示模式
标签显示模式(display)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol...原创 2019-04-22 18:41:25 · 126 阅读 · 0 评论 -
CSS学习之外观属性
CSS外观属性color:文本颜色color属性用于定义文本的颜色,其取值方式有如下3种:1.预定义的颜色值,如red,green,blue等。2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是,如果使用RGB代码的百分比颜...原创 2019-04-22 18:30:42 · 205 阅读 · 0 评论