![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
你的玄烨
好好学习,天天向上
展开
-
JS如何向div中插入元素
前言: 这里我们根据一个多个列表组件渲染的示例对key的作用,以及相关的功能属性做出分析解读。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>循环渲染列表</ti原创 2020-08-21 09:49:09 · 10188 阅读 · 1 评论 -
纯H5+C3实现后台管理页面布局效果
后台管理系统页面布局的特点1)头部导航栏位置固定,高度固定、宽度自适应2)内容部分宽度高度自适应,高度为页面高度的剩下部分(除了头部导航栏剩下的部分保证全屏铺满,不出滚动条)实现代码分析说明: html和body元素给高100%,然后content高设置100%就可以铺满整个页面,给导航栏nav_top 10%的高度,宽度100%,导航栏就撑满浏览器宽度并且显示在内容盒子content顶部。再给html和body设置外边距为0,overflow:hidde,此时整个页面全屏被content铺满。原创 2020-08-08 21:12:57 · 1255 阅读 · 0 评论 -
分析理解——圣杯布局和双飞翼布局
综述: 其实两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间部分在DOM结构上优先,以便先行渲染。(核心目的: 先解析中间栏,展示当前页面的核心内容,提升用户体验。)圣杯布局: 的特点1、结构上先解析center2、三块之间没有重叠的部分3、给最大的盒子添加了padding挤进去的 --> <div class="box"> <div class="center">中间的区域</div> <div cla原创 2020-08-08 19:27:14 · 212 阅读 · 0 评论 -
分析理解——css中单位px和em,rem的区别
① px是相对长度单位,它是相对于显示器屏幕分辨率而言的。优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。② em也是相对长度单位,EM是相对于父元素来设置字体大小的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。优缺点:em的值并不是固定的,它会继承父级元素的字体大小。③ rem是CSS3新增的一个相对单位,REM是相对单位,是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所原创 2020-08-03 10:22:21 · 182 阅读 · 0 评论 -
js实现点击div随机更换背景色
原理先知: 使用background:rgb(r,g,b),三原色色值指定方式设置div的背景颜色,其中 r , g , b , 三个颜色值随机取到。样式设置: html,body { height: 100%;} div { height: 100%;background-color: black;}PS:这里初始,设置样式,让div铺满整个屏幕。便于观察。页面内容:<div id="test"><button id="btn">点我</button>&原创 2020-07-03 14:35:30 · 3588 阅读 · 0 评论 -
强迫症晚期患者:纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应。最后还是有一些困惑:写一个div给样式。(给定背景色和字体色是为了便于我们观察。)width:100%;background:white;color:white;状况: 如果我们不在div中书写内容,没有东西撑住div,div自适应该内容高度,div是不会显示的;还有如果我们不给定div具体的高度值,div也不会显示。我想要的效果是: 给定div宽度100%,让div宽度自适应。高度也要自适应,但是在我不给定div具原创 2020-07-02 20:35:50 · 667 阅读 · 0 评论 -
解决HTML页面元素浮动之后最近元素高度塌陷的问题
浮动之后会有问题:最近的父元素会高度塌陷,前提是所有的子元素浮动,且父元素没有设置高度解决方法:8种1、给父元素添加固定高度,适合高度固定的布局2、给父元素添加overflow:hidden;zoom:1;(针对IE6的兼容,可以不写)缺点:会对溢出的内容隐藏裁剪,不显示。3、给所有浮动元素的最后添加一个空的标签 ,并且添加声明clear:both;height:0; overflow:hidden;(添加height:0;和overflow:hidden;是为了避免这个空标签如果是li的话,在I原创 2020-06-13 15:37:19 · 640 阅读 · 0 评论 -
HTML中的 label 标签:一个不起眼却有点小作用的标签
标签为 input 元素定义标注(标记)① label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。②注: 标签的 for 属性值应当与相关元素的 id 属性值相同。③ 也就是说,当我们label的for属性值和相关表单元素的 id 属性值相同的时候,两者就融为了一体,label 中的文本此时就是 input 属于的内容.原创 2020-06-15 15:39:24 · 395 阅读 · 0 评论