页面布局整理(基于scss)
页面开发步骤:
1、全局reset、设置基础背景色、设置基础字体样式
2、全局布局页面结构,meta 标签引入
3、按钮等相同的样式,用scss提前写好一份公用,渐变等 border-radius box-shadow ,水平垂直居中
4、兼容的样式,提前写好scss,统一引用
5、盒子模型,怪异型(border-box)和标准型(content-box)
6、移动端如果需要识别二维码
全局reset、设置基础背景色、设置基础字体样式
统一reset
// 方案一:
*{
margin: 0;
padding: 0;
outline: none;
}
body {
background-color: #f8f8f8; //基础背景色
font: 14px/1.5 "微软雅黑","Microsoft YaHei",宋体"; //基础字体样式
color: #7d7d7d; //基础字体颜色
position:relative;
}
// 去掉常见标签的基础样式
// 去掉a标签样式,并继承父级颜色
a {
cursor: pointer;
color: inherit;
display: inline-block;
text-decoration: none;
}
ul,li {
list-style-type: none;
}
input {
outline: none;
-webkit-apperance: none; // 去掉ios输入框内部阴影
}
.div {
-webkit-user-select: none;// 移动端禁止选中内容
}
/*去掉点击时出现的黑色阴影*/
a,input,button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
// 移动端取消touch高亮效果
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
// 方案二:
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img{
margin:0;
padding:0;
border:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
color:#333;
font-size:16px;
font: 14px/1.5 "微软雅黑","Microsoft YaHei",宋体"; //基础字体样式
}
ul,li,ol{
list-style-type:none;
}
select,input,img,select{
vertical-align:middle;
}
input{
font-size:12px;
}
a{
text-decoration:none;
outline:none;
}
.clear{
overflow:hidden;
}
p,li{
letter-spacing: 1px;
}
img{
display:block;width:100%;
}
// 移动端css(如果有二维码的多图页面)
// 1、如果直接将图片暴露在最外面,点击图片,会出现图片直接全屏显示,禁止移动端图片的点击事件,用下面的css,兼容性 ie11+
// 2、如果引入的图片较多,同时又有二维码需要长按识别,可以将图片全局设置成none, 其中二维码图片的img 设置成auto;
img {
pointer-events: none; // auto默认值
}
.img-no-click {
pointer-envents: none;
}
全局布局页面结构
页面常见布局
pc
.layout {
width: 110px;
margin: 0 auto;
}
// 左右浮动
.fl {
float: left;
}
.fr {
float: right;
}
// 常用清除浮动
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
// 多行文本溢出
.div{
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
// 单行文本溢出
.div{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
// 统一怪异盒子模型
.border-box {
box-sizing: border-box;
-webkit-box-sizing:
border-box;
-moz-box-sizing: border-box;
}
// 统一标准盒子模型
.content-box {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
添加相关的meta 标签
<!--必须加载-->
<meta charset='utf-8'>
<meta name="keywords" content="html5,css3,vue,axios,vuex"> <!-- 关键词 -->
<meta name="description" content="hzzly,xyy-vue"> <!-- 网站内容描述 -->
<!--按需添加-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--移动端-->
<meta name="format-detection" content="telephone=no, email=no"> <!--忽略页面中数字格式和邮箱格式识别为电话号码和邮箱-->
<meta http-equiv="Cache-Control" content="no-siteapp"/> <!--禁止百度快照缓存-->
<meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="apple-mobile-web-app-capable" content="no"><!--删除默认的苹果工具栏和菜单栏。yes为显示工具栏和菜单栏-->
<input type="text" autocapitalize="off" /><!--关闭iOS键盘首字母自动大写-->
按钮等通用样式,精简css,(scss)
// 按钮
@mixin btn-style($width, $height, $fontSize, $color, $backgroundColor ) {
width: $width;
height: $height;
display: block;
text-align: center;
line-height: $height;
font-size: $fontSize;
color: $color;
background: $backgroundColor;
opacity: 0.9;
&:hover {
opacity: 1;
}
}
// 定义三角形
/* 方向 三角的宽度 三角的颜色 */
@mixin arrow($direction, $width, $color) {
width: 0;
height: 0;
line-height: 0;
border-width: $width;
border-style: solid;
@if $direction == top {
border-color: transparent transparent $color transparent;
border-top: none;
}
@else if $direction == bottom {
border-color: $color transparent transparent transparent;
border-bottom: none;
}
@else if $direction == left {
border-color: transparent $color transparent transparent;
border-left: none;
}
@else if $direction == right {
border-color: transparent transparent transparent $color;
border-right: none;
}
}
// 使用
<div class="trangle"></div>
.trangle {
@include arrow(bottom, 10px, #f00)
}
// css 公用
.errtxt {
width: 1100px;
height: 200px;
border: 1px solid #ccc;
}
// 引用
.box {
color: #999;
@extend .errtxt;
}
兼容早定义
// 圆角兼容
@mixin border-radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
// 从上到下渐变
@mixin gradient($startColor, $endColor) {
background: -moz-linear-gradient(top, $startColor 0%, $endColor 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%,$endColor));
background: -webkit-linear-gradient(top, $startColor 0%,$endColor 100%);
background: -o-linear-gradient(top, $startColor 0%,$endColor 100%);
background: -ms-linear-gradient(top, $startColor 0%,$endColor 100%);
background: linear-gradient(to bottom, $startColor 0%,$endColor 100%);
}
// 从左到右渐变
@mixin gradient($startColor, $endColor) {
background-image: -moz-linear-gradient(left, $startColor 0%, $endColor 100%);
background-image: -webkit-gradient(linear, left top, right top,color-stop(0%,$startColor, color-stop(100%,r$endColor;
background-image: -webkit-linear-gradient(left, $startColor 0%,$endColor 100%);
background-image: -o-linear-gradient(left, $startColor 0%,$endColor 100%);
background-image: -ms-linear-gradient(left, $startColor 0%,$endColor 100%);
background-image: linear-gradient(to right, $startColor 0%,$endColor 100%);
}
// 放大
@mixin scale($scale){
-webkit-transform: scale($scale);
-ms-transform: scale($scale);
-o-transform: scale($scale);
transform: scale($scale);
}
// 引用:
.notice {
background:#fff;
@include border-radius;
}
不定宽高的水平垂直居中
//方法: 父元素相对定位,子元素绝对定位
//html结构
<div class="box">
<div class="child"></div>
</div>
//css
/* 方法一 */
.box {
width: 300px;
height: 300px;
position: relative;
background: #ccc;
}
.child {
width: 100px;
height: 100px;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
z-index: 10;
background:#ff0;
}
/* 方法二 */
.child {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%, -50%);//兼容性ie10+
background:#ff0;
}
/* 方法三 */
.child {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
z-index:3;
margin-left: -50px;
margin-top: -50px;
background:#ff0;
}
/* 方法四 */
.box {
justify-content:center; //子元素水平居中,
align-items:center; //子元素垂直居中;
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
以上前三种方法都是利用绝对定位处理。第四中方法是flex
## rem布局写法
// 给html基础像素
function init(){
var fontSize = document.documentElement.clientWidth;
document.body.parentNode.style.fontSize = fontSize +'px';
}
init();
$basePx:750;// 设计图像素750*x
@function pxCount($px){
@return $px/$basePx+rem;
}
页面布局整理(基于scss)的更多相关文章
- html5: table表格与页面布局整理
传统表格布局之table标签排版总结: 默认样式: <style> table { max-width: 800px; border-spacing: 2px; border-coll ...
- CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3 Flex布局整理(一)
一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...
- CSS3 & 页面布局
相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 【Android】纯代码创建页面布局(含异步加载图片)
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
随机推荐
- listView使用小技巧P66--P76
1.设置分割线高度和颜色 android:divider="@android:color/darker_gray" android:dividerHeight="10dp ...
- CSS: The resize Property
用户手动调节输入框样式: <!DOCTYPE html> <html> <head> <style> div { border: 2px solid; ...
- ng 指令的自定义、使用
1.创建和使用var app = angular.module('myApp',['ng']);app.directive('指令名称',func); 自定义指令的命名:驼峰式,有两部分构成,前缀一般 ...
- opencv 识别答题卡
参考这个网站,然后自己 找了张图片试了一下 http://blog.csdn.net/cp562090732/article/details/47804003 // test.cpp : 定义控制台应 ...
- 深入理解java虚拟机-第七章
第7章 虚拟机类加载机制 类的加载的时机 加载 Loading, 连接 Linking(验证 Verfiication, 准备Preparation, 解析 Resolution) 初始化 Initi ...
- css关系选择符
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- Ubantu 新建用户后没有生成对应文件夹
原命令:useradd python 改正后:useradd python -m 后成功在home目录下创建文件夹 原因: man useradd就可以看到如此介绍:Create the user´s ...
- bzoj 4881 [Lydsy1705月赛]线段游戏
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4881 1.当一块相互交织的线段中有3个或以上两两相交的那种线段时,无解. 这就是最长下降子序 ...
- oracle驱动包maven下载失败解决
oracle是付费的,因此jar包也不是随便让人下的,这就给maven的下载和编译带来了麻烦,因为我们没法从maven仓库直接拿来用.解决办法就是先从别的地方获取jar包,再放到本地仓库里去,这样运行 ...
- 第12篇 PSR-1规范
这个规范也不多,七点如下: 1. Overview Files MUST use only <?php and <?= tags. Files MUST use only UTF-8 wi ...