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 · 10777 阅读 · 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 · 1348 阅读 · 0 评论 -
分析理解——圣杯布局和双飞翼布局
综述： 其实两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的： 先解析中间栏，展示当前页面的核心内容，提升用户体验。）圣杯布局： 的特点1、结构上先解析center2、三块之间没有重叠的部分3、给最大的盒子添加了padding挤进去的 --> <div class="box"> <div class="center">中间的区域</div> <div cla原创 2020-08-08 19:27:14 · 234 阅读 · 0 评论 -
分析理解——css中单位px和em，rem的区别
① px是相对长度单位，它是相对于显示器屏幕分辨率而言的。优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。② em也是相对长度单位，EM是相对于父元素来设置字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。优缺点：em的值并不是固定的，它会继承父级元素的字体大小。③ rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所原创 2020-08-03 10:22:21 · 210 阅读 · 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 · 3729 阅读 · 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 · 713 阅读 · 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 · 683 阅读 · 0 评论 -
HTML中的 label 标签：一个不起眼却有点小作用的标签
标签为 input 元素定义标注（标记）① label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。②注： 标签的 for 属性值应当与相关元素的 id 属性值相同。③ 也就是说，当我们label的for属性值和相关表单元素的 id 属性值相同的时候，两者就融为了一体，label 中的文本此时就是 input 属于的内容.原创 2020-06-15 15:39:24 · 434 阅读 · 0 评论