![](https://img-blog.csdnimg.cn/20210505104142262.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
H5基础
文章平均质量分 92
html/css/js基础知识
江河i
我想要的都在路上
展开
-
ifont图标和Fontawesome图标
下载为png最方便。原创 2023-03-31 14:54:32 · 653 阅读 · 0 评论 -
移动端适配及sass讲解
em:相对单位它需要一个参考属性。当前元素的字体大小。rem:相对单位 root em。 参考值为:HTML根标签的font-size的值。rem布局的原理:动态修改html根标签中的font-size值。实现方式:1.通过js2.通过vw。百分比布局缺点:1.计算百分数不方便。2.多层嵌套时使用不方便。vw/vh 相对屏幕vw:1vw = 屏幕宽度的百分之一。vh: 1vh = 屏幕高度的百分之一。区别:百分比参照的是父盒子vw/vh 参照的是屏幕。<html原创 2020-12-29 12:17:25 · 1159 阅读 · 0 评论 -
选择器分类及鼠标经过效果
目录选择器标签选择器ID选择器类选择器通配符后代选择器子代选择器交集选择器并集选择器序选择器相邻选择器兄弟选择器nth-child选择器nth-of-type(n)选择器伪类选择器选择器的功能:选中要添加样式的标签元素。标签选择器 通过标签名直接选择相应的标签。 不管有多复杂的嵌套关系,标签的位置就算藏得很深,依然可以被标签选择器命中。 格式:标签名{ 声明; } 标签选择器的作用: 1.利用标签选中所有的特性,进行默认样式原创 2020-12-07 20:27:32 · 463 阅读 · 0 评论 -
瀑布流/媒体查询/栅格化布局/导航条
设备:屏幕:PC ~screen 手机端打印机~print屏幕阅读器尺寸:常见尺寸 320-420之间响应式网页:同一个网页,在不同的条件下,使用不同的样式。rem/百分比 网页:等比例缩放方式。【注】使用min-width时,通常将小的条件放在前面。使用max-width时,通常将大的条件放在前面实现方式:内嵌式格式:@media 设备名 逻辑关键词(and ,(逗号) not)(条件){样式;} 屏幕设备宽度大于等于1200px时生效原创 2020-12-24 13:02:07 · 800 阅读 · 0 评论 -
H5常用的语义化标签及bfc属性解释
语义化的好处1、html结构清晰,代码可读性较好,便于团队维护和开发2、更有利于搜索引擎或辅助设备理解html页面内容,搜索引擎可以根据标签语言确定上下文和权重关系三、H5常用的语义化标签 <section> 用于对网站和页面内容分块,划分单独的模块区域 <article>独立的文章展示 <aside>页面中的附属侧边信息 <header>:定义页面或内容的头部区域<footer>:定义页面或内容的底部区域&l原创 2020-12-22 17:17:05 · 241 阅读 · 1 评论 -
弹性盒子display:flex
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder弹性盒子声明定义:使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局。【注】一般是使用display:flex. inline-flex极少用。flex:如果没有为父原创 2020-12-21 20:35:05 · 3583 阅读 · 0 评论 -
背景图,边框圆角,线性,径向渐变
设置图片为背景用法background-size:设置背景图片的大小属性值:px 单词单词:都会让图片等比例缩放。cover 将盒子铺满背景图,但是不保证图片的完整显示。contain 将图片完整的显示,不保证铺满盒子。background-repeat 设置背景图片是否重复以及如何重复,默认为平铺满。属性值:repeat:平铺 默认值no-repeat:不平铺repeat-x 水平上平铺repeat-y 垂直上平铺 background-image: ur原创 2020-12-17 20:34:27 · 167 阅读 · 0 评论 -
动画animation
动画之前使用过渡遇到的一些问题:1.需要重复过渡效果时无法实现2.只能通过hover等方式才能出发。动画:1.通过@keyframs定义动画。2.在指定元素中,通过animation属性来调用动画。1.定义动画格式:@keyframes 动画名 {from{/* 初始帧 /}to{/ 结束帧 */}}【注】动画名不要起关键字,最好见名知意。2.动画的调用:通过animation属性来调用动画。 @keyframes dong { form{初始值}原创 2020-12-17 19:53:57 · 218 阅读 · 0 评论 -
过渡transition,transform2D转换,3D旋转
目录过渡,2D转换transform 属性效果缩放transform:scale位移 transform: translate旋转:transform:rotate倾斜 transform:skew3D旋转位移 transform: translate3d(x,y,z);3D呈现transform-style:persevere-3d过渡,2D转换transition 过渡之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。css3新增了过渡这原创 2020-12-17 13:36:00 · 707 阅读 · 0 评论 -
小知识:圆角,阴影,亮度,不透明度,动画平移
圆border-radius: 50%;0 ~~50 越大越圆可以是四个值代表四个角,越大越圆盒子阴影 box-shadow: 0px 1px 5px red;亮度filter: brightness(30%);0~100%越大越亮或0~~1越大越亮透明度opacity: 30%;0~100%越大越不透明或0~~1越大越不透明图片做背景将图片设置为背景。background-image: url(“图片的路径”);背景图片会铺满盒子的整个背景区域。back原创 2020-12-12 17:24:27 · 135 阅读 · 0 评论 -
清除浮动,定位,伪元素
} .son {}原创 2020-12-12 14:44:32 · 687 阅读 · 0 评论 -
浮动,盒子属性
目录盒子内边距border 边框制作三角步骤margin 外边距外边距塌陷嵌套盒子的外边距塌陷盒模型分为两类标准文档流行内元素,块级元素,行内块浮动标准文档流的文字不会被浮动元素遮挡盒子盒子模型 英文:box model。最常见的盒子是div span盒子中的区域:1.宽 width px2.高 height3.内边距 padding4.边框 border5.外边距 margin【注】 标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。【注】盒子的宽不设置时,默认为100%;但原创 2020-12-09 20:45:06 · 727 阅读 · 1 评论 -
选择器权重及字体属性
这里写目录标题继承性权重层叠important属性行高font-size 字体大小font-family 字体font-weight字体粗细font-style 字体样式溢出隐藏text-align: 设置段落的对齐方式。text-indent 文本缩进text-decoration 文本修饰单词间距字母间距text-transform大小写转换基线对齐继承性有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性。继承性是从当前元素开始,一直到最小的元素。后代元素能够继承来自祖先原创 2020-12-08 20:47:08 · 700 阅读 · 0 评论 -
input表单各种框/按钮和下拉框
目录表单:1.1输入框label标签通用属性1.2密码框1.3单选框1.4多选框1.5 按钮1.6文件上传1.7隐藏域下拉菜单select常用属性option常用属性输入框fieldset为表单加一个框表单: 用来收集用户输入或选择的信息,并提交到服务器上。 html表单是由网页上可以提供用户输入和选择的一些控件(表单元素)组成的表单元素:元素:HTML中,是从开始标签到结束标签中的所有代码。表单元素指的是不同类型的控件。 输入框,密码框,复选框,提交按钮等。表单格式:原创 2020-12-06 15:33:22 · 29681 阅读 · 0 评论 -
小标签介绍/知识及列表
目录标题常见的编码格式空白折叠现象h系列标签p标签一些小标签含义标签属性img标签路径问题无序列表有序列表常见的编码格式 设置文件的编码格式为UTF-8 常见的编码格式: gb2312 只包含简体和一些特殊字符 gbk 包含简体与繁体,还有古汉语文字,还有日本片假名 特殊字符。 UTF-8 几乎包含所有人类语言。 gb2312与uft-8 比较 uft-8 更臃肿,加载更慢 gb2312 更小巧,加载速度更快原创 2020-12-03 20:45:49 · 1045 阅读 · 0 评论 -
定义列表及表格
学习内容定义列表超链接锚点的使用空链接表格合并单元格div span 是css中重要的“盒子”定义列表有三个标签参与:dl dt dddl:定义一个定义列表。dt:定义标题(列表项)dd:对标题的说明和解释嵌套关系:dl>dt+dd.格式: <dl> <dt></dt> <dd></dd> </dl>1.dt与dd是同级2.一个dt可以用多个dd来解释。3.dd原创 2020-12-03 20:17:31 · 2555 阅读 · 0 评论 -
定位-初识
定位属性positioncss定位属性共有三种:相对定位 relative绝对定位 absolute固定定位 fixed相对定位 relative相对与自己原来的位置定位,进行位置的调整。margin与相对定位调整位置的区别:1.盒子和盒子的距离,间隙。相对定位:位置的调整2.margin会影响后面的元素。相对定位不会影响别人。不脱标。坑位还占着,别人挤不走。做绝对定位的参考,子绝父相。绝对定位 absolute找一个参考系,定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。原创 2020-11-11 20:46:53 · 133 阅读 · 0 评论 -
行高/字体/元素介绍/鼠标样式
行高height: 100px什么是行高一行文字实际占用的高度。取值方式:px,百分比。百分比:按照默认的字体大小取值。特殊用法:要让一行文字垂直居中,可以将行高设置为盒子高。(多行文字失效)行高,字号一般都是偶数。谷歌浏览器最小可以设置12px,默认是16px字号字体大小网页中,中文主要使用的字体:微软雅黑,宋体,黑体。微软雅黑:Microsoft Yahei宋体:SimSun黑体:SimHei 取值方式:数字,单词 数字:100-900;原创 2020-11-09 19:28:26 · 736 阅读 · 0 评论