从FrozenUI中学习CSS的实际解决方案

前言：最近，在查看FrozenUI框架时，上面提及了很多了CSS的常用场景的实际解决方案，（如：1px解决方案，文字截断，占位，表单开关，角标等，同时也解决了移动端的适配问题等），感觉很有实用价值，所以在此mark一下。

一、1px的解决方案

1px解决移动端retina屏幕1像素的显示问题。

<ul class="ui-list-text border-list"><li class="ui-border-t">上边框</li><li class="ui-border">边框</li><li class="ui-border-b">下边框</li><li class="ui-border-tb">上下边框</li><li class="ui-border-l">左边框</li><li class="ui-border-r">右边框</li>
</ul>

.border-list {background-color:#fff;
}
.border-list li {width: 100px;margin: 10px auto;-webkit-box-pack:center;text-align:center;
}
.ui-list-text>li {position:relative;padding-top: 10px;padding-bottom: 10px;padding-right: 15px;-webkit-box-align: center;
}
/***上边框***/
.ui-border-t:before {border-top: 1px solid #e06161;content:'';display:block;width: 100%;position: absolute;left: 0;top: 0;-webkit-transform-origin:left top;
}
/***边框***/
.ui-border::before {content:"";width:100%;height:100%;position:absolute;top:0;left:0;border:1px solid #e06161;-webkit-transform-origin:0 0;padding:1px;-webkit-box-sizing:border-box;pointer-events:none;z-index:10;pointer-events:none;
}
/***下边框***/
.ui-border-b::before {border-bottom:1px solid #e06161;content:'';display:block;width:100%;position:absolute;left:0;bottom:0;-webkit-transform-origin:left bottom;
}
/***上下边框***/
.ui-border-tb::before {border-top:1px solid #e06161;content:'';display:block;width:100%;position:absolute;left:0;top:0;-webkit-transform-origin:left top;
}
/***左边框***/
.ui-border-l::before {border-left:1px solid #e06161;content:'';display:block;bottom:0;position:absolute;left:0;top:0;-webkit-transform-origin:left top;
}
/***右边框***/
.ui-border-r::before {border-right:1px solid #e06161;content:'';display:block;bottom:0;position:absolute;right:0;top:0;-webkit-transform-origin:right top;
}
/***圆角边框***/
.ui-border-radius::before {content:"";width:100%;height:100%;position:absolute;top:0;left:0;border:1px solid #e06161;-webkit-transform-origin:0 0;padding:1px;-webkit-box-sizing:border-box;border-radius:8px;pointer-events:none;z-index:10;
}

二、占位的解决方案

占位解决方案：失去响应时，相对居中，默认高宽比为31.25%，重写需覆盖padding-top属性。

<section class="ui-placehold-wrap"><div class="ui-placehold">正在加载中...</div>
</section>

.ui-placehold-wrap {padding-top:31.25%;position:relative;
}
.ui-placehold {color:#bbb;position:absolute;top:0;width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-sizing:border-box;text-align:center;height:100%;z-index:1;
}

三、两端留白的解决方案

两端留白，640以下10px,以上15px。

<ul class="ui-row ui-whitespace"><li class="ui-col ui-col-50">50</li><li class="ui-col ui-col-50">50</li>
</ul>

.ui-row {display:block;overflow:hidden;
}
.ui-whitespace {padding-left:12px;padding-right:12px;
}
.ui-col {padding:5px;background:#777;text-align:center;box-sizing:border-box;border:1px solid #ddd;
}
.ui-col-50 {width:50%;
}
.ui-col {float:left;
}

四、表单开关项的解决方案

通过CSS设置表单开关项的解决方案。

<form action=""><div class="ui-form-item ui-form-item-switch ui-border-b"><p>对附近的人可见</p><label class="ui-switch"><input type="checkbox"></label></div>   <div class="ui-form-item ui-form-item-switch ui-border-b"><p>对附近的人可见</p><label class="ui-switch"><input type="checkbox" checked=""></label></div>
</form>

