![](https://img-blog.csdnimg.cn/20210804111746599.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML与CSS
文章平均质量分 91
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
℡☞
我就是个小菜鸡,又菜又垃圾
展开
-
12-animation动画
1 过渡和动画之间的异同1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画1.2相同点 过渡和动画都是用来给元素添加动画的 过渡和动画都是系统新增的一些属性 过渡和动画都需要满足三要素才会有动画效果2 动画的元素(1)animation-name 动画名称指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画div{ animation-name: leftToRight;}/* 新建动画的关原创 2021-08-19 10:58:27 · 86 阅读 · 0 评论 -
11-transition过渡
过渡三要素必须要有属性发生变化必须告诉系统哪个属性需要执行过渡效果必须告诉系统过渡效果持续时长过渡的元素(1)transition-property CSS 属性的名称 none 没有属性会获得过渡效果 all 所有属性都将获得过渡效果 property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔/* 告诉CSS width, background-color要添加过渡效果*/ transition-property:width,backgrou原创 2021-08-19 10:53:45 · 62 阅读 · 0 评论 -
10-CSS布局之flex布局
1 flex布局Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。2 基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。每根轴都有起点和终点,这对于元素的对齐非常重要。弹性容器中的所有子元素称为<弹性元素>原创 2021-08-19 10:48:37 · 784 阅读 · 0 评论 -
9-CSS布局之定位布局
文章目录1 静态定位2 相对定位注意3 绝对定位参考点注意子绝父相设置水平垂直居中4 固定定位注意5 粘滞定位注意z-index注意z-index注意1 静态定位默认定位方式,意味着将一个元素定位在默认文档流中position:static2 相对定位相对于其原本的位置来定位position: relative;注意相对定位是不脱离标准流的, 会继续在标准流中占用一份空间在相对定位中同一个方向上的定位属性只能使用一个由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行原创 2021-08-19 10:46:17 · 69 阅读 · 0 评论 -
8-CSS布局之浮动布局
文章目录1 浮动2 排版方式(1)字围现象(2)高度塌陷块级元素父子级,给子级设置浮动,为什么父级会受到影响?清除浮动(3)BFC两栏自适应布局三栏自适应布局1 浮动浮动布局用来解决块元素在x轴上排列的问题如果希望块元素在页面中水平排列,可以使块元素脱离标准流(文档流/普通流),使用float来使元素浮动,从而脱离标准流(文档流/普通流)可选值: none,默认值,元素默认在标准流(文档流/普通流)中排列 left,元素会立即 脱离标准流(文档流/普通流),向页面的左侧浮动 rig原创 2021-08-19 10:44:18 · 279 阅读 · 0 评论 -
HTML与CSS重构网易严选页面
花了两天时间利用html与CSS重构的网易严选的页面,在次纪念一下,以下展示部分代码,完整代码可见下方链接或者联系我头部导航栏<!-- 头部导航栏 --><div class="siteNav"> <div class="g-row"> <div class="navLeft"> <div class="icon"></div> <a href="#..原创 2021-08-18 19:29:11 · 1156 阅读 · 0 评论 -
7-CSS盒模型
文章目录1 盒子组成(1)外边距 margin上外边距 margin-top、下外边距 margin-bottom、左外边距 margin-left、右外边距 margin-right连写 margin: 上 右 下 左;(2)边框border边框宽度 border-width边框样式 border-style边框颜色 border-color圆角边框 border-radious连写 border: 边框的宽度 边框的样式 边框的颜色;(3)内边距padding上内边距 padding-top、下内边原创 2021-08-17 16:40:36 · 49 阅读 · 0 评论 -
6-CSS字体及文本样式
1 文本属性1.1 color 为字体指定颜色格式:color:值取值类型:(1)英文单词 颜色对应的英文单词,如red(红色)、blue、green、yellow、black…等(2)rgb rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) 格式: rgb(0,0,0)(rgb中每个数字的取值为0-255)红色: rgb(255,0,0);绿色: rgb(0,255,0);蓝色: rgb(0,0,255)原创 2021-08-17 15:23:07 · 374 阅读 · 0 评论 -
5-CSS三大特性
CSS三大特性(1)继承性作用: 子元素可以继承父元素的样式注意:不是所有元素都可以继承,只有以text-,font-,line-这些元素开头的都可以继承,以及color属性CSS继承中不仅仅是儿子可以继承, 只要是后代都可以继承特殊性:a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的<div class="div1"> <a href="#">百度一下</a> <h1>我是一个h标签</h1原创 2021-08-17 15:04:50 · 45 阅读 · 0 评论 -
4.1-CSS引入方式
1 CSS概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。2 CSS的引入方式(1)内联样式(行内样式)把css代码直接写在现有的HTML标签,样式的内容写在元素的开始标签中<div styl原创 2021-08-16 19:29:43 · 52 阅读 · 0 评论 -
03-HTTP协议
1 HTTP协议超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信。HTTP报文分类:1.1 请求报文(1)定义:客户端向服务端发送请求的信号(2)组成:请求行、请求头、空行、请求体(3)请求格式1. 请求行:GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT,其中GET、POST最为常原创 2021-08-04 20:07:59 · 132 阅读 · 0 评论 -
02-功能元素
1 功能元素1.1 列表标签作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体分类:无序列表(最多)、有序列表(一般)、自定义列表(最少)1.1.1 无序列表一个没有特定顺序的列表项的集合(新闻列表、商品列表、导航栏)<!--格式--><ul> <li>列表项</li></ul>样式:ul无序列表 标签 的type类型属性 的属性值属性值样式disc(默认值)原创 2021-08-04 20:00:03 · 305 阅读 · 0 评论 -
01-HTML与CSS
1 HTML与CSS1.1 什么是HTML?什么是CSSHTML(HyperText MarkUp Language)超文本标记语言HTML 不是一种编程语言,而是一种标记语言 (markup language)他是通过使用标记来描述文档结构以及表现形式的一种语言,然后由浏览器进行解析,最终把结果显示在网页上,它是网页构成的基础。HTML特点: 1.简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 2.可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超原创 2021-08-04 11:27:41 · 527 阅读 · 0 评论