css
关注
分享
扫一扫
文章平均质量分 69
山楂不甜
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
27.CSS-3D模块
文章目录3D模块1.什么是2D和3D?2.如何让某个元素呈3D展现的练习:做一个正方体3D模块1.什么是2D和3D?2D就是一个平面,只有宽度和高度,没有厚度;3D就是一个立体,有宽度和高度,还有厚度.默认情况下,所有元素都是呈2D展现的2.如何让某个元素呈3D展现的和透视一样,想看到某个元素的3D效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d即可<style> *{ margin: 0; pa原创 2021-07-29 14:07:56 · 290 阅读 · 0 评论 -
26.CSS-动画模块
文章目录动画模块1.过渡和动画之间的异同2.动画的三要素3.属性动画模块1.过渡和动画之间的异同不同点:过渡必须人为触发才会执行动画;动画不需要人为触发就可以执行动画.相同点:过渡和动画都是用来给元素添加动画的;过渡和动画都是系统新增的一些属性;过渡和动画都需要满足三要素才会有动画效果.2.动画的三要素告诉系统需要执行哪个动画告诉系统我们需要自己创建一个自己指定名称的动画告诉系统动画需要持续的时间 div{ width: 100px; height:原创 2021-07-28 15:48:40 · 281 阅读 · 0 评论 -
25.CSS-盒子阴影和文字阴影
文章目录盒子阴影1.如何给盒子添加阴影？2.注意点文字阴影1.如何给文字添加参数？2.注意点盒子阴影1.如何给盒子添加阴影？box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；2.注意点盒子的阴影分为内外阴影，默认情况下就是外阴影。快速添加阴影只需要编写三个参数即可，box-shadow：水平偏移 垂直偏移 模糊度；默认情况下阴影的颜色和盒子内容的颜色一致。文字阴影1.如何给文字添加参数？text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色；2.原创 2021-07-20 11:17:23 · 159 阅读 · 0 评论 -
24.CSS-2D转换
文章目录2D转换transform属性注意点transform-origin属性注意点perspective属性注意点2D转换transform属性作用：能够对元素进行移动、旋转、缩放和倾斜的属性。格式：transform：translate()； 从当前位置移动元素，第一个参数是水平方向，第二个参数是垂直方向。transform：rotate()； 旋转元素，需要说明角度。例如：transform：rotate(45deg)；默认是以Z轴旋转，也可以写成transform: rotateZ(原创 2021-07-20 10:29:11 · 183 阅读 · 2 评论 -
23.CSS-过渡模块
文章目录过渡模块1.过渡三要素2.注意点3.其他属性4.连写格式手风琴效果过渡模块1.过渡三要素必须要有属性发生变化；必须告诉系统哪个属性需要执行过渡效果；必须告诉系统过渡效果持续时长。2.注意点当多个属性需要同时执行过渡效果时用逗号隔开即可。例如：/*告诉系统哪个属性需要过渡效果和效果持续的时间*/transition-property: width,background-color;transition-duration: 5s,5s;3.其他属性transition-转载 2021-07-19 15:08:02 · 188 阅读 · 0 评论 -
22.CSS-a标签的伪类选择器
文章目录a标签的伪类选择器1.什么是a标签的伪类选择器？2.格式3.注意点a标签的伪类选择器通过观察发现a标签存在一定的状态。默认状态，从未被访问过；被访问过的状态；鼠标长按的状态；鼠标悬停在a标签上的状态。1.什么是a标签的伪类选择器？作用：专门用来修改a标签不同状态的样式的。2.格式:link 修改从未被访问过的状态下的样式；:visited 修改被访问过状态下的样式；:active 修改鼠标长按的状态下的样式；:hover 修改鼠标悬停在a标签上的状态下的样式。3.注意转载 2021-07-19 10:50:48 · 902 阅读 · 0 评论 -
21.CSS-网页的布局方式
文章目录网页的布局方式1.什么是网页的布局方式？2.网页的布局方式（1）标准流排版方式（2）浮动流排版方式（3）定位流排版方式网页的布局方式1.什么是网页的布局方式？网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。2.网页的布局方式（1）标准流排版方式浏览器默认的排版方式就是标准流排版方式，也称文档流、普通流。在CSS中将元素分为三类，块级元素、行内元素和行内块级元素。在标准流中有两种排版，一种是垂直排版，一种是水平排版。垂直排版，如果是块级元素；水平排版，如果元素是行内原创 2021-07-18 22:33:14 · 237 阅读 · 0 评论 -
20.CSS-定位（下）
文章目录3.固定定位什么是固定定位？注意点应用场景4.静态定位z-index属性3.固定定位什么是固定定位？固定定位和背景关联方式相类似。背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动。注意点1.固定定位的元素是脱离标准流的，不会占用标准流的空间；2.固定定位和绝对定位一样，不区分行内/块级/行内块级元素。3.IE6不支持固定定位。应用场景导航条的穿透效果广告底部返回顶部按钮4.静态定位默认元素就是静态定位。z-index属原创 2021-07-18 22:32:17 · 151 阅读 · 0 评论 -
19.CSS-定位（上）
文章目录定位定位流的分类1.相对定位什么是相对定位？注意点应用场景2.绝对定位什么是绝对定位？注意点3.固定定位4.静态定位定位定位流的分类1.相对定位什么是相对定位？相对定位就是相对于自己以前在标准流中的位置来移动注意点相对定位是不脱离标准流的，会继续在标准流中占据一份空间；需要配合其他的属性一起使用，相对于自己以前在标准流中的位置来移动；position: relative;top: 20px;right: ;bottom: ;left: 20px;在相对定位中同一个原创 2021-07-18 22:29:47 · 151 阅读 · 1 评论 -
简易网易注册页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易注册界面</title> <style> /*1.清空默认边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,原创 2021-07-17 16:55:50 · 501 阅读 · 0 评论 -
17.CSS-浮动
文章目录浮动1.浮动流排版方式2.浮动元素的脱标（1）什么是浮动元素的脱标？（2）浮动元素脱标了之后会有什么影响？3.浮动元素的排序规则4.浮动元素的贴靠现象5.浮动元素的字围现象6.浮动元素的高度问题7.清除浮动的方式浮动1.浮动流排版方式浮动流是一种半脱离标准流的排版方式；浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐；注意点：浮动流中没有居中对齐，也就是没有center这个值；在浮动流中是不可以使用margin：0 auto；的。特点：在浮动流中是不区分块原创 2021-07-16 17:16:04 · 206 阅读 · 0 评论 -
16.CSS-行高和字号
文章目录行高1.什么是行高3.注意点字号注意点行高1.什么是行高在CSS中所有的行都有自己的行高，3.注意点行高和盒子的高不是同一个概念，行高是指这一行内容的高度，盒子的高是指这个标签的高。规律：1.文字在行高中默认是垂直居中的；2.在企业开发中我们经常将盒子的高度和行高设置成一样，那么就可以保证一行文字在合资的高度中是垂直居中的，简而言之就是：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可。该方法只适用于一行文字，遇到多行文字的情况时，只能使用padding。原创 2021-07-16 17:13:57 · 403 阅读 · 0 评论 -
CSS-overflow:hidden；
overflow:hidden;的作用1.将超出标签范围的内容裁剪掉2.清除浮动给第一个盒子设置overflow: hidden;属性.box1{ background-color: red; /*margin-bottom: 10px;*/ overflow: hidden; }3.让里面的盒子设置margin-top之后外面的盒子不被顶下来如果两个盒子嵌套，当里面的盒子设置了 margin-top: 20px; 外面的盒子也会被顶下来。那么如原创 2021-07-16 17:13:14 · 362 阅读 · 0 评论 -
18.CSS-伪元素选择器
文章目录伪元素选择器1.什么是伪元素选择器？2.格式伪元素选择器1.什么是伪元素选择器？伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。2.格式标签名称::before{属性名称：值；}含义：给指定标签的内容前面添加一个子元素。标签名称::after{属性名称：值；}含义：给指定标签的内容后面添加一个子元素。例如：div::before{ display: block; content: "爱你";原创 2021-07-16 16:35:57 · 173 阅读 · 0 评论 -
15.CSS-盒子模型
文章目录CSS盒子模型盒子模型宽度和高度1.内容的宽度和高度2.元素的宽度和高度3.元素空间的宽度和高度盒子box-sizing属性1.取值2.注意点text-align:center和margin:0 auto;的区别CSS盒子模型在HTML中，所有的标签都可以设置宽度/高度、内边距、边框、外边距，HTML中所有的标签都是盒子。宽度/高度（蓝色）：指定可以存放内容的区域。内边距（绿色）边框（黄色）外边距（橘色）盒子模型宽度和高度1.内容的宽度和高度内容的宽度和高度就是通过标签的widt原创 2021-07-15 11:26:52 · 270 阅读 · 0 评论 -
14.CSS-边框属性、内边距属性和外边距属性
文章目录边框属性1.什么是边框？2.边框属性的格式2.1连写（同时设置四条边的边框）2.2连写（分别设置四条边的边框）2.1和2.2注意点2.3连写（分别设置四条边的边框）2.3注意点2.4非连写（方向+要素）边框属性1.什么是边框？边框就是环绕在标签宽度和高度周围的线条2.边框属性的格式border的属性：border-widthborder-styleborder-colorborder-style的取值none 定义无边框。dotted 定义点状边框。在大多数浏览器中呈现为实线。原创 2021-07-14 17:16:49 · 1674 阅读 · 0 评论 -
13.CSS-精灵图
文章目录CSS精灵图1.什么是CSS精灵图？2.CSS精灵图的作用3.如何使用CSS精灵图的作用CSS精灵图1.什么是CSS精灵图？CSS精灵图是一种图像合成技术。2.CSS精灵图的作用可以减少请求的次数，降低服务器处理压力。3.如何使用CSS精灵图的作用CSS的精灵图需要配合背景图片和背景定位来使用。配合画图工具来测量像素。例如：<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2021-07-14 15:49:01 · 149 阅读 · 0 评论 -
12.CSS-背景设置
文章目录背景颜色背景图片背景平铺属性背景定位关联方式背景属性缩写背景图片和插入图片的区别背景颜色如何设置标签的背景颜色？在CSS中有一个background-color:属性，就是专门用来设置标签的背景颜色的。取值：具体单词rgbrgba十六进制背景图片如何设置背景图片？在CSS中有一个background-image: url("");属性，就是专门用于设置背景图片的。注意点：1.图片地址必须放在url("")中，图片地址可以是本地的地址，也可以是网络的地址；2.如果图片的大小原创 2021-07-14 15:01:08 · 237 阅读 · 0 评论 -
简易百度首页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>32-百度首页</title> <style> body{ font-size: 14px; color: #666666; font-family: "宋体"; } di转载 2021-07-14 10:13:16 · 217 阅读 · 0 评论 -
11.CSS-元素显示模式
文章目录CSS元素显示模式1.什么是块级元素和行内元素？2.块级元素和行内元素的区别？3.元素显示模式转换在HTML中HTML将所有的标签分为两类，分别是容器级和文本级。在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素。CSS元素显示模式1.什么是块级元素和行内元素？块级元素会独占一行，行内元素不会独占一行容器级的标签：div，h，ul，ol，dl，li，dt，dd…；文本级的标签：span，p，b，u，i，s，strong，em，ins，del…块级元素（所有的容器级标签+原创 2021-07-14 09:28:44 · 119 阅读 · 0 评论 -
15.HTML基础——div和span标签
文章目录div标签作用span标签作用div标签和span标签区别div标签作用一般用于配合css完成网页的基本布局。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>29-div和span标签</title> <style> .header{ width: 980原创 2021-07-13 16:43:07 · 355 阅读 · 0 评论 -
10.CSS-三大特性
文章目录CSS三大特性继承性作用注意点应用场景层叠性作用注意点优先级作用优先级判断的三种方式!important权重问题CSS三大特性继承性作用给父元素设置一些属性，子元素也可以使用，我们称之为继承性。注意点1.并不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承；2.在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承；3.CSS继承性中的特殊性：a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的应用场景一般用于原创 2021-07-13 16:14:00 · 128 阅读 · 0 评论 -
9.CSS-属性选择器
文章目录属性选择器作用格式属性的取值是以什么开头的属性的取值是以什么结尾的属性的取值是否包含某个特定的值属性选择器作用根据指定的属性名称找到对应的标签，然后设置属性。格式[attribute] 作用：根据指定的属性名称找到对应的标签，然后设置属性。例如：p[id]{ color: red; }含义：先找到所有的p标签，在p标签中找到有id属性的，然后设置属性。[attribute=value]作用：找到有指定属性，并且属性的取值等于value的原创 2021-07-13 11:24:46 · 154 阅读 · 0 评论 -
8.CSS-序选择器
文章目录序选择器同级别的第几个:first-child:last-childnth-child(n):nth-last-child(n):only-child同类型的第几个:first-of-type:last-of-typenth-of-type(n):nth-last-of-type(n):only-of-type序选择器CSS3中新增的选择器中最具代表性的就是序选择器。同级别的第几个:first-child选中同级别中的第一个标签。注意点：不区分类型:last-child选中同级别中的原创 2021-07-13 10:37:12 · 355 阅读 · 0 评论 -
7.CSS-交集选择器、并集选择器、兄弟选择器
文章目录*交集选择器作用格式注意点并集选择器作用格式注意点相邻兄弟选择器作用格式注意点通用兄弟选择器作用格式注意点*交集选择器作用给所有选择器选中的标签中，相交的那部分设置属性。格式选择器1 选择器2{ 属性：值；}注意点1.选择器和选择器之间没有任何连接符号；2.选择器可以使用标签名称/id名称/class名称；3.仅了解。并集选择器作用给所有选择器选中的标签设置属性。格式选择器1，选择器2{属性：值；}注意点1.并集选择器必须使用，来连接；2.选择器可以使用原创 2021-07-13 09:25:32 · 2031 阅读 · 0 评论 -
6.CSS-后代选择器和子元素选择器
文章目录后代选择器作用格式注意点子元素选择器作用格式注意点后代选择器和子元素选择器的异同区别共同点企业开发中如何选择后代选择器作用找到指定标签的所有后代标签，然后设置属性。格式标签名称1 标签名称2{ 属性：值；}例如：div p{ color: red; }含义：先找到名称叫做标签名称1的标签，然后再在这个标签下面去查找所有名称叫做标签名称2的标签，然后设置属性。注意点1.后代选择器必须用空格隔开；2.后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放在指原创 2021-07-12 22:55:39 · 4695 阅读 · 0 评论 -
5.CSS-标签选择器、id选择器和类选择器
文章目录标签选择器作用格式注意点id选择器作用格式注意点类选择器作用格式注意点id和class的区别id选择器和class选择器的区别标签选择器作用根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。格式标签名称{ 属性：值；}注意点1.标签选择器选中的是当前界面中的所有的标签，而不能单独选中一个标签；2.标签选择器无论标签藏得多深都能被选中；3.只要是HTML中的标签就可以作为标签选择器。id选择器作用根据指定的id名称找到对应的标签，然后设置属性。格式#原创 2021-07-12 22:18:25 · 2588 阅读 · 0 评论 -
*4.CSS-颜色控制属性
文章目录颜色控制属性1 英文单词2 rgb3 rgba4 十六进制5 十六进制缩写颜色控制属性在CSS中如何通过color属性来修改文字颜色格式：color：值;取值：1 英文单词一般情况下常见的颜色都有对应的英文单词，但是英文单词能够表达的颜色是有限制的，也就是说不是所有的颜色都能够通过英文单词来表达格式：color:red;2 rgb三原色，其中r：（red红色），g（green绿色），b（blue蓝色）格式：color: rgb(255,0,0);（红色）color: rgb(原创 2021-07-11 18:37:14 · 352 阅读 · 0 评论 -
3.CSS-文本属性
文章目录文本属性1.文本装饰的属性2.文本水平对齐的属性3.文本缩进的属性文本属性1.文本装饰的属性格式：text-decoration: underline;取值：underline：下划线line-through：删除线overline：上划线none：什么都没有，最常见的用途就是用于去掉超链接的下划线快捷键：td+tab——>text-decoration:tdu+tab——>text-decoration: underline;2.文本水平对齐的属性格式：tex原创 2021-07-11 17:34:25 · 135 阅读 · 0 评论 -
2.CSS-文字属性
文章目录一.什么是文字属性？1.规定文字样式的属性2. 规定文字粗细的属性3. 规定文字大小的属性4. 规定文字字体的属性文字属性的简写一.什么是文字属性？1.规定文字样式的属性格式：font-style: italic；取值：normal：正常（默认就是正常）italic：倾斜快捷键：fs+tab——>font-style: italic;fsn+tab——>font-style: normal;2. 规定文字粗细的属性格式：font-weight: bold;单词取原创 2021-07-11 17:18:41 · 466 阅读 · 0 评论 -
1.CSS-固定格式
文章目录CSS1.CSS的作用2.CSS的固定格式CSS1.CSS的作用通过标签来修改样式的缺点：1.需要记忆那些标签有哪些属性，如果该标签没有这个属性，那么设置了也没有效果；2.当需求变更时我们需要修改大量的代码才能满足现有的需求；3.HTML只有一个作用就是用来添加语义。所以在企业开发中修改样式都是交给CSS来做的。通过css来修改样式的好处：1.不用记忆哪些属性属于哪个标签；2.当需求变更时不需要修改大量的代码就可以满足需求；3.在前端开发中CSS只有一个作用，就是用来修改样式。原创 2021-07-11 13:11:34 · 425 阅读 · 0 评论