CSS
文章平均质量分 69
李穩钰
这个作者很懒,什么都没留下…
展开
-
CSS第十一天学习总结—— CSS3 3D转换
3D转换(变换)3d转换是改变标签在3坐标系上的位置和形状的一种技术 。3D特点:近大远小。物体后面遮挡不可见3维坐标系3维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴 水平向右 注意: x 右边是正值,左边是负值y轴 垂直向下 注意: y 下面是正值,上面是负值z轴 垂直屏幕 由屏幕里面指向屏幕的外面注意: 往外面是正值,往里面是负值z轴理解:上图中的网格面板,即可理解为电脑屏幕。眼睛到屏幕的线,就是z轴。眼睛离屏幕越近,z轴越小。进入屏幕是原创 2021-08-01 00:54:17 · 271 阅读 · 0 评论 -
CSS第十天学习总结—— CSS3 动画
动画 animation动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。初学者容易对 动画 和 过渡 傻傻分不清楚过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px动画 可以设置变化的次数 甚至是无数次步骤制作动画分为两步:在css中定义动画函数 @keyframes:关键帧给原创 2021-08-01 00:53:23 · 235 阅读 · 0 评论 -
CSS第十天学习总结—— CSS3 2D转换
CSS3 2D转换转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。缩放:scale移动:translate旋转:rotate倾斜:skew (不介绍,感兴趣自己看https://blog.csdn.net/alwayssmlilewpc/article/details/79890004)2d转换是改变标签在2维平面上的位置和形状的一种技术。2维坐标系2维坐标系其实就是指布局的时候的坐标系。2d移动 translate2d移动是2d转原创 2021-08-01 00:53:09 · 300 阅读 · 0 评论 -
CSS第九天学习总结—— favicon 图标、SEO优化、logo SEO优化
网站 favicon 图标favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。制作favicon图标把图标切成 png 图片把 png 图片转换为 ico 图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/使用favicon图标第一步:favicon图标放到网站根目录下第二步:HTML页面引入favicon图标在html 页面里面的 <head>原创 2021-08-01 00:52:53 · 228 阅读 · 0 评论 -
CSS第八天学习总结—— CSS3新特性
CSS3的现状新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习:新增选择器和盒子模型以及其他特性CSS3 - 新增选择器CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器属性选择器属性选择器据标签中的属性来选择元素。符号:[ ] 选择器和选择符之间不要有空格选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择原创 2021-08-01 00:52:32 · 122 阅读 · 0 评论 -
CSS第七天学习总结—— 常见布局技巧、CSS初始化
常见布局技巧margin负值运用1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)文字围绕浮动元素效果布局示意图巧妙运用浮动元素不会压住文字的特性行内块巧妙运用页码在页面中间显示:把这些链接盒子转换为行内块, 之后给父级指定 text-align:center;利用行内块元素中间有缝隙,并且给父级添加 text-align:ce原创 2021-08-01 00:47:58 · 81 阅读 · 0 评论 -
CSS第七天学习总结—— 溢出的文字省略号显示
单行文本溢出显示省略号单行文本溢出显示省略号–必须满足三个条件:/*1. 先强制一行内显示文本*/white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐藏*/overflow: hidden; /*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;多行文本溢出显示省略号多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)/*1. 超出的部原创 2021-08-01 00:47:38 · 92 阅读 · 0 评论 -
CSS第七天学习总结—— vertical-align 属性应用
vertical-align 属性应用vertical-align 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。语法:vertical-align : baseline | top | middle | bottom 值描述baseline默认。元素放置在父元素的基线上。top把元素的顶端与行中最高元素的顶端对齐。mid原创 2021-08-01 00:47:11 · 468 阅读 · 0 评论 -
CSS第七天学习总结—— CSS 用户界面样式
CSS 用户界面样式所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽鼠标样式 cursor语法:li { cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白( 默认)pointer小手move移动text文本not-allowed禁止轮廓线 outline给表单添加 outline原创 2021-08-01 00:46:52 · 59 阅读 · 0 评论 -
CSS第七天学习总结—— CSS 三角
CSS 三角我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;代码:div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-原创 2021-07-31 00:49:21 · 107 阅读 · 0 评论 -
CSS第七天学习总结—— 字体图标
字体图标字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。精灵图的缺点:1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。字体图标的优点轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可以很随意的改变原创 2021-07-31 00:46:27 · 465 阅读 · 0 评论 -
CSS第七天学习总结—— 精灵图
精灵图为什么使用精灵图(目的):为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。精灵图举例:精灵图(sprites)的使用使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 sprites 精灵图 或者 雪碧图移动背景图片位置, 此时可以使用 backgrou原创 2021-07-31 00:42:11 · 178 阅读 · 0 评论 -
CSS第六天学习总结—— 案例:鼠标经过显示遮罩层
案例:鼠标经过显示遮罩层核心原理:原先半透明的黑色遮罩看不见, 鼠标经过 大盒子,就显示出来。遮罩的盒子不占有位置, 就需要用绝对定位 和 display 配合使用。代码参考:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-07-31 00:30:28 · 460 阅读 · 0 评论 -
CSS第六天学习总结—— 元素的显示与隐藏
元素的显示与隐藏目的(本质):让一个元素在页面中消失或者显示出来场景:类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!display 显示display 设置或检索对象是否及如何显示。语法:display: none; /* 隐藏对象 */display:block; /* 除了转换为块级元素之外,同时还有显示元素的意思。*/特点:display 隐藏元素后,不再占有原来的位置。实际开发场景:配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下原创 2021-07-31 00:29:45 · 82 阅读 · 0 评论 -
CSS第六天学习总结—— 定位
一、为什么使用定位?场景1: 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.场景2:当我们滚动窗口的时候,盒子是固定屏幕某个位置的——轮播图。结论:要实现以上效果,标准流 或 浮动都无法快速实现所以:1.浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。二、定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子定位也是用来布局的,它原创 2021-07-31 00:29:27 · 102 阅读 · 0 评论 -
CSS第五天学习总结—— PS切图
常见的图片格式序号格式特点和常用的用途1jpgJPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片 经常用jpg格式的2gifGIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果3pngpng图像格式,是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式.4p原创 2021-07-31 00:29:10 · 230 阅读 · 0 评论 -
CSS第五天学习总结—— CSS属性书写顺序
CSS属性书写顺序1、布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)2、自身属性:width / height / margin / padding / border / background3、文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break原创 2021-07-31 00:28:55 · 50 阅读 · 0 评论 -
CSS第四天学习总结—— 浮动
一、浮动1、传统网页布局的三种方式CSS 提供了三种传统布局方式:普通流(标准流)浮动定位注意:实际开发中,一个页面基本都包含了这三种布局方式 。2、标准流(普通流/文档流)所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span、a、i、em 等以上都是标准流布局,标准流是最基原创 2021-07-31 00:28:38 · 140 阅读 · 0 评论 -
CSS第三天学习总结—— 圆角边框、盒子阴影、文字阴影
圆角边框border-radius 属性用于设置元素的外边框圆角。语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆:把数值修改为正方形高度或者宽度的一半即可,或者直接写为 50%把长方形变成圆角矩形:把数值改为高度的一半(或者直接写50%)该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:左上角 border-top-left-radius、右上角 border-top-right-ra原创 2021-07-31 00:27:56 · 96 阅读 · 0 评论 -
CSS第三天学习总结—— PS基本操作
PS 基本操作文件→打开 :可以打开我们要测量的图片Ctrl+R:可以打开标尺,或者 视图→标尺右击标尺,把里面的单位改为像素Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图按住空格键,鼠标可以变成小手,拖动 PS 视图用选区拖动 可以测量大小Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区...原创 2021-07-30 14:26:59 · 59 阅读 · 0 评论 -
CSS第三天学习总结——CSS盒子模型
CSS盒子模型页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面盒子模型(Box Model)组成所谓盒子模型:把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容边框(border)边框的使用border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色;语法:border : bo原创 2021-07-30 14:24:31 · 259 阅读 · 0 评论 -
CSS第三天学习总结—— CSS的三大特性
CSS的三大特性层叠性继承性优先级层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决 样式冲突 的问题 。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠继承性CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)原创 2021-07-30 13:49:20 · 61 阅读 · 0 评论 -
CSS第二天学习总结—— CSS的背景
CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景颜色样式名称:background-color 属性定义了元素的背景颜色使用方式:background-color: 颜色值;其他说明:一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。background-color: transparent; 背景图片样式名称:background-im原创 2021-07-30 13:27:25 · 105 阅读 · 0 评论 -
CSS第二天学习总结—— CSS的元素显示模式
CSS的元素显示模式定义:元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式的分类块元素行内元素行内块元素块元素常见的块元素:<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li><div>原创 2021-07-30 12:59:41 · 87 阅读 · 0 评论 -
CSS第二天学习总结—— CSS的复合选择器
CSS的复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器 和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。原创 2021-07-30 12:38:49 · 138 阅读 · 0 评论 -
CSS第二天学习总结—— emmet语法
emmet语法Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div如果有父子级关系的标签,可以用 > 比如 ul > li就可以了如果有兄弟关系的标签,用 + 就可以了 比如 div+p转载 2021-07-30 11:16:33 · 62 阅读 · 0 评论 -
CSS第一天学习总结—— CSS的引入方式
CSS 的三种样式表按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:1、行内样式表(行内式)2、内部样式表(嵌入式)3、外部样式表(链接式)行内样式表(行内式)行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。语法:<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>style 其实就是标签的属性在双引号中间,写法原创 2021-07-30 00:48:04 · 101 阅读 · 0 评论 -
CSS第一天学习总结—— CSS文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色color 属性用于定义文本的颜色。语法:div { color: red;}表示属性值预定义的颜色值red,green,blue,pink等。十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%)开发中最常用的是十六进制。对齐文本text-align 属性用于设原创 2021-07-30 00:30:02 · 90 阅读 · 0 评论 -
CSS第一天学习总结—— CSS字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。字体系列CSS 使用 font-family 属性定义文本的字体系列。p { font-family: "微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开。一般情况下,如果有空格隔开的多个单词组成的字体,加引号(英文状态下单引或双引都可以)。尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确原创 2021-07-30 00:05:05 · 82 阅读 · 0 评论 -
CSS第一天学习总结—— CSS基础选择器
选择器分类选择器分为基础选择器和复合选择器两个大类,这里先学习一下基础选择器。基础选择器是由单个选择器组成的。基础选择器包括:标签选择器类选择器id 选择器通配符选择器标签选择器标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。语法:标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ...} 作用:标签选择器可以把某一类标签全部选择出来,比原创 2021-07-29 23:43:39 · 74 阅读 · 0 评论 -
CSS第一天学习总结
CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现,原创 2021-07-29 22:57:12 · 85 阅读 · 0 评论