常忽略的css技巧
摘要:1.利用 CSS 的伪类中的content属性获取attr中的信息 效果图:鼠标放上去出现提示 css代码: html代码: 2.实现带边框的三角形,利用伪类实现 比如弹框中的这种效果: css代码: html代码
阅读全文
纯css实现评分
摘要:用到的知识点: E:checked:单选或复选框被选中 E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点 E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容 css代码: html代码: 效果图:
阅读全文
美化单选框和复选框
摘要:技术要点:主要运用伪类选择器:checked,设置单选或复选按钮选中时的样式,加号'+'相邻兄弟选择器,选中后面的兄弟节点 单选框样例: css代码:background-clip规定背景的绘制区域,值为content-box表示背景被裁剪到内容框 html代码: 效果图: 复选框样例: css:
阅读全文
移动端设备中1px适配
摘要:方式1:伪类+transform实现,主要用transform中的scale缩放,缩放默认中心点是以x,y轴的50%处,因此需要用transform-origin调整中心点 html代码: css代码: 效果图:
阅读全文
css清除浮动方式总结
摘要:1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 效果: 方式2:添加空标签并设置clear:both,缺点是额外添加空标签,不推荐使用 方式3:通过伪类添加,既不会隐藏超出部分,又不多空标签,推荐使用
阅读全文
css设置垂直居中方式总结
摘要:方式1:flex布局,display:flex;align-items:center 效果如下: 方式2:position+margin 效果图:与上面一样 方式3:如果不知道具体高度,通过position+transform 效果图: 方式4:display:table-cell+vertical
阅读全文