• CSS 选择器 同级元素 紧随元素

    发表于 2022-04-16 18:26:12   |   下载附件
    CSS 选择器之后的元素选择
    // 紧邻input之后的图片元素
    input[type="radio"] + img {
    	padding: 20px;
    	border-radius: 3px;
    	border: 2px solid #f1f1f1;
    	cursor: pointer;
    }
    // 在input之后的span元素 (与input同一父级)
    input[type="radio"] ~ span {
    	display: none;
    }
    input[type="radio"]:checked + img {
    	border: 2px solid #00aec4;
    	cursor: default;
    }
    input[type="radio"]:checked ~ span {
    	content: ' ';
    	width: 16px;
    	height: 16px;
    	display: block;
    	position: absolute;
    	right: 10px;
    	top: 10px;
    	background: url('../img/checked.png?v=@{version}') no-repeat center center;
    }
  • radio 单选样式重写

    发表于 2021-11-26 09:47:22   |   下载附件
    重写选择框radio单选单选样式
    // 重写选择框
    input[type='radio'] {
    	width: 1px;
    	height: 24px;
    	opacity: 0;
    	display: none;
    }
    // 未选中
    label {
    	background-image: url(/hrloo/rz/img/tpl/radio_nor2.png);
    	background-repeat: no-repeat;
    	background-position: 0px center;
    	width: 74px;
    	._f(n,14px,34px); 
    	color: #666666;
    	display:inline-block;
    	padding-left: 22px;
    }
    // 选中
    input[type="radio"]:checked + label {
    	background-image: url(/hrloo/rz/img/tpl/radio_hov.png);
    }
    // 禁用
    input[type="radio"]:disabled + label {
    	background: #ddd;
    }
    // 禁用 选中
    input[type="radio"]:checked:disabled + label {
    	background: #ddd;
    }
  • IOS 容器内滚动

    发表于 2021-09-13 10:03:11   |   下载附件
    滚动样式IOS自定义容器内滚动样式
    .app_containor {
    	height: 100%;
    	box-sizing: border-box;
    	overflow-y: auto;
    	-webkit-overflow-scrolling: touch;
    }
  • 解决 img 图像地址为 base64 格式数据时,在ios浏览器上不能长按下载图片问题

    发表于 2021-09-08 16:19:08   |   下载附件
    img 保存img 下载img base64 保存图片至本地
    img {
    	width: 100%;
    	display: block;
    	// 解决 img 图像地址为 base64 格式数据时,在ios浏览器上不能长按下载图片问题
    	-webkit-touch-callout:default; 
    }
  • 鼠标经过时的提示弹窗样式(小箭头样式)

    发表于 2021-09-03 14:43:41   |   下载附件
    tipshover弹窗提示弹窗样式
  • 兼容IE的容器绝对居中方案

    发表于 2020-10-28 11:01:11   |   下载附件
    绝对居中容器居中水平垂直居中内容垂直居中

    CSS:

    .container {
        display: table; /*主要代码*/
        *position: relative;  /*for ie67*/
        background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
    }
    .content {
        vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
        *position: absolute; *top: 50%; *left: 50%; /*for ie67*/
    }
    .center {
        display: inline-block; /*主要代码*/
        *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
        padding: 10px; border: 1px solid #fff;
    }


    HTML:

    <div class="container">
        <div class="content">
            <div class="center">
                啦啦啦,啦啦啦,我是卖报的小行家....<br>dsdADSsdSD
            </div>
        </div>
    </div>

  • 平缓渐变样式,放大缩小等

    发表于 2020-05-14 19:25:45   |   下载附件
    平缓渐变样式CSS3动画transition 渐变
    // LESS 渐变变化
    ._transition(){
    	transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
    }
    
    // LESS 图片渐变放大样式
    img { 
    	width: 100%; height: 158px; overflow:hidden; border-radius:5px 5px 0 0; ._transition();
    	&:hover {
    		transform: scale(1.1); -ms-transform: scale(1.1); ._transition();
    	}
    }
  • 向下箭头CSS样式

    发表于 2020-04-15 16:27:31   |   下载附件
    箭头向上箭头向下箭头arrow箭头样式

    HTML

    <div class="more up"><em>展开</em><u><i></i></u></div>


    CSS

    .more {
    	.font(b,14px,32px); float: right; cursor: pointer;
    	em { float: left; color: #333; margin-right:8px; font-weight:normal; }
    	u { 
    	    position: relative; display: block; width: 0; height: 0; float: left;
    	    margin-top: 14px;
    	    border-right: 6px solid transparent; 
    	    border-top: 7px solid #666; 
    	    border-left: 6px solid transparent; 
    	}
    	i { 
    	    position: absolute; display: block; left: -6px; bottom: 2px; width: 0; height: 0; 
    	    border-right: 6px solid transparent; 
    	    border-top: 7px solid #fff; 
    	    border-left: 6px solid transparent; 
    	}
    	&:hover {
    		em { color: #189AE5; }
    		u { border-top: 7px solid #189AE5; }
    	}
    	// 向上
    	&.up {
    		u { 
    		    border-bottom: 7px solid #666; 
    		    border-top: none; 
    		}
    		i { 
    			top: 2px; bottom: auto;
    		    border-bottom: 7px solid #fff; 
    		    border-top: none; 
    		}
    		&:hover {
    			em { color: #189AE5; }
    			u { border-bottom: 7px solid #189AE5; }
    		}
    	}
    }
  • IOS 手机浏览屏底部被挡住的CSS解决代码片断

    发表于 2019-11-30 22:50:06   |   下载附件
    ios padding浏览屏底部遮挡问题解决IOS 样式问题ios 移动样式

    IOS 手机浏览屏底部被挡住的CSS解决代码片断


    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);


  • 一个CSS值转REM的Sublime Text插件

    发表于 2019-08-12 10:34:58   |   下载附件
    CSSREMcss转remcss转rem sublime text 插件
每页显示10条,当前为第1页,总页数为5页