![](https://img-blog.csdnimg.cn/94e00c5433fa476faea976a916d31db3.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
《HTML5+CSS3》第一站
文章平均质量分 61
十年磨一剑!
程序员shy
2021年CSDN博客之星参与奖,「 游戏人生 」系列作者,立志写傻瓜也能看懂的技术文章,博客目标打造前端程序员从小白到大师全流程学习路线。有问题可私聊
展开
-
综合案例:热点图案例,打字案例,奔跑的熊大,两面翻转的盒子,3D导航栏,旋转木马案例
综合案例:热点图案例,打字案例,奔跑的熊大,两面翻转的盒子,3D导航栏,旋转木马案例原创 2022-04-28 00:34:13 · 185 阅读 · 0 评论 -
动画(定义动画,调用动画,动画属性,动画简写属性,速度曲线调节),3D转换(三维坐标系,3D移动translate3d,透视perspective,3D旋转rotate3d),3D呈现,浏览器私有前缀
动画(定义动画,调用动画,动画属性,动画简写属性,速度曲线调节),3D转换(三维坐标系,3D移动translate3d,透视perspective,3D旋转rotate3d),3D呈现transform-style,浏览器私有前缀原创 2022-04-28 00:31:49 · 167 阅读 · 0 评论 -
综合案例:CSS3书写三角,旋转案例,图片放大案例,分页按钮
CSS3书写三角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2022-04-21 17:14:35 · 107 阅读 · 0 评论 -
2D转换(移动:translate,旋转:rotate,缩放:scale,2D转换综合写法)
2D转换transform是CSS3中最具有颠覆性的特性之一,可以实现元素的位移、旋转、缩放等效果移动:translate旋转:rotate缩放:scale2D转换是改变标签在二维平面上位置和形状的一种技术移动:translate2D移动是2D转换中的一种功能,可以改变元素的位置,类似定位translate不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的对行内标签没有效果transform: translate(x,y);或者分开写原创 2022-04-21 17:14:08 · 953 阅读 · 0 评论 -
综合案例:品优购项目(品优购项目流程,SEO优化,TDK三大标签,代码)后期逐步优化
品优购项目原创 2022-04-19 19:44:37 · 785 阅读 · 0 评论 -
综合案例:伪元素(字体图标,仿土豆效果,清除浮动)
伪元素字体图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2022-04-14 16:40:02 · 279 阅读 · 2 评论 -
CSS新特性(CSS新增选择器(属性选择器,结构伪类选择器,伪元素选择器),伪元素清除浮动,CSS3盒子模型,CSS3滤镜filter,计算盒子宽度calc 函数,CSS3 过渡动画)
CSS新特性(CSS新增选择器(属性选择器,结构伪类选择器,伪元素选择器),伪元素清除浮动,CSS3盒子模型,CSS3滤镜filter,计算盒子宽度calc 函数,CSS3 过渡动画)原创 2022-04-14 16:39:59 · 123 阅读 · 0 评论 -
HTML5新特性(语义化标签,多媒体标签(视频标签,音频标签),input表单元素)
HTML5新特性HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性语义化标签以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的发展到了HTML5后,新增了一些语义化标签,这样的话更加有利于浏览器的搜索引擎搜索,也方便了网站的seo(Search Engine Optimization,搜索引擎优化),下面就是新增的原创 2022-04-13 16:42:15 · 345 阅读 · 0 评论 -
溢出的文字省略号显示(单行文本溢出显示省略号,多行文本溢出显示省略号(了解)),常见布局技巧(margin负值运用,文字围绕浮动元素),CSS初始化
溢出的文字省略号显示单行文本溢出显示省略号单行文本溢出显示省略号--必须满足三个条件: /*1. 先强制一行内显示文本*/ white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;多行文本溢出显示省略号(了解)多行文本溢出显示省略号,有较大兼容性问题,适合于webK原创 2022-04-11 11:08:58 · 188 阅读 · 0 评论 -
精灵图,字体图标iconfont,CSS三角,CSS用户界面样式(什么是界面样式,鼠标样式cursor,轮廓线,防止拖拽文本域),vertical-align 属性应用,解决图片底部默认空白缝隙问题
精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中这个大图片也称为 spr原创 2022-04-11 09:34:55 · 152 阅读 · 0 评论 -
综合案例:拼出自己名字,京东三角,行内块巧妙运用,CSS 三角强化,CSS 三角强化二
拼出自己名字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-04-11 16:17:40 · 125 阅读 · 0 评论 -
元素显示和隐藏
元素显示和隐藏目的(本质):让一个元素在页面中消失或者显示出来场景:类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!display 显示display 设置或检索对象是否及如何显示display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思特点: display 隐藏元素后,不再占有原来的位置后面应用及其广泛,搭配 JS 可以做很多的网页特效。实际开发场景:下拉菜单,鼠标经过触发visibilit原创 2022-04-10 11:24:57 · 163 阅读 · 0 评论 -
综合案例:淘宝焦点图,土豆案例
淘宝焦点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2022-04-06 15:39:33 · 135 阅读 · 0 评论 -
定位的应用(固定定位小技巧:固定在版心右侧,堆叠顺序),定位的拓展(绝对定位的盒子居中,定位特殊特性,脱标的盒子不会触发外边距塌陷,绝对定位(固定定位)会完全压住盒子)
定位的应用固定定位小技巧:固定在版心右侧小算法:让固定定位的盒子left: 50%;走到浏览器可视区的一般(版心)一半位置让固定定位的盒子margin-left: 版心宽度的一般距离,多走版心宽度的一半位置...原创 2022-03-29 16:31:36 · 389 阅读 · 0 评论 -
定位(定位组成【定位模式(静态定位,相对定位,绝对定位,固定定位,粘性定位,定位总结),位偏移】,)
定位定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子定位也是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式选择器 { position: 属性值;}定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:静态定位(...原创 2022-03-26 21:19:47 · 1375 阅读 · 0 评论 -
综合案例:学成在线
页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title转载 2022-03-24 21:34:53 · 148 阅读 · 0 评论 -
CSS属性书写顺序
CSS属性书写顺序(重点)生活中衡量一个人有气质:穿着打扮 举止言行 等等编程中如何衡量一个人的代码能力:规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验..建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式) 自身属性:width / height / margin / padding / border原创 2022-03-23 17:03:49 · 171 阅读 · 0 评论 -
清除浮动(为什么需要清除浮动,清除浮动本质,清除浮动样式),清除浮动的多种方法(额外标签法,父级添加 overflow 属性,父级添加after伪元素,父级添加双伪元素,总结),PS插件切图
清除浮动为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子清除浮动本质清除浮动的本质是清除浮动元素造成的影响:浮动的子标签无法撑开父盒子的高度如果父盒子本身有高度,则不需要清除浮动清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了清除浮动样式选择器{clear:属性值;}我们实际工作中, 几乎只用 clear: both;清...原创 2022-03-23 16:43:24 · 247 阅读 · 0 评论 -
综合案例:小米布局案例,小米布局案例二,小米布局案例三
小米布局案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-03-17 17:20:33 · 613 阅读 · 0 评论 -
圆角边框,盒子阴影(鼠标经过显示阴影),文字阴影,网页布局(普通流(标准流/文档流),浮动,(浮动特性,浮动元素通常和标准流父级搭配使用,常见网页布局,浮动布局注意点,))
圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了border-radius 属性用于设置元素的外边框圆角border-radius:length; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:border-top-left-radius、border-top-right-radius、border-原创 2022-03-23 14:28:14 · 322 阅读 · 0 评论 -
综合案例:新浪微博导航栏,产品模块,快报模块
新浪微博导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2022-03-15 15:43:05 · 205 阅读 · 0 评论 -
CSS的三大特性(层叠性,继承性,优先级),CSS盒子模型(边框(边框复合写法,边框分开写发,表格的细线边框),内边距,外边距(外边距典型应用,外边距合并塌陷,清除内外边距))
CSS的三大特性层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠继承性CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。子元素可以继承父元素的样式:(text-,font-,line-这些元素开头的可以继承,以及color属性)行高的继承性:原创 2022-03-14 11:59:00 · 205 阅读 · 0 评论 -
综合案例:王者荣耀背景图片,王者荣耀背景图片二,简洁版小米侧边栏,五彩导航
王者荣耀背景图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <..原创 2022-03-10 14:39:34 · 695 阅读 · 0 评论 -
CSS的背景(背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定(图片附着),背景复合写法)
CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等、背景颜色background-color 定义元素的背景颜色<style> a { background-color: #55585a; }</style>元素背景颜色默认值是 transparent(透明)背景图片background-image 定义元素的背景图片<styl原创 2022-03-09 15:35:10 · 3330 阅读 · 0 评论 -
Emmet语法(快速生成HTML结构语法,快速生成CSS样式语法,快速格式化代码),CSS元素显示模式(块元素,行内元素,行内块元素),CSS元素显示模式的转换,小技巧:文字垂直居中
Emmet语法Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 <div></div>如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div如果有父子级关系的标签,可以用 > 比如 ul > li就可以了如果有兄弟关系的标签,用 +原创 2022-03-08 20:23:24 · 325 阅读 · 0 评论 -
CSS字体属性,CSS字体复合属性,CSS文本属性,综合案例新闻页面,综合案例新闻页面
CSS字体属性CSS 使用 font-size 属性定义字体大小各个字体之间用英文逗号分割,带空格的字体要加双引号<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-03-07 08:44:33 · 306 阅读 · 0 评论 -
CSS引入方式(内部样式表,行内样式表,外部样式表),CSS复合选择器(后代选择器,子选择器,并集选择器)伪类选择器(链接伪类选择器,focus伪类选择器)
CSS复合选择器原创 2022-03-02 16:12:31 · 375 阅读 · 0 评论 -
CSS简介,CSS语法规范,CSS选择器,CSS基础选择器(标签选择器,类选择器,类选择器-多类名,id选择器,通配符选择器),类选择器画三个盒子案例
CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言,CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。CSS语法规范CSS 规则由两个主要的部分构成:选择器以及一条或多条声明选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性,例如字体大.原创 2022-03-02 16:11:17 · 268 阅读 · 0 评论 -
表格标签,今日小说排行榜案例,合并单元格,无序列表,有序列表,自定义列表,表单标签,注册页面综合案例
表格标签表格主要用于展示数据<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>1.<table> </table> 是用于定义表格的标签。2.<tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table原创 2022-02-27 21:06:43 · 403 阅读 · 0 评论 -
注释标签,特殊字符,综合案例
注释标签<!---->标签,<!--开头,-->结尾,注释的内容包含在中间,vscode快捷键是ctrl+/<!--hello world-->特殊字符综合案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I.原创 2022-02-25 21:27:10 · 191 阅读 · 0 评论 -
<DOCTYPE>标签,lang语言,charest字符集,标题标签,段落标签,换行标签,练习案例(新闻),文本格式化标签,div与span标签,图像标签,路径,超链接标签
<!DOCTYPE>标签<!DOCTYPE>是一个文档类型声明标签,告诉浏览器使用哪个HTML版本来显示网页<!DOCTYPE html>上面代码意思为,使用HTML5来显示网页此标签声明位于文档最前面,<HTML>标签之前lang语言lang为html标签中的一个属性,用来定义当前文档的语言<html lang="en"><html lang="zh-CN">en定义语言为英语zh-CN定义语原创 2022-02-25 20:45:18 · 295 阅读 · 0 评论 -
网页开发工具介绍,VS Code安装与使用和插件安装
网页开发工具介绍,VS Code安装与使用和插件安装原创 2022-02-23 11:20:17 · 6463 阅读 · 2 评论 -
HTML简介(网页的基本组成,什么是HTML,Web标准的三大组成部分),HTML标签(HTML语法规范,标签关系),HTML结构标签(第一个HTML)
网页的基本组成网页是构成网站的基本元素,通常由图片、链接、文字、声音、视频等元素组成,通常我们看见的网页都是.htm和.html后缀结尾的文件,因为都称为HTML文件什么是HTMLHTML是一种超文本标记语言,是一种用来描述网页的一种语言HTML不是编程语言,而是标记语言,是一套标记标签超文本:可以加入声音,视频,动画,多媒体等(超越了文本限制)可以从一个文件跳转到另一个文件,与世界各地主机的文件链接(超级链接文本)Web标准的三大组成部分主要包括结构、表现、行为 三个方原创 2022-02-22 21:16:38 · 3894 阅读 · 0 评论