css
关注
分享
扫一扫
菜鸟笔记本
这个作者很懒，什么都没留下…
展开
-
用纯CSS实现优雅的tab页
说明又是一个练手的小玩意儿，本身没什么技术含量，就是几个不常用的CSS3特性的结合而已。要点Label标签的for属性单选框的:checked伪类CSS的加号[+]选择器效果图原理通常tab页的交互都是点击tab头然后展示对应的一块内容，这种排他性跟HTML里面的某个原住民很类似，是啥呢？没错！就是单选框组。单选框组有一个:checked伪类，可以设定单选框被选中后的样式，所以我们要把一组单选框当做tab页的头部么？当然不是，单选框是很固执的，用CSS去感化他是很吃力的，那怎么办呢？原创 2020-08-24 23:58:12 · 1616 阅读 · 0 评论 -
CSS实现鼠标悬停改变其他标签样式
CSS实现鼠标悬停改变其他标签样式前言：据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！控制其他标签（根据控制标签与被控制标签之间的关系）可分为三种类型如下：本文中控制标签为 .div1被控制标签为 .div21.控制子标签（.div1:hover和.div2之间使用空格）<!DOCTYPE html><html> <head> <meta charset="utf-8">转载 2020-08-18 22:19:52 · 4758 阅读 · 0 评论 -
css设置div背景色的同时设置背景图
<div class="top_content "></div>.top_content { background: #1891ff; background-image: url('../../assets/photo/product/product.png'); height: 400px; text-align: center; line-height: 400px;}原创 2020-08-16 14:37:13 · 1865 阅读 · 0 评论 -
css-文字和图片在容器内垂直居中的简单方法
方法一、使用line-heigh使多行文字居中或图片居中把文字包裹在一个inline-block元素中vertical-align middle，外部元素line-heigh等于高度文字居中 <div class="box1"> <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span> </div>.box1{原创 2020-08-16 14:35:16 · 920 阅读 · 0 评论 -
css深度作用选择器，element-vue中el-table去除鼠标悬停背景色
<style scoped> .el-table >>> tbody tr:hover>td { background-color: #ff0000;color: #000; }</style>深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：...原创 2020-04-01 17:01:39 · 1469 阅读 · 0 评论 -
Flex 布局教程：语法篇
参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html原创 2020-03-05 15:48:03 · 94 阅读 · 0 评论