![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
洪洪呀
前端小菜鸟
展开
-
一句代码把彩色的页面改为黑白色调
将彩色的HTML页面改为黑白色调12月13日是国家公祭日 , 今天基本各大网站都会把色调改为黑白色来纪念过去如果你还不会改色调 接着往下看 一句代码解决 如果有帮到你 请点个赞 谢谢诶效果图 (这里只是测试给大家看 用的手机端 )代码只需要在最高级的css中加入这句代码 -webkit-filter: grayscale(100%); * { padding: 0; margin: 0; box-sizing: border-box; -webkit-原创 2021-12-13 10:27:21 · 926 阅读 · 0 评论 -
vue实现tab切换附带css样式
vue实现tab切换附带css样式vue会用到tab切换的地方 很简单 几句代码实现可复用 直接上代码 我是写在html页面中的1.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tab切换</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">原创 2021-10-09 10:34:59 · 989 阅读 · 0 评论 -
css手写九宫格布局
css手写九宫格布局能实现九宫格布局的方式有很多种 比如 flex grid table float 等等 下面整理的是flex布局写的 一起看看吧html部分 实现布局<body> <div> <ul> <li> 我是1 </li> <li> 我是2 </li> <li> 我是3 </li> <li> 我是4 </li>原创 2021-10-09 09:55:06 · 380 阅读 · 0 评论 -
使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式
使用UI框架时 css不生效 完美解决避免污染全局样式使用前端UI框架时 在页面上单独修改css 但是不生效 都是在 <style scoped> </style>这样的模式下修改 依然不生效 后来尝试了几种方法 找到了 一种最有效的方式修改前 css不生效 主要是想把 tab 修改为主题色黄色 但是他现在用的是本身ui框架统一的黑色皮肤 /* 修改tab切换原生的样式 */ .gui-segmented-control{ background-color:#原创 2021-04-16 10:46:18 · 994 阅读 · 2 评论 -
a标签不进行跳转 保留a的原有样式
a标签不进行跳转 保留a的原有样式a标签定义超链接 用于从一张页面链接到另外一个页面链接 最最最重要的就是a标签的 herf 属性 它指向链接目标 通常也会需要用a标签 但是不需要他进行跳转 保留其原有的样式<a href = 'javascript:void(0)'>目标链接</a>...原创 2020-12-09 14:47:58 · 562 阅读 · 0 评论 -
CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法css可以通过4种方式引入样式表 根据不同的需求可以选择不同的引入方式 但是它们也有不同的优缺点内联样式嵌入式样式外部样式@import 导入的方式1.行内样式特点 : 通过HTML的style属性实现<div> <ul> <li style='margin-top: 10px;'></li> <li></li> <li></li> <li&原创 2020-09-11 09:40:15 · 7209 阅读 · 1 评论 -
CSS鼠标滑过div上移效果
CSS鼠标滑过div上移效果css鼠标滑过div向上移动效果 主要用到c3的transform属性 该属性允许我们对元素进行旋转 缩放 倾斜或移动1.效果展示2.html代码<body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li>原创 2020-09-10 09:14:09 · 8540 阅读 · 0 评论 -
纯css实现图片自动切换
纯css实现图片自动切换**对于我这样的小菜鸟来说真的不喜欢写js 以前写图片切换都是用js 刚好cs3的出现解决了这个头疼的问题 主要用到的是css3的过渡 实现图片自动切换并添加轮播焦点先看图吧因为这里小洪做的是手机端网页的效果 大家在复制代码的时候记得加上meta标签 使用手机端的尺寸来看 我已经放在html代码上了 下面css的代码格式大家将就看看吧 主要是为了节省空间 大家一定要按照规范来写 亲测有效 一定要用第二张图上的模式来测试**1. 效果图注意看轮播图和轮播焦点 因为不会原创 2020-09-01 10:36:10 · 8051 阅读 · 0 评论 -
css固定顶部 且不遮挡下面元素显示
css固定顶部 且不遮挡下面元素显示在css布局中 经常会遇到固定头部导航栏 或者内容块的需求前两天小洪刚巧在做移动端的页面 遇到这样的需求 对头部进行固定 没想到下面的元素直接顶到了页面的开始 怎么解决呢具体的解决办法1.通过添加父元素实现不遮挡html代码<div class='head'> <div class ='fixed_head'></div></div>css代码.head { width: 100%; height:原创 2020-09-01 09:35:08 · 7254 阅读 · 3 评论