css3
关注
分享
扫一扫
墨墨博客
Talk is cheap,show me the code!
废话少说，放码过来！
展开
-
iframe横向滚动条在Chrome上不显示在火狐上显示
问题给iframe加了scrolling=‘yes’,横向滚动条在Chrome出不来，火狐上是有的在外面加div可以在iframe外面再套一个div，控制div的溢出<div style="width:100%;height:1000px;overflow-x:scroll;"><iframe src="http://xxx.com" style="width:1200px;height:1000px;overflow:hidden;"></iframe><原创 2022-05-16 10:23:54 · 651 阅读 · 1 评论 -
接口数据的富文本带换行符怎么展示？
在css文件添加一行css就可以解决.more{white-space: pre-line;}原创 2021-04-09 10:40:15 · 516 阅读 · 0 评论 -
使定位position:absolute样式水平滚动的方法
平常水平滚动其实挺好实现的主要是给容器添加这两行代码实现：white-space: nowrap; overflow-x: scroll;但是加了个定位就不太行了，定位和这两行不在同一个容器中，所以要在这个容器的外层再加一个包裹的容器用来定位，里面那个容器就直接用来实现水平滚动。先来看看效果图：<html> <body> <div class='div-outer'> <div class='outer...原创 2020-07-27 14:22:10 · 1175 阅读 · 0 评论 -
common.scss
$theme-Color:#004FBF;$theme-fontFamily:'.PingFangSC-Semibold';$reguler-fontFamily:'.PingFangSC-Regular';$medium-fontFamily:'.PingFangSC-Medium';$font-d9:#D9D9D9;$font-f0:#F0F0F0;@mixin grad...原创 2018-09-12 15:25:43 · 1289 阅读 · 0 评论 -
IE滤镜包括旋转角度、渐变
旋转滤镜：filter:progid:DXImageTransform.Microsoft.BasicImage(enabled=bEnabled,grayScale=bGray,mirror=bMirror,opacity=fOpacity,XRay=bXRay)enabled:可选项，布尔值。设置或检索滤镜是否激活。默认true表示滤镜激活，取值false表示滤镜被禁止。graySca原创 2017-03-02 10:30:52 · 1275 阅读 · 0 评论 -
带有position时的居中，包括fixed、relative、absolute
啥都不说上代码： 居中 .d1 { position: fixed; bottom: 0; left: 0; width: 100%; height: 300px; background-color: green;原创 2017-01-04 16:01:37 · 1106 阅读 · 0 评论 -
白色边框透明加动画
代码如下： .big{ width: 200px; height: 200px; text-align: center; vertical-align: middle; line-height: 200px; margin: 0原创 2017-02-14 15:43:16 · 679 阅读 · 0 评论 -
关于Less里的css一些规则，了解入门less
1、.class1{&:hover{ //&表示当前标签、类、id的hover opacity: 0.9; }}2、.main-content{ background-color: #95000e; .contentWrapper{ //这个类属于.main-content 。。。 }}.contentWrappe原创 2016-11-28 15:42:52 · 3625 阅读 · 0 评论 -
用css的垂直居中二十七种方法
<!DOCTYPE html><html><head> <title></title></head><body> <h1>第一种</h1> <div style="width:600px; height:600px原创 2016-09-20 09:02:19 · 478 阅读 · 0 评论 -
a标签跳转锚点到页面指定位置
代码如下：JS方式: bb aaaaaaaaaaa bbbbbbbbbb ccccccccccc dddddddddd 直接根据id或者name属性:原创 2017-02-14 15:51:09 · 36912 阅读 · 0 评论 -
纯css3饼图五等分
HTML代码如下： pie 良好 优秀 未提交 需努力 加油 98% 得分率 css代码如下：原创 2017-07-30 13:06:51 · 4649 阅读 · 0 评论 -
移动端，控制头部尾部固定
直接上代码：用flex布局 头尾部固定*{ margin: 0; padding: 0;} .container{ display: flex; display: -webkit-flex; min-height: 100vh; flex-direction: column; text-align: center; fon原创 2017-07-18 09:25:03 · 6004 阅读 · 0 评论 -
纯CSS箭头
先看效果图：代码如下： .arbox { position: relative; top: -1rem; display: inline-block; margin-left: 2rem; float: left; margi原创 2017-09-19 15:20:32 · 395 阅读 · 0 评论 -
2个div左右铺满整个浏览器，左边div一直保持100px，右边的div跟随浏览器大小变化
方法一：使用flex效果如图所示： *{ margin:0; padding:0;}.box {/* width: 400px; */ height: 100px; display: flex; flex-direction: row; align-items: center; border: 1px s原创 2017-10-12 15:39:49 · 3194 阅读 · 0 评论 -
平行四边形、梯形导航条
效果如图：hover 的效果如图：代码如下： 导航条 首页 呼呼呼 嘻嘻嘻 设置 个人中心 .keith li { position: relative; float:left原创 2017-10-13 13:54:59 · 1347 阅读 · 1 评论 -
移动端model对话框
会根据窗口大小调整位置，宽度固定(可以自己调整)，高度是auto效果如图：代码如下： 我是弹层 取消确定scss代码如下：.layerOfTeacher{ position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; height: 100%原创 2017-10-16 14:29:31 · 675 阅读 · 0 评论 -
移动端的div 按钮点击会出现阴影
去除的方法就是让它的高亮透明度为0，或者直接用transparentdiv{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}原创 2019-03-22 17:40:21 · 1206 阅读 · 0 评论 -
移动端 如何适配雪碧图
当然是用rem！！！注意雪碧图当作背景图的时候要设置background-size:也是rem，比如：background-size:7.5rem 3rem;其他的取值自然也是rem，不要用PX，否则不同手机屏幕，从雪碧图里面截取的icon不会自适应！！！...原创 2019-03-22 17:46:43 · 774 阅读 · 0 评论 -
IOS 的z-index 失效的原因
罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效调了超久，还用了safari的真机调试才找出来，心累。。。转载至：https://blog.youkuaiyun.com/a460550542/article/details/83104547...转载 2019-06-06 19:41:02 · 5098 阅读 · 2 评论 -
css和js弹窗
弹窗 .window{ display: none; } .active { display: block; } .showModel { position: fixed; top: 0; left: 0; width: 100原创 2017-03-23 10:46:14 · 607 阅读 · 0 评论 -
纯css的大于号样式
.gl{//大于号样式 width: 12px; height: 12px; position: absolute; border-left: 1px solid #999; border-bottom: 1px solid #999; -webkit-transform: translate(0,-50%) rotate(-135deg); transform: tr原创 2017-03-29 09:57:59 · 12289 阅读 · 0 评论 -
用sublime text3 编译less并且转换成css
1、在sublime text3 安装插件less和Less2Css2、安装nodejs3、设置添加环境变量4、安装less，打开cmd ,输入npm install -g less 然后再安装一个插件less-plugin-clean-css5、在sublime新建.less文件，然后输入less，每次ctrl+s保存的时候，改less文件会自动保存到当前目录下变成.cs原创 2016-11-29 16:11:44 · 5374 阅读 · 7 评论 -
用js实现按钮加减，减到0停止
html代码如下： + 0 - css代码如下：.button { background-color: white; border: 4px solid #原创 2016-12-08 17:56:43 · 6646 阅读 · 1 评论 -
用CSS和js实现模态框
用CSS和JS改变z-index的属性值就可以实现模态框 modal box*{ margin:0px; padding:0px;} 弹框 欢迎你登录 document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面{原创 2016-11-25 13:37:30 · 5083 阅读 · 0 评论 -
按钮兼容IE8的pug和less代码
用div包裹a标签实现ie兼容pug代码如下：.btn a(href='index.html?aid=842219' target='_blank') 立即预订less代码如下：.btn{ a{display:inline-block;text-decoration: none;width:488px; height:65px; borde原创 2016-12-13 12:12:38 · 950 阅读 · 0 评论 -
判断子元素个数
如果.list里面的li元素大于等于4，则显示红色，并且字体变成30px .list li:nth-last-child(n+4) ~ li, .list li:nth-last-child(n+4):first-child{// color:red; font-size:30px; } 1 2 3 43 43r -->可以把注原创 2016-11-18 14:40:20 · 2234 阅读 · 0 评论 -
纯CSS实现tab切换
用单选框的:checked伪类和相邻选择器实现代码如下： input, .table-content{ display:none; } #tab1:checked ~ #content1, #tab2:checked ~#content2{ display:block; } TAB1 TAB2 CONTENT11 6666原创 2016-11-18 15:15:07 · 2159 阅读 · 1 评论 -
如何给div添加placeholder属性
简单粗暴上代码： .input{ width:200px; height:30px; border:1px solid grey; } .input:empty::before{ color:lightgrey; content:attr(placeholder); }原创 2016-11-18 12:37:51 · 13467 阅读 · 2 评论 -
CSS技巧——不用JavaScript改变聚焦状态
不用JavaScript就能实现聚焦和不聚焦、输入有效值的状态切换首先来看看代码： .send{ display:none; } .input:focus ~ .send{ //表示input框聚焦后且是有send类选择器的标签 display:inline-block; } .input:valid ~ .send{ //表示input原创 2016-11-18 11:29:23 · 1978 阅读 · 0 评论 -
jQuery实现图片左右出现和隐藏动画（腰封）
一定要引入jQuery，代码如下： .container{//整个容器的样式 display:block; position:fixed; z-index: 13; } .d1{//红色部分的样式 position:fixed; z-index:999999; overflow:hidden;; bottom:原创 2017-01-03 16:57:03 · 3378 阅读 · 0 评论 -
图片居中自适应浏览器缩放
代码如下，div里面放图片就好了 图片适应 body{ min-width: 1000px;//设置最小宽度，这样图片才不会乱掉 } .div{ width: 1000px; height: 200px; margin: 0 auto; } .divimg{ //如果放了图片就不用设置高度、宽度、边原创 2016-12-19 14:01:37 · 1969 阅读 · 0 评论 -
用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜
雪花飘落：//雪花飘落.snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation: snowDown 3s linear infinite normal; position: relative;}@keyframes snowDown { from {原创 2017-03-06 17:44:05 · 10717 阅读 · 3 评论 -
兼容IE8的旋转角度
css代码如下：div{position:absolute;filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -o-transform: rotate(350deg);t原创 2017-02-14 15:56:30 · 6574 阅读 · 0 评论 -
css梯形、六角星、五角星、六边形
效果如图：代码如下： .tix { border-bottom: 100px solid #67AFF2; border-left: 50px solid transparent; border-right: 50px solid transparent;转载 2017-02-22 15:43:08 · 2597 阅读 · 0 评论 -
兼容IE8的渐变颜色css3
css代码如下：body{ width:100%; height:200px; background: -webkit-gradient(linear, 0 0, 0 0, from(#F6F4EF), to(#F1EDE6)); background: -webkit-linear-gradient(left,#F1EDE6, #F6F原创 2017-02-14 15:53:26 · 9982 阅读 · 1 评论 -
CSS实现垂直和s水平下拉菜单
垂直下拉菜单 *{margin:0;padding:0;} .ul1{ text-decoration: none; list-style: none; float: left; margin: 30px 50px; } .ul1 li{ width: 50px; position: relative; padding原创 2017-01-10 14:27:27 · 4185 阅读 · 1 评论 -
nth-child(odd)和nth-child(even)
都是css3选择器，odd是奇数行，even是偶数行原创 2016-12-20 15:55:45 · 8891 阅读 · 0 评论 -
用jQuery实现选tab项卡效果
代码如下： jQuery实现tab标签切换效果 *{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#outer {width:450px;margin:150px auto;}#tab {overflow:hidden;zoom:1;background:#afd;b原创 2016-12-20 14:44:08 · 1828 阅读 · 0 评论 -
css中zoom的作用
Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。Zoom的使用方法：zoom : normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数原创 2016-12-20 13:36:04 · 559 阅读 · 0 评论 -
block、inline-block、inline的区别
1、display:block是指该元素变为块级元素，独占一行，可以设置height、width属性，也可以设置margin、padding属性2、display：inline是指该元素变为行内元素，会和其他相邻行内元素在同一行，直到本行满了会换下一行，宽度随元素的内容变化，设置height、width属性无效，水平方向的margin和padding设置有效，垂直方向margin和paddin原创 2016-11-16 20:19:50 · 371 阅读 · 0 评论