css3
文章平均质量分 75
三岁九年
持续更新,有时相隔时间会过长
展开
-
用js制作游戏:扫雷,源代码
扫雷要求 游戏的区域: 9*9的区域 方格可以打开与标记 左键打开,显示数字,为周围格子的地雷数,右键标记 地雷 地雷随机分布 踩到地雷时,游戏结束 所有的地雷显示出来 连锁开大空方格 剩余地雷数与计时器 游戏胜利条件 所有的方格除了地雷都被打开了,则游戏胜利 一个方格所包含的信息: 坐标 x y 是否是一个地雷 周围的地雷数 = 9 二维数组中存储的是周围的地雷数 html格式代码 <body> <div class="level"> <bu原创 2021-01-20 10:28:06 · 769 阅读 · 2 评论 -
移动端网页比例缩放,,scss入门。
相对单位 这里就先说一下rem,vw,vh。 rem em:相对单位,它需要一个参考属性。当前元素的字体大小。 rem:相对单位 root em。 参考值为:HTML根标签的font-size的值。 rem布局的原理: 动态修改html根标签中的font-size值。 实现方式: 通过js 通过vw。 rem想要真正实现比例缩放还是要使用vw。 vw 百分比布局缺点: 计算百分数不方便。 多层嵌套时使用不方便。 vw:1vw = 屏幕宽度的百分之一。 vh: 1vh = 屏幕高度的百分之一。原创 2020-12-25 20:43:01 · 608 阅读 · 2 评论 -
html媒体查询,同一个网页,在不同的条件下,使用不同的样式。
媒体查询简述 设备: 屏幕:PC 手机端 打印机 屏幕阅读器 尺寸: 常见尺寸 320-420之间 响应式网页:同一个网页,在不同的条件下,使用不同的样式。 rem/百分比:等比例缩放。 【注】 使用min-width时,通常将小的条件放在前面。 使用max-width时,通常将大的条件放在前面。 实现方式: 内嵌式 格式:@media 设备名 逻辑关键词(and , not)(条件){ 样式; } 外链式: 通过link标签引入样式,再通过media属性设置样式引用的条件。 < link原创 2020-12-24 18:59:33 · 649 阅读 · 0 评论 -
网页中三栏布局的常用方法:圣杯布局,双飞翼布局,弹性盒子布局三栏。
圣杯布局 利用浮动定位进行布局 <header>头部</header> <div class="flote"> <div class="center">中间</div> <div class="left">左</div> <div class="right">右</div> </div> <footer>尾原创 2020-12-24 08:52:54 · 236 阅读 · 0 评论 -
HTML5—新语义元素使用及兼容,BFC解决曾经遇到的问题
H5常用标签属性HTML5语义元素兼容性BFC应用如何创建BFCBFC的作用 HTML5语义元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: < div> 和 < span> - 无需考虑内容. 语义元素实例: < form>, < table>, and < img> - 清楚的定义了它的内容。 H5新语义元素: < header>:表示网页的头部。通常是一些导航信息或者标题。 <原创 2020-12-22 17:22:37 · 95 阅读 · 0 评论