css
关注
分享
扫一扫
QSWQSWQSWQSWQSW
.
展开
-
自适应背景图片
width:100%;height:100%;z-index:-10;zoom: 1;background-color: #fff;background: url(1.png) no-repeat;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;原创 2021-05-08 16:22:41 · 97 阅读 · 0 评论 -
滚动条修改css样式
改成这个样子的滚动条，给父级一个高度，和overflow auto然后.countryCountent::-webkit-scrollbar { display: block !important;}.countryCountent::-webkit-scrollbar { width: 4px;}.countryCountent::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shado.原创 2021-04-22 11:28:55 · 143 阅读 · 0 评论 -
html底部出现空白
找了好久才发现，是我某个元素设置了visibility: hidden;元素是隐藏了，但是这个元素的大小还在那放着。改为display none就好了。自己每个盒子设置了一下午的高度100% 用display flex 布局什么的都不好使，后来突然就想到了，记录一下，防止下次再找错找这么久。。...原创 2021-04-09 15:42:55 · 1476 阅读 · 0 评论 -
微信内置浏览器图片出现上下空白
检查图片是否有此样式，去掉就好了原创 2021-03-10 14:32:34 · 288 阅读 · 0 评论 -
改变checkbox的样式（选项框中加图片）
input[type='checkbox'] {width: 20px;height: 20px;background-color: #fff;-webkit-appearance: none;border: 1px solid #c9c9c9;border-radius: 2px;outline: none;}.li_ipt input[type=checkbox]:checked {background: url("img/ok.png")no-repeat center;}转载 2020-09-15 10:46:11 · 715 阅读 · 0 评论 -
带swiper的选项卡联动切换
**HTML<!DOCTYPE html >!<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-原创 2020-07-29 17:28:47 · 1730 阅读 · 0 评论 -
jq选项卡
<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="http://libs.baidu.com/jquery/1.10.2/jq原创 2020-06-09 13:57:46 · 160 阅读 · 0 评论 -
CSS瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2020-05-14 14:00:16 · 135 阅读 · 0 评论 -
CSS图片视觉差效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-05-14 13:36:07 · 734 阅读 · 0 评论 -
可滑动导航栏隐藏滚动条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do原创 2020-05-11 15:56:12 · 573 阅读 · 0 评论 -
响应式导航栏
HTML：<div class="c-nav"> <div class="container navFlex"> <div class="flexItem"> <img class="logo" src="http://weichai.seetaoism.com/Public/Ho...原创 2020-04-21 16:07:43 · 1203 阅读 · 1 评论 -
div透明，文字不透明
给div：background:rgba(190,190,190,0.5);原创 2020-04-08 16:49:25 · 341 阅读 · 2 评论 -
头部尾部固定，中间可滚动，不遮挡，flex布局
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0; margi...原创 2020-04-07 17:46:49 · 510 阅读 · 0 评论 -
html滚动到可见区域加载动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal...原创 2019-11-29 14:46:03 · 2393 阅读 · 0 评论 -
通过CSS，实现元素反转
通过CSS，实现元素反转转载 2019-11-26 13:07:59 · 715 阅读 · 0 评论 -
解决h5用rem布局的页面刚开始缩放一下的问题
js：window.onload = function () { getRem(750, 100)};window.onresize = function () { getRem(750, 100)};function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var o...原创 2019-11-15 17:21:10 · 657 阅读 · 1 评论 -
jq修改css文件中带有important的属性
$(".page_header_top").css("cssText","padding-bottom:20px!important");原创 2019-10-15 14:51:32 · 297 阅读 · 0 评论 -
html纯英文或者纯数字自动换行
word-break: break-all; word-wrap: break-word;原创 2019-07-02 10:57:33 · 755 阅读 · 0 评论 -
CSS实现三种切角效果
效果一：代码：<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> CSS：.cornerCut{width:200px;margin: 10px 20px;height: 200px;background:#58a;color:#fff;text-a...原创 2019-08-01 16:10:13 · 1454 阅读 · 0 评论 -
css实现文字倒影
平常我们要实现倒影的效果，一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影-webkit-box-reflect: below 1px -webkit-gradient(linear,...原创 2019-08-07 13:13:23 · 2915 阅读 · 0 评论 -
css修改选中文字背景颜色
*::selection { background-color: red;}原创 2019-08-07 13:22:58 · 970 阅读 · 2 评论 -
js和css带滑动效果的回到顶部
HTML：<p id="back-to-top"> <a href="#top"> <span> <img src="__IMG__/top-icon.png" alt=""> </span> </a> </p>CSS：/*...原创 2019-10-11 17:52:26 · 192 阅读 · 0 评论 -
上滑弹出带遮罩层的盒子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <title></title> <style type="text/css"> ...原创 2019-07-10 15:44:04 · 365 阅读 · 0 评论 -
左滑侧边栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> ...原创 2019-07-10 15:37:05 · 199 阅读 · 0 评论 -
波浪竖线样式的加载动画
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style> * { margin:...原创 2019-07-10 15:27:05 · 539 阅读 · 0 评论 -
打开门样式的加载动画
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打开门样式加载动画</title> <script src="js/jquery.min.js"></script> <style type="text/cs...原创 2019-07-10 15:23:37 · 258 阅读 · 2 评论 -
js点击阅读全文
html<div class="wrap"> <div class="detail_main content_wrap"> {$info['content']|htmlspecialchars_decode} </div> <div class="unfold-field"> <!-- <div class="unfl...原创 2019-07-10 15:16:03 · 2228 阅读 · 0 评论 -
html隐藏溢出
牢记这三个属性的组合： overflow: hidden; text-overflow: ellipsis; white-space: nowrap;原创 2018-12-06 19:53:59 · 5848 阅读 · 0 评论 -
vue引入animate.css及样式大全
fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeInRight: '向左淡...原创 2018-12-12 19:46:12 · 4570 阅读 · 0 评论 -
CSS实现上下循环滚动效果
参考此博客转载 2018-11-01 18:54:55 · 9772 阅读 · 0 评论 -
怎么让盒子在盒子内居中
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #demo{ width: 500px; height原创 2018-10-30 09:07:23 · 4706 阅读 · 0 评论 -
CSS优先级顺序
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性原创 2018-10-30 08:57:43 · 7608 阅读 · 0 评论 -
js上传头像
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <title></title> <script> window.onload ...原创 2019-07-10 16:07:54 · 1061 阅读 · 0 评论 -
js倒计时验证码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> ...原创 2019-07-10 16:32:59 · 162 阅读 · 0 评论 -
css改变单选框样式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-07-18 14:55:32 · 1196 阅读 · 0 评论 -
表格里的隔行变色代码
table tr:nth-child(even){background: rgb(238,238,238);}原创 2018-10-10 09:05:09 · 821 阅读 · 0 评论