响应式布局中宽度与高度相同 纯css方法设置ul中li宽高相等 关键词：VW / VH vw：视窗的宽度 vh：视窗的高度 思路：根据vw获取视图宽度从而设置li的宽度等于高度 代码： <li> <div class="test"> <img src="../images/hm1.png" alt= ...
分类：
Web程序 时间：
2020-03-31 22:46:39
阅读次数：
489
css能实现各种各样的动态效果，比js实现简单，性能也比js实现高，现在我们就用纯css实现弹窗，主要用到了两个属性 opcity 和 visibility， opctiy 这个属性很简单 控制元素透明度 ，visibility控制元素的显示和隐藏，他和display有一个很重要的区别，visibi ...
分类：
Web程序 时间：
2020-03-28 17:44:09
阅读次数：
143
[TOC] HTML5使用纯CSS实现“按比例平分”整个垂直空间 需求 需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。 类似以下效果: "css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部_网络_wj1224_的博客 CSDN博客" 可惜上面网址给出 ...
分类：
Web程序 时间：
2020-03-18 13:49:47
阅读次数：
303
在对网站进行mip改造的时候，使用百度的导航组件，很难有较好的展现形式。 百度又不允许自定义JS，所以，考虑增加CSS（是在百度组件的基础上增加JS），用css补充实现点击功能，实现精美的导航。 最终结果是为了实现以下三个样式 1.未展开状态 2.展开状态，有二级导航的，要出现+号 3.点击+号能展 ...
分类：
Web程序 时间：
2020-03-15 09:50:45
阅读次数：
76
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面： 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？ 方案一：CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vm ...
分类：
Web程序 时间：
2020-03-15 09:20:57
阅读次数：
80
原理 CSS property: columns。CSS属性 columns 用来设置元素的列宽和列数。 兼容性 chrome 50+ IE 10+ android browser 2.1+ with webkit "MDN 文档" 效果 代码 心得 在过去本人还用 100+ 行代码写过 JS 版的 ...
分类：
Web程序 时间：
2020-03-14 14:53:54
阅读次数：
83
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最 ...
分类：
Web程序 时间：
2020-03-05 13:17:54
阅读次数：
84
响应式网页设计项目-CnBlogs用户意见调查 https://codepen.io/yiyunpan// #技术堆栈 1. 使用HTML、JavaScript和CSS完成。这里是纯CSS做的 #内容 1. 使用了H5 语义化的标签 2. 使用了H5 Form表单的特性 3. Selection/O ...
分类：
Web程序 时间：
2020-03-04 09:33:15
阅读次数：
84
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>纯CSS自适应响应式Table数据表格DEMO演示</title> 6 7 <style> 8 *{ 9 box-sizing: border-box; 10 ...
分类：
Web程序 时间：
2020-02-16 20:31:01
阅读次数：
127
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>纯css动画实现轮播图展示</title> 6 <link rel="stylesheet" charset="utf-8" href="style.css ...
分类：
Web程序 时间：
2020-02-16 20:27:33
阅读次数：
77