.ui-form-item {max-width:375px;margin:0 auto;
}
.ui-form-item-switch {display:-webkit-box;-webkit-box-align:center;
}
.ui-form-item {position:relative;font-size:18px;height:46px;line-height:46px;padding-right:12px;padding-left:12px;display:-webkit-box;-webkit-box-orient:horizontal;
}
.ui-border-b::after {border-bottom:1px solid #e9e9e9;content:'';display:block;width：100%;position:absolute;left:0;bottom:0;-webkit-transform-origin:left bottom;
}
.ui-switch {position:absolute;font-size:14px;right:12px;top:50%;margin-top:-16px;width:52px;height:32px;line-height:32px;
}
label {display:inline-block;margin-bottom:.5rem;
}
.ui-form-item input[type="checkbox"] {padding-left:0;
}
.ui-switch input {width:52px;height:32px;position:absolute;z-index:2;border:none;background:none;-webkit-appearance:none;outline:none;
}
.ui-switch input {box-sizing:border-box;
}
.ui-switch input::before {content:'';width:50px;height:30px;border:1px solid #dfdfdf;background-color:#fdfdfd;border-radius:20px;cursor:pointer;display:inline-block;position:relative;vertical-align:middle;-webkit-box-sizing:content-box;border-color:#dfdfdf;-webkit-box-shadow:#dfdfdf 0px 0px 0px 0px inset;-webkit-transition:border 0.4s,-webkit-box-shadow 0.4s;-webkit-background-clip:content-box;
}
.ui-switch input:checked:before {border-color:#64bd63;-webkit-box-shadow:#64bd63 0px 0px 0px 16px insert;background-color:#64bd63;-webkit-transition:border 0.4s,-webkit-box-shadow 0.4s,background-color 1.2s;background-color:#64bd63;
}
.ui-switch input::after {content:'';width:30px;height:30px;position:absolute;top:1px;left:0;border-radius:100%;background-color:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-webkit-transition:left 0.2s;
}
.ui-switch input:checked:after {left:21px;
}

五、角标的解决方案

各种小角标的设置

<ul class="ui-grid-halve"><li><div class="ui-grid-halve-img" style="overflow:hidden;"><i class="ui-subscript ui-subscript-red">最新</i><span style="background-image:url(http://placeholder.qiniudn.com/290x160);"></span></div></li>
</ul>

.ui-grid-halve  {max-width:375px;margin:0 auto;
}
.ui-grid-halve {overflow:hidden;
}
.ui-grid-halve>li {padding-right:5px;padding-bottom:10px;float:left;position:relative;-webkit-box-sizing:border-box;width:50%;
}
.ui-grid-halve-img {width:100%;padding-top:55.17%;position:relative;
}
.ui-subscript.ui-subscript-red {background-color:#fb5050;
}
.ui-subscript {position:absolute;left:0;top:0;z-index:9;height:16px;line-height:16px;font-size:11px;background-color:#fb5050;white-space:nowrap;color:#fff;padding:0px 50px;transform:rotate(-45deg) translate(-31%,-205%);
}
.ui-grid-halve-img>span {width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-repeat:no-repeat;font-style:normal;-webkit-background-size:cover;
}

六、进度条的解决方案

<div class="demo-block"><div class="ui-progress"><span style="width:50%;"></span></div>
</div>

.demo-block {position:relative;
}
.ui-progress {overflow:hidden;width:100%;height:2px;font-size:0px;background-color:#e2e2e2;box-sizing:border-box;
}
.ui-progress span {display:block;width:0%;background:#65d521;height:100%;font-size:0;
}

从FrozenUI中学习CSS的实际解决方案相关推荐

从FrozenUI中学习移动端屏幕适配问题
屏幕适配 Oaker edited this page on 18 Mar 2016.29 revisions 原文链接:https://github.com/frozenui/frozenui/wi ...
css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background，CSS的背景属性“background”提供 - phpStudy...
学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...
在html中引入css内部样式表使用,CSS样式学习笔记（三）html文件引入CSS的方法（2）...
一.CSS样式规则 CSS样式规则二.html文件中引入CSS样式的方法有以下三种(行内样式,内部样式表,外部样式表): 2.1 行内样式( 使用style属性引入CSS样式) 实现方式:CSS样式 ...
class根据状态 vue_系统学习 vue 中使用 css 的各种方式
Vue 中使用 CSS 非常灵活,可通过 class 和 style 给元素动态绑定 CSS,今天内容详细介绍使用规则: 在未使用 Vue 框架时,可以通过 class 和 style 来给 HTML ...
html ifrme 选择器,html中iframe/css样式设置，id,class选择器的使用规则等学习2019.9.2 08:00...
实例 html> 外部样式 I Love PHP中文网!from 赵桂福运行实例 » 点击 "运行实例" 按钮查看在线实例 2.内部样式:用标签实例 html> ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
[译] 如何学习 CSS
原文地址:How To Learn CSS 原文作者:Rachel Andrew 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- 译者:Mcskiller 校对者 ...
前端小白如何学习 CSS
很多人想让我给他们推荐有关CSS部分的教程,或者问我如何学习CSS. 我也看到很多人对CSS的部分内容感到困惑,一部分原因是由于对语言的过时认识. 鉴于CSS在过去几年中发生了相当大的变化,这是一个更 ...

从FrozenUI中学习CSS的实际解决方案

从FrozenUI中学习CSS的实际解决方案相关推荐

最新文章

热门文章