近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item 元素的 CSS 定义如下： .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求 ...
分类：
Web程序 时间：
2020-02-10 22:10:54
阅读次数：
79
效果如下： radio demo 注：这里如果radio加id，label标签for属性指向id则可以点击label是radio触发 如果不通过id来关联，则是需要直接点击radio才产生效果 ...
分类：
Web程序 时间：
2020-01-20 13:16:34
阅读次数：
498
背景话不多说，我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown:valid:invalid伪类及html5inputpattern属性就可以实现，:placeholder-shown伪类目前兼容性如下：直接上代码！html:<!DOCTYPEhtml><html><head><metacharset="utf-8
分类：
Web程序 时间：
2020-01-17 10:18:59
阅读次数：
110
不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><
分类：
Web程序 时间：
2020-01-03 00:28:05
阅读次数：
105
效果效果图如下实现思路div实现太阳的一条矩形光影before伪元素制作另一条光影矩形，和已有的转变90°after伪元素画个圆实现太阳样式dom结构用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写太阳的一条光影矩形的样式。<divclass="container"><divclass="sunny"></div></div>专门建立
分类：
Web程序 时间：
2019-12-29 20:30:41
阅读次数：
133
html部分： 1 <ul> 2 <li> 3 <input type="radio" name="radio" id="tab1" checked> 4 <label for="tab1">选项一</label> 5 <div class="content">内容一</div> 6 </li> 7 ...
分类：
Web程序 时间：
2019-12-29 14:46:54
阅读次数：
88
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。为什么使用瀑布流瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布
分类：
Web程序 时间：
2019-12-19 23:18:16
阅读次数：
134
纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线，如果想实现点击展开和收 缩以及复选框效果还得配合js来实现。其实展开和收缩就是一个点击元素其子元素隐藏 和显示的切换。** 效果图 html结构 <ul class="domtree"> <li> 1级菜单 <ul> < ...
分类：
Web程序 时间：
2019-12-19 11:25:42
阅读次数：
153
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com... ...
分类：
Web程序 时间：
2019-12-18 21:39:05
阅读次数：
93
