![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
jhkkk_
GIS,Web,Android
展开
-
CSS简单知识介绍
目录 使用CSS完成网站首页的优化表格布局的缺陷:CSS概述:CSS的简单语法:元素选择:ID选择器:类选择器:CSS的引入方式:CSS浮动 :代码实现:CSS的优先级CSS的盒子模型: 万物皆盒子CSS绝对定位代码实现:使用CSS完成网站首页的优化表格布局的缺陷:1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到...原创 2018-09-27 16:55:31 · 152 阅读 · 0 评论 -
CSS之浮动
文章目录浮动什么是浮动?浮动详细内幕特性清除浮动清除浮动本质清除浮动的方法额外标签法父级添加overflow属性方法使用after伪元素清除浮动使用before和after双伪元素清除浮动浮动什么是浮动?元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制,移动到其父元素中指定位置的过程。在CSS中,通过float属性来定义浮动,其基本语法格式如下:选择器{float:属性值;}...原创 2018-11-18 11:27:29 · 140 阅读 · 0 评论 -
CSS3之背景
文章目录背景渐变背景缩放(CSS3)多背景(CSS3)背景渐变在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生。兼容性问题很严重,我们这里之讲解线性渐变语法格式:background:-webkit-linear-gradient(渐变的起始位置, 起始...原创 2018-11-21 10:51:55 · 128 阅读 · 0 评论 -
BFC(块级格式化上下文)
文章目录BFC(块级格式化上下文)元素的显示模式那些元素会具有BFC的条件什么情况下可以让元素产生BFCBFC元素所具有的特性BFC的主要用途BFC 总结BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式我们前面讲过 元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ,其实,它还有很多...原创 2018-11-21 10:50:40 · 359 阅读 · 0 评论 -
CSS3之文字阴影
文字阴影(CSS3)以后我们可以给我们的文字添加阴影效果了 Shadow 影子text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;前两项是必须写的。 后两项可以选写。...原创 2018-11-21 10:46:45 · 1935 阅读 · 2 评论 -
CSS3之伸缩布局
伸缩布局(CSS3)CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的方向:默认主轴从左向右,侧轴默认从上到下主轴和侧轴并不是固定不变的,通过flex-direction可以互换。Fle...原创 2018-11-21 10:45:24 · 291 阅读 · 0 评论 -
CSS3之动画
动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。语法格式:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意@keyframes 动画名称 { from{ 开始位置 } 0% to{ ...原创 2018-11-21 10:44:04 · 131 阅读 · 0 评论 -
CSS3之变形
文章目录2D变形(CSS3) transform移动 translate(x, y)缩放 scale(x, y)旋转 rotate(deg)transform-origin可以调整元素转换变形的原点倾斜 skew(deg, deg)3D变形(CSS3) transformrotateX()rotateY()rotateZ()透视(perspective)translateX(x)translat...原创 2018-11-21 10:40:58 · 260 阅读 · 0 评论 -
CSS3之过渡
过渡(CSS3)过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实...原创 2018-11-21 10:34:50 · 266 阅读 · 0 评论 -
CSS3盒模型
CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。可以分成两种情况:1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode2、box...原创 2018-11-21 10:30:41 · 138 阅读 · 0 评论 -
CSS3 新增选择器
文章目录结构(位置)伪类选择器(CSS3)属性选择器伪元素选择器(CSS3)结构(位置)伪类选择器(CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-last-child(n) :选择器匹配属于其元...原创 2018-11-21 10:29:26 · 126 阅读 · 0 评论 -
CSS W3C 统一验证工具
CSS W3C 统一验证工具CssStats 是一个在线的 CSS 代码分析工具网址是: http://www.cssstats.com/W3C 统一验证工具: http://validator.w3.org/unicorn/ ☆☆☆☆☆它可以检测本地文件!!http://tool.chinaz.com/Tools/CssFormat.aspx css 代码压缩...原创 2018-11-18 22:33:54 · 919 阅读 · 0 评论 -
web字体
文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML追加新图标到原来库里面web字体字体格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。1、TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3...原创 2018-11-18 22:32:10 · 312 阅读 · 0 评论 -
CSS之"精灵技术"
精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。精灵技术本质简单地说,...原创 2018-11-18 22:23:52 · 355 阅读 · 0 评论 -
CSS之用户界面样式
文章目录CSS用户界面样式鼠标样式cursor轮廓 outline防止拖拽文本域resizevertical-align 垂直对齐去除图片底侧空白缝隙CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用...原创 2018-11-18 22:17:32 · 228 阅读 · 0 评论 -
CSS之元素显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见,他们分别是 display visibility 和 overflow。display 显示display 设置或检索对象是否及如何显示。display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。特点: 隐藏之后,不再保留位置。visibility 可见性...原创 2018-11-18 22:08:40 · 138 阅读 · 0 评论 -
CSS之定位
文章目录定位(position)元素的定位属性静态定位(static)相对定位relative(自恋型)绝对定位absolute (拼爹型)父级没有定位父级有定位子绝父相绝对定位的盒子水平/垂直居中固定定位fixed(认死理型)叠放次序(z-index)四种定位总结定位模式转换定位(position)background-position 背景定位如果,说浮动, 关键在一个 “浮” 字上...原创 2018-11-18 13:18:21 · 295 阅读 · 0 评论