- 博客(27)
- 收藏
- 关注
RSS订阅原创 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
121
原创 CSS第七天学习总结—— 字体图标
字体图标字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图的缺点：1.图片文件还是比较大的。2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变
2021-07-31 00:46:27
484
原创 CSS第七天学习总结—— 精灵图
精灵图为什么使用精灵图（目的）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:精灵图（sprites）的使用使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 sprites 精灵图 或者 雪碧图移动背景图片位置， 此时可以使用 backgrou
2021-07-31 00:42:11
194
原创 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
467
原创 CSS第六天学习总结—— 元素的显示与隐藏
元素的显示与隐藏目的（本质）：让一个元素在页面中消失或者显示出来场景：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！display 显示display 设置或检索对象是否及如何显示。语法：display: none; /* 隐藏对象 */display：block; /* 除了转换为块级元素之外，同时还有显示元素的意思。*/特点：display 隐藏元素后，不再占有原来的位置。实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下
2021-07-31 00:29:45
83
原创 CSS第六天学习总结—— 定位
一、为什么使用定位？场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的——轮播图。结论：要实现以上效果，标准流 或 浮动都无法快速实现所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。二、定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子定位也是用来布局的，它
2021-07-31 00:29:27
102
原创 CSS第五天学习总结—— PS切图
常见的图片格式序号格式特点和常用的用途1jpgJPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的2gifGIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果3pngpng图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式.4p
2021-07-31 00:29:10
248
原创 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
原创 CSS第四天学习总结—— 浮动
一、浮动1、传统网页布局的三种方式CSS 提供了三种传统布局方式：普通流（标准流）浮动定位注意：实际开发中，一个页面基本都包含了这三种布局方式 。2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等以上都是标准流布局，标准流是最基
2021-07-31 00:28:38
143
原创 CSS第三天学习总结—— 圆角边框、盒子阴影、文字阴影
圆角边框border-radius 属性用于设置元素的外边框圆角。语法： border-radius:length; 参数值可以为数值或百分比的形式如果是正方形，想要设置为一个圆：把数值修改为正方形高度或者宽度的一半即可，或者直接写为 50%把长方形变成圆角矩形：把数值改为高度的一半（或者直接写50%）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角分开写：左上角 border-top-left-radius、右上角 border-top-right-ra
2021-07-31 00:27:56
99
原创 CSS第三天学习总结—— PS基本操作
PS 基本操作文件→打开 ：可以打开我们要测量的图片Ctrl+R：可以打开标尺，或者 视图→标尺右击标尺，把里面的单位改为像素Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图按住空格键，鼠标可以变成小手，拖动 PS 视图用选区拖动 可以测量大小Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区...
2021-07-30 14:26:59
61
原创 CSS第三天学习总结——CSS盒子模型
CSS盒子模型页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面盒子模型（Box Model）组成所谓盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容边框（border）边框的使用border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；语法：border : bo
2021-07-30 14:24:31
273
原创 CSS第三天学习总结—— CSS的三大特性
CSS的三大特性层叠性继承性优先级层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决 样式冲突 的问题 。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠继承性CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
2021-07-30 13:49:20
62
原创 CSS第二天学习总结—— CSS的背景
CSS的背景通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景颜色样式名称：background-color 属性定义了元素的背景颜色使用方式：background-color: 颜色值;其他说明：一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。background-color: transparent; 背景图片样式名称：background-im
2021-07-30 13:27:25
106
原创 CSS第二天学习总结—— CSS的元素显示模式
CSS的元素显示模式定义：元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式的分类块元素行内元素行内块元素块元素常见的块元素：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li><div>
2021-07-30 12:59:41
87
原创 CSS第二天学习总结—— CSS的复合选择器
CSS的复合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器 和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等后代选择器后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
2021-07-30 12:38:49
139
转载 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
63
原创 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
原创 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
原创 CSS第一天学习总结—— CSS字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。字体系列CSS 使用 font-family 属性定义文本的字体系列。p { font-family: "微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开。一般情况下,如果有空格隔开的多个单词组成的字体，加引号（英文状态下单引或双引都可以）。尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确
2021-07-30 00:05:05
84
原创 CSS第一天学习总结—— CSS基础选择器
选择器分类选择器分为基础选择器和复合选择器两个大类，这里先学习一下基础选择器。基础选择器是由单个选择器组成的。基础选择器包括：标签选择器类选择器id 选择器通配符选择器标签选择器标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法：标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ...} 作用：标签选择器可以把某一类标签全部选择出来，比
2021-07-29 23:43:39
76
原创 CSS第一天学习总结
CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现，
2021-07-29 22:57:12
87
原创 HTML第二天学习总结—— 表单
为什么需要表单使用表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。表单的组成在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。表单域表单域是一个包含表单元素的区域。在 HTML 标签中， <form>标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。<form action=“url地址” method=“提交
2021-07-27 09:56:34
523
原创 HTML第二天学习总结——列表
表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。无序列表 <ul><ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li>标签定义。基本语法如下：<ul> <li>列表项1</li> <li>列表项2</li>
2021-07-27 09:46:48
247
原创 HTML第二天学习总结—— 表格
表格的主要作用1、表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。2、表格不是用来布局页面的，而是用来展示数据的。支出项目单价（元）数目金额（元）垃圾箱3012360垃圾牌100121200宣传单0.0840032宣传小册子3250750合计————2342表格的具体用法<table> <tr> <td>单元格内的文字</t
2021-07-27 09:36:02
408
原创 HTML第二天学习总结—— HTML标签
HTML标签HTML语法规则：1.HTML 标签是由尖括号包围的关键词，例如 <html>。2.HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为**双标签**。3.签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 4.有些特殊的标签必须是单个标签（极少情况），例如 <br />我们称为单标签。 标签的关系双标签关系可以分为两类：包含关系和并列关系包含关系：<head> &
2021-07-26 18:52:29
168
原创 HTML第一天学习总结
什么是网页1.网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页的组成网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。HTML1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种
2021-07-26 15:26:54
235
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人