页面布局整理(基于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;
}