![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css3
文章平均质量分 71
1
玖商
这个作者很懒,什么都没留下…
展开
-
CSS基础选择器+进阶选择器+伪类选择器
目录学习目标什么是选择器基本选择器通配选择器元素名称选择器类选择器id选择器类与id的命名规则总结复合选择器常用复合选择器 后代元素选择器子元素选择器语法相邻选择器交集选择器并集选择器伪类选择器复合选择器的优先级问题总结(1)连接符不参与优先级计算(2)*的优先级为0(3)同级之间比较个数,不同级之间不可跨越学习目标 掌握常用选择器的使用 熟悉选择器的优先级关系 掌握调试工具的基本使...原创 2021-09-16 22:58:08 · 211 阅读 · 0 评论 -
CSS透明度和CSS块级格式化BFC规则
目录CSS透明度rgba()opacityIE专属滤镜CSS块级格式化BFC规则概念生成BFC的条件BFC渲染规则(特性)BFC解决的问题CSS透明度rgba() 语法: rgba(r,g,b,a), 说明:r表示red,g表示green,b表示blue,a表示alpha透明度 取值: r,g,b取值范围 0-255 a透明度,取值0-1 使用说明:设置颜色的不透明度, 一般用于调整background-color、color、box原创 2021-09-23 22:31:31 · 286 阅读 · 0 评论 -
CSS浮动Float
CSS浮动概述网页中有很多布局效果,标准流normal flow没有办法完成,使用可以利用浮动改变元素默认的排列方式,解决行内元素,行内块,块+浮动并排浮动的概念浮动可以使元素【脱离文档流】,【按照指定方向排列】,直到遇到父元素的边界或另一个浮动元素【停止】浮动属性floatfloat:left左浮动/right右浮动/none不浮动(默认的标准流);float:left靠近父盒子的左边界排放float:right靠近父盒子的右边界排放每一个并排的盒子都必须写浮动..原创 2021-09-21 22:09:56 · 277 阅读 · 0 评论 -
HTML表单及相关属性
目录概述表单元素表单元素标签input标签type="text"type=”password”type=”radio”type=”checkbox”type=”button“type=”submit”type="reset"type="image"type="file"textarea标签select标签表单元素属性name属性value属性readonly属性disabled 属性maxlength属性selec.原创 2021-09-23 22:42:44 · 632 阅读 · 0 评论 -
编写时项目规范
-目录目录结构参考 HTML 书写规范文档类型声明及编码:书写规范:语义化 HTML:合理嵌套HTML标签:保证结构与表现相分离:css 书写规范编码:书写代码前书写代码时类名命名参考css 属性书写顺序:根据项目名称创建项目文件夹。如:u_course- html、css、img、js 文件均归档至项目名称目录中- HTML 文件、根据页面内容以英文命名,首页或只有一个页面通常命名为index.html- ==文件夹和文件起...原创 2021-10-04 18:00:06 · 348 阅读 · 0 评论 -
布局技巧(经典布局)自适应(两列,三列)布局 ,等高布局
等高布局等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。实现要点(需求) 多列 每一列背景不同 其中任意一列变高,其它列同步变高 方法一伪等高原理:利用 内边距填充背景色,设置一个较大的下内边距值, 外边距抵消内边距 保证盒子的有效高度height不变 而父盒子的高度取决于最高列的高度 在父盒子里写overflow:hidden 即可将溢出的背景色部分切掉 留下在父盒子里的背景色 给人一种视觉上的等高 实现步骤 .原创 2021-09-30 20:02:48 · 382 阅读 · 0 评论 -
HTML元素的分类及行内元素转换
目录行内元素块元素特性:行内块元素行内元素转换方法display 属性了解即可(下面属性)行内元素特性:1.并排中间间隙(原因:和标签后面的空格文本解析在了一起,具有文本的特性)2.设置宽高不起作用宽高就取决于内容的大小3.设置上下外边距不起作用设置左右外边距可以不能设置内边距和边框...原创 2021-09-17 22:42:37 · 117 阅读 · 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">...原创 2021-09-23 22:13:36 · 105 阅读 · 0 评论 -
盒子阴影和文字阴影
盒子阴影box-shadow:水平阴影的尺寸px 垂直阴影的尺寸px 模糊距离px 阴影的尺寸(四周) 阴影颜色 [inset];第一个值控制水平的实际阴影尺寸+向右-向左第二个值控制垂直的实际阴影尺寸+向下-向上模糊距离px四周不是实在的颜色模糊阴影的尺寸(四周)实际颜色inset 可选项 写 inset 内阴影 没写 inset 代表盒子外侧阴影...原创 2021-10-04 19:10:20 · 128 阅读 · 0 评论 -
CSS背景background和显示元素
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色、背景图片、背景图片的平铺方式和显示位置等。背景颜色background-colorckground-color 属性,设置元素的背景颜色。常用的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0原创 2021-09-22 22:16:39 · 623 阅读 · 0 评论 -
CSS 引入方式 和三种特性和属性优先级
目录CSS介绍,引入CSS引入(3种方式)1,行内引入2,内部嵌入3,外部链接CSS优先级1.css引入方式的优先级行内引入:内部嵌入:外部链接选择器优先级:CSS三种特性CSS介绍,引入css 层叠样式表 cascading 层叠 style 样式 sheets表 标记语言负责样式 也就是网页上那些内容的样式 (宽高,位置,字...原创 2021-09-17 22:31:52 · 1603 阅读 · 0 评论 -
边框的应用-实现向上三角形
<title>Document</title> <style> .box { width: 0px; height: 0px; /* 透明色 transparent 或者rgba(0,0,0,0) */ /* border-top:50px solid transparent; */ /* border-right: 50px .原创 2021-09-17 08:39:45 · 83 阅读 · 0 评论 -
CSS的四种定位
学习目标 能够说出为什么需要定位 能够说出常用3种定位各自的特点 能够利用定位属性实现轮播图案例 传统布局:盒模型: 内边距 外边距 边框 width,height 浮动:并排定位的作用普通文档流中块元素垂直排列,行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某个位置)定位 功能 : 压盖,特殊位置定位的实现使用定位需要.原创 2021-09-22 22:34:29 · 545 阅读 · 0 评论 -
论盒模型外边距塌陷问题解决办法
外边距塌陷,合并(垂直方向)1.父子嵌套塌陷现象:(1)如果父盒子本身有上外边距那就选两个中的较大值(2)如果父盒子没有上外边距子盒子带着父盒子向下移动相当于设置到了父盒子身上原因:浏览器分不清楚外边距属于自己盒子之内还是之外解决办法:...原创 2021-09-17 22:07:34 · 275 阅读 · 0 评论 -
CSS的精灵图技术和滑动门技术
目录CSS的精灵图技术概述原理实现步骤优缺点优点缺点滑动门技术概述:实例预览实现要点效果图代码实现例子所需要的图片CSS的精灵图技术概述css精灵英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-pos...原创 2021-09-23 22:23:10 · 460 阅读 · 0 评论 -
htmlcss溢出文字省略号...显示
目录一、单行文本溢出省略号注意多行溢出最后一行显示时二、多行文本溢出显示省略号(了解)案例效果图一、单行文本溢出省略号先强制一行内显示文本; 超出的部分隐藏; 文字用省略号替代超出的部分/* 1.这个单词的意思是如果文字显示不开也***必须强制一行内显示*** */ white-space: nowrap;/* 2.溢出的部分隐藏起来 */ overflow: hidden;/* 3. 文字溢出的时候用省略号来显示 */ ..原创 2021-09-23 22:49:45 · 507 阅读 · 0 评论 -
解决图片下间隙等一些自带的小问题
目录图片下间隙问题ie8-图片边框问题文本框和按钮对不齐现象ie6下小高度问题浮动双边距问题图片下间隙问题现象:图片和包裹它的盒子下边框有一个默认的间隙原因:图片具有文本的特性(基线对齐特性底边相当于文本的基线!图片间隙=文本的基线与底线之间的距离)解决办法:1.图片转换为块元素display:block2.图片的垂直对齐方式vertical-ali...原创 2021-10-04 18:53:24 · 104 阅读 · 0 评论 -
传统布局核心--CSS 盒模型
目录学习目标概述内容 contentwidthheight边框borderborder-width边框宽度border-style边框样式border-color 边框颜色定义四个边单个方向定义拆分语法内边距padding单个方向设置简写外边距margin单个方向定义简写overflow详解学习目标 能够说出盒模型的概念 熟练运用边框属性实现边框效果与小三角 能够说出margin值的..原创 2021-09-16 23:13:07 · 172 阅读 · 0 评论 -
HTML+CSS 语义化+文本相关属性
目录HTML语义化(谈谈你对HTML语义化理解-从以下两方面阐述)什么是语义化语义化的好处(为什么要语义化)css字体,文本属性学习目标font-family常用值:多个字体名称字体大小font-size字体加粗font-weight字体行高line-height文本对齐text-align垂直对齐属性(图文对齐上)vertical-align下划线text-decoration首行缩进text-inden字体颜色...原创 2021-09-16 22:42:16 · 153 阅读 · 0 评论 -
改善用户界面常用元素
轮廓线outline概述轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。outline简写 可以在一个声明中设置所有的轮廓属性。 可以设置的属性分别是(按顺序): outline-color, outline-style, outline-width 说明:轮廓样式 outline-style 轮廓颜色 outline-color,轮廓宽度 outline-width原创 2021-09-30 19:31:14 · 85 阅读 · 0 评论 -
CSS hack
了解:之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些“邪门歪道”,可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器。目录了解:什么是CSS hackCSS 内部hack选择器hack针对IE6的hack可以这么写HTML头部引用书写顺序什么是CSS hack由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果..原创 2021-10-04 18:34:21 · 113 阅读 · 0 评论 -
:is()、:where() 和 :has() 伪元素
is()、:where() 和 :has() 伪元素是 CSS 中用于样式化元素的非常强大的工具。它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素,例如元素的类型、元素的位置和元素的后代。原创 2023-07-31 11:11:39 · 185 阅读 · 0 评论 -
本地存储和音视频的属性和方法
目录本地存储音视频的属性及方法音视频的方法音视频属性音视频的事件本地存储本地存储 持久性存储技术 (浏览器关闭不会自动消失) 存储大小5MB左右同源策略存储 协议 域名 端口号 都一致称之为同源 localStorage.setItem(key,val); 设置 localStorage.getItem(key); 获取 localStorage.removeItem(key); ...原创 2021-11-21 20:50:32 · 289 阅读 · 0 评论 -
懒加载图片(首页和其他页)实现
首页懒加载实现代码 <style> * { padding: 0; margin: 0; } div { width: 1226px; height: 460px; margin: 50px auto; background: url(./img/TB1BlobNFXXXXXyXXXXXXXXXXX原创 2021-11-08 09:00:48 · 176 阅读 · 0 评论 -
js实现左右轮播图切换功能和DOM缓冲运动实现淡入淡出轮播图
1秒钟自动播放切换图片,点击左右按钮切换图片,点击下面按钮切换图片,移入暂停。移除自动播放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic.原创 2021-11-04 22:45:46 · 777 阅读 · 2 评论 -
响应式布局之grid网格布局
目录声明网格布局格式1.加在容器上的属性1、grid-template-columns,grid-template-rowsgrid-template-*相关1. repeat() 第一个参数是重复的次数,第二个参数是要重复的值2.auto-fill 当单元格大小固定时,容器大小不固定时这个属性就会自动填充3.fr 为了方便表示比例关系,网格布局提供了fr关键字(fraction片段)4.minmax(最大值,最小值)函数产生一个长度范围,表示长度就在这个范围之中5.a.原创 2021-10-15 21:26:03 · 1363 阅读 · 0 评论 -
响应式web开发
目录什么是响应式历史背景响应式开发原理(实现步骤)1、设置 viewport2 、创建流式布局(%)2.1 模块布局响应2.2响应式图片2.背景图片处理3、屏幕区间设定响应式布局优缺点什么是响应式也叫响应式布局,响应式开发响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式*一个网站适配所有终端,实现不同屏幕分辨率下的终端上网页的不同布局;原创 2021-10-15 20:53:45 · 875 阅读 · 0 评论 -
移动端主流布局方案
目录流式布局rem布局rem+媒体查询布局rem+js查询布局视口单位vw布局vw和rem的关系移动端特殊处理点击高亮效果清除 在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:长按禁止弹出菜单【禁止弹出系统菜单(禁止保存或拷贝图像IOS)】css3新盒模型移动端字体类型设置1px边框问题移动端禁止选中内容流式布局 流式布局:宽度尽可能%(宽度自适应),间距px,字体大小px,...原创 2021-10-12 22:33:51 · 396 阅读 · 0 评论 -
视口,像素和屏幕宽度获取方法
目录设备划分视口逻辑像素和物理像素二倍图技术屏幕宽度获取h5媒体查询js获取视口的宽度设备划分pc端大屏 > 1200px超小屏 :phone 320px-750px小屏; pad 768px-1024px中屏: 992px-1200px视口移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视.原创 2021-10-12 22:15:41 · 1679 阅读 · 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"> ...原创 2021-10-12 22:01:12 · 88 阅读 · 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...原创 2021-10-12 21:58:01 · 307 阅读 · 0 评论 -
盒子的水平垂直居中几种方法
方法1:知晓盒子宽高值的情况position:absolute;left:50%;top:50%;margin-top:-h/2;margin-left:-w/2;方法2:知晓盒子宽高值的情况position:absolute;left:0;top:0;right:...原创 2021-10-12 21:56:27 · 67 阅读 · 0 评论 -
css3新增动画属性(过度动画 变形动画 关键帧动画)
过度动画transitiontransition:要过度的属性名字 持续时间s 延时时间0s 运动曲线;谁做变化写到谁身上!(1)写在盒子身上事件触发完毕以后过渡动画逆序执行一次最终--最初加过渡!!(2)一般来说 ,通过事件触发 :hover :active 写在事件里:active事件触发完毕以后过渡动画就结束了回到最初状态的时候不会再有持续时间!!transition:要过度的属性名字 ...原创 2021-10-12 21:54:23 · 1376 阅读 · 0 评论 -
CSS3 弹性盒布局(伸缩布局,flex布局)
概述浏览器内置的,实现多行多列布局,但是 最适用于一行多列布局Flex布局主要思想是提供一个更加有效的方式制定、调整和分布一个容器里的项目布局。 使容器有能力改变项目的大小、排列方向、对齐等,以最佳方式填充可用空间(因此可以适应设备屏幕大小的变化)...原创 2021-10-12 21:16:28 · 1146 阅读 · 0 评论 -
CSS3 用户界面
resize 作用:规定是否可由用户调整元素的尺寸。 取值 none 用户无法调整元素的尺寸。 both 用户可调整元素的高度和宽度。 horizontal用户可调整元素的宽度。 vertical 用户可调整元素的高度。 注意 如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。 box-sizing 作用:规定盒子组成模式原创 2021-10-05 17:43:51 · 76 阅读 · 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>...原创 2021-10-05 17:44:05 · 55 阅读 · 0 评论 -
CSS background背景属性
目录多个背景图像background-imagebackground-origin背景图像的起始点background-clip背景绘制区域background-size背景图像的大小合并简写兼容CSS3背景渐变线性渐变径向渐变(了解)概述:CSS3更新增了新的背景属性,提供对元素背景更灵活的控制多个背景图像background-imageCSS3中可以通过background-image给元素上添加多个背景图像语法 不同的背景图像和图像用【.原创 2021-10-05 17:43:25 · 336 阅读 · 0 评论 -
CSS3圆角边框
目录圆角通过 CSS3,能够创建圆角边框,向矩形添加阴影替代之前的切背景图处理圆角 作用:为元素添加圆角边框 单个边定义 语法: border-*-radius border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度原创 2021-10-04 21:57:43 · 551 阅读 · 0 评论 -
CSS3新增特性
目录CSS概述CSS3现状浏览器的私有前缀新盒模型CSS3新增选择器属性选择器CSS3新增的属性选择器兼容性常用属性选择器列表:结构伪类选择器css3 新增的结构性伪类总结child一组与of-type一组的区别兼容性表单相关选择器(状态伪类选择器 )css3新增兼容性常用元素状态、用户行为伪类列表伪元素选择器:before:afterbefore与after 兼容性::placeholder...原创 2021-10-04 21:38:07 · 437 阅读 · 0 评论