![](https://img-blog.csdnimg.cn/2b0da320c40247e38233e5848e16516b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端HTML与CSS
文章平均质量分 63
以HTML和CSS的基础为主的专栏分区。
大聪明码农徐
我很懒,还没有添加简介
展开
-
CSS3过渡属性(Transition)
CSS3中Transition过渡属性 transition-property: 需要的过渡样式,默认为all transition-duration: 运动时间默认为0s transition-delay: 延迟时间默认为0s transition-timing-function: A.ease:(慢速开始,然后变快,然后慢速结束) B. linear:(匀速) ease-in:(加速)...原创 2022-01-26 11:39:42 · 442 阅读 · 0 评论 -
CSS3动画属性(Animation)
注意:Animation-->在这个动画之前,先看Keyframes关键帧,支持animation动画的只有webkit内核的浏览器。语法:<style>/*注意 mymove 是名字可以任意取值,最好见名知意 *//*第一种*/@keyframes mymove{from{初始状态属性}to{结束状态属性}}/*第二种*/@keyframes mymove{0%{初始属性状态}100%{结束属性状态}}</style>animatio原创 2022-01-26 12:31:09 · 474 阅读 · 0 评论 -
CSS3转换属性(Transform)
变形属性:transformtransform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果变形属性:transform的所有属性值transform:none; 默认值 transform:translate(); 移动 平移 单位是px transform:rotate(); 旋转 单位是deg deg度数 ...原创 2022-01-26 13:59:26 · 3562 阅读 · 0 评论 -
渐变属性(background-image)全解析
背景图线性渐变线性渐变 background-image:linear-gradient(red,blue); 默认是从上往下渐变。 background-image:linear-gradient(to 方向词,red,blue); background-image:带CSS3浏览器前缀-linear-gradient( 方向词,red,blue); 可以设置渐变方向:从上往下,从下往上,从左往右,从右往左。 background-image:l.原创 2022-01-25 11:26:25 · 5226 阅读 · 0 评论 -
弹性盒子(Flex)相关属性全解析
基本介绍Flex容器:采用 Flex 布局的元素的父元素;Flex项目:采用 Flex 布局的元素的父元素的子元素;容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。添加在.原创 2022-01-25 13:27:44 · 10981 阅读 · 3 评论 -
CSS的圆角属性(border-radius)
圆角属性在前端的应用范围较广,在高级感的塑形上必不可少。下面就跟我一起了解圆角属性的具体语法、应用、及注意事项。切正圆正圆 border-radius:20px; 一个值代表4个半径都是20px的正圆 border-radius:20px 40px; 两个值代表左上右下是20px,右上左下是40px的正圆 border-radius:20px 40px 60px; 三个值代表左上20px,右上和左下是40px,右下是60px的正圆 border-radiu...原创 2022-01-25 10:22:31 · 6025 阅读 · 0 评论 -
H5新增表单属性(form)
相关HTML标签,type相关的属性值。原创 2022-01-24 13:03:26 · 165 阅读 · 0 评论 -
CSS中的浏览器兼容与内核
为什么浏览器之间有兼容?浏览器开发时使用的核心代码不同,浏览器厂商为了利益故意设置的技术壁垒。浏览器兼容相关的专业术语CSS BUG出现的问题或者故障。CSS hack自己研究的一些解决问题的方法。CSS filter 过滤器!important 对于IE6不识别,其他浏览器识别,对于其他浏览器来说添加了该过滤器之后,该 声明的权重到最大。+或者*,\9,\0,_.浏览器内核浏览器内核 IE内核或者MSHTML或者trident 代表浏览器是IE .原创 2022-01-24 13:26:42 · 338 阅读 · 0 评论 -
文字阴影(text-shadow)与盒子阴影(box-shadow)
文本阴影text-shadow:水平阴影的距离 垂直阴影的距离 模糊度 颜色;注意点:参数至少2个,且是前2个。 水平和垂直阴影的距离可以给负数。 默认情况下,阴影的颜色是字体颜色。 多个阴影的时候,中间用逗号隔开。盒子阴影box-shadow:水平阴影的距离 垂直阴影的距离 模糊度 延伸半径 颜色 内阴影;注意点:参数至少2个,且是前2个。 水平和垂直阴影的距离可以给负数。 默认情况下,阴影的颜色是黑色。 多个阴影的时候,中间用逗号隔开。 内阴影 inset。.原创 2022-01-24 15:03:47 · 482 阅读 · 0 评论 -
CSS浮动属性
浮动属性使用场景:想要竖着的横着排列的时候用,想要实现文本环绕效果的时候应用。语法:float:left; 向左浮动 float:right; 向右浮动 float:none; 默认值 注意点:一个盒子浮动了之后,该盒子是飘起来的,脱离文档流,不占位置。 一个盒子浮动了之后,下面如果是没有浮动的盒子,那么这个盒子会上去,且里面内容会环绕显示。 多个盒子同时浮动,会横着排列,同时左浮动,从左往右,同时右浮动,从右往左。代码展示:浮动前:浮动后:.原创 2022-01-21 13:44:37 · 194 阅读 · 0 评论 -
HTML基础
目录一、软件的设置(一)编译器Visual Studio Code的相关设置1.插件的安装2.基础操作的学习(二)HTML基本代码的书写1.文本标题2.段落3.加粗4.倾斜5.上标下标6.强制换行7.水平线8.下划线9.删除线10.列表相关11.图片12.超链接一、软件的设置(一)编译器Visual Studio Code的相关设置1.插件的安装其中Chinese (Simplifie...原创 2022-01-21 11:27:18 · 311 阅读 · 0 评论 -
CSS基础以及选择器
目录一、CSS的引入方式(一)、行内样式(二)、内部样式(三)、外链式。二、css常用的修饰属性三、css选择器(一)、类型选择器(标签选择器)(二)、calss选择器(类选择器)(三)、ID选择器(四)、通配符(六)、群组选择器(七)、后代选择器(包含选择器)(八)、子选择器(九)相邻兄弟选择器(十)、通用兄弟选择器四、选择器的权重问题一、CSS的引入方式(一)、行内样式<标签 style="属性:属性值;...原创 2022-01-21 13:28:01 · 336 阅读 · 0 评论 -
伪对象(伪元素)选择器
:after或者::after{}表示的意思是在某个盒子内部的最后添加内容。用法:如果添加文本 :after{content:"";} 如果添加图片 :after{content:url();}引入的图片大小设置不了,并且不同的图片距离顶部有缝隙且缝隙不一致,可以用margin-top负数来测试有多少间距。:before或者::before{}表示的意思是在某个盒子内部的最前面添加内容用法:如果添加文本 :before{content:"";} 如果添加图片 :befo...原创 2022-01-23 14:06:53 · 256 阅读 · 0 评论 -
CSS中的BFC概念
什么是BFC?块级格式化上下文。BFC的原理的目的可以知道一些问题为什么出现,书写页面相关效果的时候,可以有多个方法。触发BFC的条件HTML默认就是一个人BFC。 添加浮动且属性值不是none也可以成为BFC。 overflow的属性值不为visible也可以成为BFC。 display的属性值是 inline-block table-cell table-caption flex inline-flex。 position的属性值是absolute或者fixed。...原创 2022-01-24 13:12:01 · 145 阅读 · 0 评论 -
css中的盒模型属性
外边距属性(margin)使用场景:想要设置间距,且间距对于盒子来说是外面的时候用;单独设置 margin-top 外上边距 margin-bottom 外下边距 margin-left 外左边距 margin-right 外右边距 简写设置 margin:20px; 一个值表示四个方向都是20px margin:20px 40px; 两个值表示,上下20px,左右40px margin:20px 40px 80px; 三个值表示原创 2022-01-21 15:36:42 · 764 阅读 · 0 评论 -
纯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-01-23 15:03:20 · 2774 阅读 · 0 评论 -
CSS的定位属性
使用场景:想要覆盖盒子或移动盒子位置的时候使用。绝对定位(position:absolute)文档流一个盒子给了绝对定位以后,该盒子是悬空不占位置的,并且不会进行移动。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..原创 2022-01-23 13:15:09 · 3774 阅读 · 0 评论 -
CSS高度塌陷问题及解决方法
触发条件包含结构,所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷。例如:解决方法一:给父元素添加固定高度。缺点:不适合高度自适应的布局。代码: <style> *{ margin: 0; padding: 0; } ul{ /* 给父元素设置固定的高度 */ height: 600px;原创 2022-01-23 13:59:11 · 4972 阅读 · 0 评论 -
css元素类型
为什么要学元素类型?是因为在页面书写的时候,发现一些标签对于一些样式不支持,想要支持,就要知道为什么,知道了为什么才可以解决问题.元素类型(块元素)例如: div p ol li ul dl dt form dd h1-h6等 特点:默认情况下,独占一行,简单理解就是竖着排列。 默认情况下,支持宽度和高度设置。 默认情况下,支持宽度和高度设置。但是,p不能自己包自己,也不能包其他的块元素,只能包行内和行内块元素,h1-h6 不能包自己,也不能包同类的标题。元素类型(行内元素)例原创 2022-01-22 14:05:05 · 60 阅读 · 0 评论 -
CSS单行文本溢出显示省略号
如何让单行文本溢出显示省略号呢?操作步骤建立简单的html样式第一步:限定范围 width:;第二步:强制文本不换行 white-space:nowrap;第三步:溢出隐藏 overflow:hidden;第四步:显示省略号 text-overflow:ellipsis;可以看到,效果已经达到了。知识拓展白色空间的处理(white-space)white-space:nowrap; 忽略空白符,一行显示到底 whit.原创 2022-01-22 13:27:37 · 831 阅读 · 0 评论 -
CSS表格属性
使用场景:展示数据的时候用。表格相关的HTML标签 <table></table> 创建表格 <tr></tr> 表示行 <td></td> <th>有加粗和水平居中的效果</th> 表示单元格 <caption></caption> 文本默认水平居中的 表格标题 <thead&...原创 2022-01-23 14:30:53 · 208 阅读 · 0 评论 -
CSS核心属性总结
文本相关文字大小(font-size)注意: 浏览器默认文字大小是16,谷歌浏览器最小识别的是12px。代码展示:文字颜色(color)注意:书写可以为颜色单词,也可以为#十六进制,也可以为rgb格式。代码展示:文字字体(font-family)注意:谷歌和火狐浏览器默认是微软雅黑,其他浏览器默认是宋体,如果是中文字体或者是多个英文单词组成的字体,需要到引号,多个字体之间用逗号隔开。代码展示:字体加粗(font-family)属性值为单词 f...原创 2022-01-22 12:28:31 · 108 阅读 · 0 评论 -
HTML5新增标签
<header></header> 头部 <footer></footer> 尾部 <nav></nav> 导航 <section></section> 内容区域 <aside></aside> 辅助信息 <article></ar...原创 2022-01-24 13:58:27 · 55 阅读 · 0 评论 -
CSS单词换行与大小写设置属性
单词换行word-break:normal; 默认值 word-break:keep-all; 中文换行 word-break:break-all; 强制换行,会强行截断英文单词 word-wrap:normal; 默认值 word-wrap:break-word; 换行,但是不会强行截断英文单词 其中,word-break:break-all;与word-wrap:break-word;有较大区别。代码展示如下:<!DOCTYPE..原创 2022-01-24 15:27:18 · 353 阅读 · 0 评论