HTML+CSS
文章平均质量分 88
HTML和CSS总结
Hydrion-Qlz
啥都想学又都没时间开始的大学牲
(如需博客中某文件pdf或者是需要什么资源可直接邮箱联系
展开
-
CSS -- 网站TDK三大标签SEO优化
TDK:Title, Description, Keywords**SEO(Search Engine Optimization)**汉译为**搜索引擎优化**,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是**对网站进行深度的优化**,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。页面必须有三个标签用来符合 SEO 优化。## 1 title 网站标题title 具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解原创 2022-12-22 08:55:49 · 367 阅读 · 0 评论 -
CSS -- 使用纯CSS实现旋转木马相册的效果
旋转木马图片相册如果对3D转换不熟悉可以参考:[CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)]> 如果对动画不熟悉可以参考:[CSS -- CSS3基础动画讲解原创 2022-12-22 08:54:04 · 597 阅读 · 0 评论 -
CSS -- 使用纯CSS实现旋转立方体的效果
旋转立方体:鼠标经过盒子自动翻转出来下面,离开时翻转回去如果对3D转换不熟悉可以先看:[CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)原创 2022-12-22 08:51:49 · 485 阅读 · 0 评论 -
CSS -- 使用纯CSS实现鼠标悬浮盒子自动翻转的效果
两面翻转的盒子,鼠标悬浮盒子自动翻转效果如果对3D转换不熟悉可以先看:[CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)]原创 2022-12-22 08:50:28 · 561 阅读 · 0 评论 -
CSS -- CSS3中3D转换相关属性讲解(translate3d,rotate3d,perspective,transform-style)
3D转换1 三维坐标系2 3D移动 translate3d3 透视 perspective4 3D 旋转 rotate3d5 3D旋转 rotate3d6 3D呈现 transform-style7 3D案例3D转换我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。3D特点:近大远小。物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。1 三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。x轴:水平向右 注意原创 2022-12-22 08:47:58 · 3257 阅读 · 0 评论 -
CSS -- CSS3基础动画讲解
CSS 3动画 **动画(animation)**是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。### 1 动画的基本使用制作动画分为两步:1. 先定义动画2. 再使用动画**用keyframes定义动画**(类似定义类选择器)原创 2022-12-22 08:45:00 · 444 阅读 · 0 评论 -
CSS -- 2D转换各属性讲解(translate,rotate,scale)
2D转换转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果转换(transform)你可以简单理解为变形移动:translate旋转:rotate缩放:scale1 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系原创 2022-12-22 08:43:18 · 525 阅读 · 0 评论 -
CSS -- CSS使用过渡(transition)添加动画
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。**过渡动画: 是从一个状态 渐渐的过渡到另外一个状态**可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本),但是不会影响页面布局。我们现在经常和`:hover` 一起 搭配使用。语法:```csstransition: 要过渡的属性 花费时间 运动曲线 何时开始;```原创 2022-12-22 08:40:29 · 1507 阅读 · 0 评论 -
CSS -- CSS选择器精讲(基础选择器,符合选择器,属性选择器,结构伪类选择器,伪选择器)
1 CSS基础选择器1.1 选择器的分类1.2 标签选择器1.3 类选择器1.4 id选择器1.5 通配符选择器1.6 基础选择器总结2 CSS的复合选择器2.1 什么是复合选择器2.2 后代选择器2.3 子选择器2.4 并集选择器2.5 伪类选择器2.6 链接伪类选择器2.7 :focus 伪类选择器2.8 复合选择器总结3 属性选择器4 结构伪类选择器4.1 选择第n个孩子4.2 nth-child(n)4.3 nth-of-type()4.4 nth-chi原创 2022-12-22 08:39:17 · 427 阅读 · 0 评论 -
CSS -- 10. 移动WEB开发之rem布局
移动WEB开发之rem布局1 rem基础2 媒体查询2.1 什么是媒体查询2.2 语法规范2.3 mediatype 查询类型2.4 关键字2.5 媒体特性2.6 案例:根据页面宽度改变背景颜色2.7 媒体查询+rem实现元素动态大小变化2.8 针对不同的屏幕尺寸引入不同的样式文件3 Less基础3.1 维护css的弊端3.2 Less介绍3.3 Less的变量3.4 Less的编译3.5 Less的嵌套3.6 Less的运算4 rem适配方案4.1 rem实际开发适配原创 2022-12-21 18:49:47 · 799 阅读 · 0 评论 -
CSS -- 09. 移动WEB开发之flex布局
移动WEB开发之flex布局1 flex布局原理2 常见的父项属性2.1 设置主轴方向 flex-direction2.2 设置主轴上的子元素排列方式 justify-content2.3 设置元素是否换行 flex-wrap2.4 设置侧轴上的子元素的排列方式(单行) align-items2.5 设置侧轴上的子元素的排列方式(多行) align-content2.6 flex-flow3 flex布局子项常见属性3.1 flex属性3.2 控制子项自己在侧轴上的排列方式 align原创 2022-12-21 18:48:18 · 331 阅读 · 0 评论 -
CSS -- 08. 移动WEB开发之流式布局
移动WEB开发之流式布局1 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 移动端调试方法2 视口2.1 布局视口 layout viewport2.2 视觉视口 visual viewport2.3 理想视口 ideal viewport2.4 meta视口标签3 二倍图3.1 物理像素&物理像素比3.2 多倍图3.3 背景缩放 background-size4 移动端开发选择4.1 单独移动端页面(主流)4.2 响应式兼容PC移动端5 移动端常见布局5.1 流原创 2022-12-21 18:47:43 · 364 阅读 · 1 评论 -
CSS -- 07. CSS3新特性汇总(属性选择器,结构伪类,伪元素,过渡效果,动画,2D3D转换效果)
CSS 3的新特性1 CSS 3的现状2 属性选择器3 结构伪类选择器3.1 选择第n个孩子3.2 nth-child(n)3.3 nth-of-type()3.4 nth-child和nth-of-type的区别3.5 结构伪类选择器小结4 伪元素选择器4.1 案例:经过盒子显示遮罩层4.2 伪元素清除浮动5 CSS 3盒子模型6 CSS 3 的其他特性6.1 CSS 3 滤镜filter6.2 CSS 3的calc函数7 CSS 3过渡8 2D转换8.1 二维坐标系原创 2022-12-21 18:45:38 · 329 阅读 · 0 评论 -
CSS -- CSS设置鼠标样式(小手,移动,文本,禁止)
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。可以拷贝自己试试效果。原创 2022-12-12 22:46:26 · 434 阅读 · 0 评论 -
CSS -- CSS设置溢出文本显示省略号
多行文本溢出显示省略号,有较大兼容性问题, 只适合于webKit浏览器或移动端(移动端大部分是webkit内核)更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。原创 2022-12-12 22:43:24 · 281 阅读 · 0 评论 -
CSS -- 使用纯CSS绘制三角形及常见案例汇总
网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标给每个边框不同的颜色可以看到,每个边框其实都是一个小三角形,那么我们就可以只设置一个或两个边框从而让一个盒子呈现出来三角形的样式原创 2022-12-12 22:41:52 · 347 阅读 · 0 评论 -
CSS -- 在网页中使用字体图标(icon-font)
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的,但是缺点很明显。图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体原创 2022-12-12 22:38:01 · 1097 阅读 · 0 评论 -
CSS -- 精灵图(sprites)的讲解及使用方法
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,**为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,**出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。目的:为了有效减少服务器接受和发送请求的次数,提高页面的加载速度原创 2022-12-12 22:35:59 · 642 阅读 · 0 评论 -
CSS -- 06. CSS高阶技巧总结
CSS高阶技巧1 精灵图(sprites)1.1 为什么使用精灵图1.2 精灵图的使用2 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加3 CSS三角形4 CSS用户界面样式4.1 鼠标样式 cursor4.2 表单的轮廓线4.3 防止拖拽文本域 resize5 vertical-align属性应用5.1 图片、表单和文字对齐5.2 解决图片底部默认空白缝隙问题6 溢出的文字省略号显示6.1 单行文原创 2022-12-12 22:33:12 · 383 阅读 · 0 评论 -
CSS -- 05. CSS定位方式总结
1.1 为什么需要定位1.2 定位组成1.3 静态定位 static(了解)1.4 相对定位 relative(重要)1.5 绝对定位 absolute(重要)1.6 子绝父相1.7 固定定位 fixed(重要)1.8 粘性定位 sticky(了解)1.9 定位的总结1.10 定位叠放次序 z-index原创 2022-12-12 22:30:49 · 296 阅读 · 0 评论 -
CSS -- CSS背景设置总结(纯色背景、背景图片)
CSS的背景1 背景颜色2 背景图片3 背景平铺4 背景图片位置5 背景图像固定(背景附着)6 背景复合写法7 背景色半透明8 背景设置总结CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1 背景颜色background-color 属性定义了元素的背景颜色background-color: 颜色值;一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定原创 2022-12-10 23:20:30 · 3036 阅读 · 0 评论 -
CSS -- CSS元素显示模式总结(块元素,行内元素,行内块元素)
CSS 的元素显示模式1 什么是元素显示模式2 块元素3 行内元素4 行内块元素5 元素的显示模式总结CSS 的元素显示模式1 什么是元素显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个。HTML 元素一般分为块元素和行内元素两种类型。原创 2022-12-10 23:18:36 · 424 阅读 · 0 评论 -
CSS -- CSS复合选择器总结
CSS的复合选择器1 什么是复合选择器2 后代选择器3 子选择器4 并集选择器5 伪类选择器6 链接伪类选择器7 :focus 伪类选择器8 复合选择器总结CSS的复合选择器1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器原创 2022-12-10 23:17:08 · 348 阅读 · 0 评论 -
CSS -- CSS字体及文本属性设置总结
1 CSS字体属性1.1 字体系列1.2 字体大小1.3 字体粗细1.4 文字样式1.5 字体复合属性1.6 字体属性总结2 CSS文本属性2.1 文本颜色2.2 对齐文本2.3 装饰文本2.4 文本缩进2.5 行间距2.6 文本属性总结1 CSS字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。1.1 字体系列CSS 使用 font-family 属性定义文本的字体系列。原创 2022-12-10 23:15:40 · 1389 阅读 · 0 评论 -
CSS -- CSS各种选择器总结
CSS基础选择器1 选择器的分类2 标签选择器3 类选择器4 id选择器5 通配符选择器6 基础选择器总结CSS基础选择器CSS 选择器参考手册 (w3school.com.cn)选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。1 选择器的分类选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。基础选择器是由单个选择器组成的基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器2 标签选择器原创 2022-12-10 23:11:45 · 96 阅读 · 0 评论 -
CSS -- 04. CSS浮动总结
CSS浮动1 浮动1.1 传统网页布局的三种方式1.2 标准流(普通流/文档流)1.3 为什么需要浮动1.4 什么是浮动1.5 浮动特性1.6 浮动元素经常和标准流父级搭配使用2 常见网页布局2.1 常见网页布局2.2 浮动布局注意点3 清除浮动3.1 为什么要清除浮动3.2 清除浮动本质3.3 额外标签法3.4 父级添加 overflow3.5 :after 伪元素法3.6 双伪元素清除浮动3.7 清除浮动总结原创 2022-12-10 23:10:21 · 134 阅读 · 0 评论 -
CSS -- 03. CSS盒子模型
盒子模型1 盒子模型1.1 看透网页的本质1.2 盒子模型组成1.3 边框1.4 表格的细线边框1.5 边框会影响盒子实际大小1.6 内边距(padding)1.7 外边距(margin)1.8 外边距合并1.9 清除内外边距2 圆角边框3 盒子阴影4 文字阴影盒子模型页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面原创 2022-12-10 23:08:48 · 309 阅读 · 0 评论 -
CSS - 02. CSS进阶
CSS进阶1 Emmet语法1.1 快速生成HTML结构语法1.2 快速生成CSS样式语法1.3 快速格式化代码2 CSS的复合选择器2.1 什么是复合选择器2.2 后代选择器2.3 子选择器2.4 并集选择器2.5 伪类选择器2.6 链接伪类选择器2.7 :focus 伪类选择器2.8 复合选择器总结3 CSS 的元素显示模式3.1 什么是元素显示模式3.2 块元素3.3 行内元素3.4 行内块元素3.5 元素的显示模式总结3.6 元素的显示模式转换4 CSS的背原创 2022-12-10 23:06:43 · 346 阅读 · 0 评论 -
CSS -- 01. CSS基础
1 CSS简介1.1 HTML的局限性1.2 CSS介绍1.3 CSS语法规范1.4 CSS代码风格2 CSS基础选择器2.1 选择器的分类2.2 标签选择器2.3 **类选择器**2.4 id选择器2.5 通配符选择器2.6 基础选择器总结3 CSS字体属性3.1 字体系列3.2 字体大小3.3 字体粗细3.4 文字样式3.5 字体复合属性3.6 字体属性总结4 CSS文本属性4.1 文本颜色4.2 对齐文本4.3 装饰文本4.4 文本缩进4.5 行间距4原创 2022-12-10 23:05:33 · 444 阅读 · 0 评论 -
HTML -- 常用标签及示例总结
1 标签语义1.1 标签属性2 标题标签 h1 - h63 段落和换行标签3.1 段落标签3.2 换行标签4 文本格式化标签5 div和span6 图像标签7 超链接标签7.1 链接的语法格式7.2 链接分类8 表格标签8.1 表格的主要作用8.2 表格的基本语法8.3 表头单元格标签8.4 表格属性8.5 表格结构标签8.6 合并单元格9 列表标签9.1 无序列表9.2 有序列表9.3 自定义列表10 表单标签10.1 为什么需要表单10.2 表单的组成原创 2022-12-09 16:45:55 · 802 阅读 · 0 评论 -
HTML -- 一文学会HTML及常用标签
1. HTML简介1.1 网页1.1.1 什么是网页1.1.2 什么是HTML1.1.3 网页的形成1.2 常用浏览器1.2.1 常见的浏览器1.2.2 浏览器内核1.3 Web标准1.3.1 为什么需要Web标准1.3.2 Web标准的构成2. HTML基础2.1 HTML语法规范2.1.1 基本语法规范2.1.2 标签关系2.2 HTML基本结构标签2.2.1 第一个HTML标签2.2.2 基本结构标签总结2.3 开发工具2.3.1 文档类型声明标签2.3.2 l原创 2022-12-09 16:45:06 · 652 阅读 · 0 评论