頁面開發步驟：
1、全域性reset、設定基礎背景色、設定基礎字型樣式
2、全域性布局頁面結構,meta 標籤引入
3、按鈕等相同的樣式，用scss提前寫好乙份公用,漸變等 border-radius box-shadow ,水平垂直居中
4、相容的樣式，提前寫好scss,統一引用
5、盒子模型，怪異型(border-box)和標準型(content-box)
6、移動端如果需要識別***
// 方案一：
*body
// 去掉常見標籤的基礎樣式
// 去掉a標籤樣式，並繼承父級顏色
a ul,li
input
.div
/*去掉點選時出現的黑色陰影*/
a,input,button
// 移動端取消touch高亮效果
a // 方案二：
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img
body
ul,li,ol
select,input,img,select
input
a.clear
p,li
img// 移動端css（如果有***的多圖頁面）
// 1、如果直接將暴露在最外面，點選，會出現直接全屏顯示，禁止移動端的點選事件，用下面的css，相容性 ie11+
img
.img-no-click
pc
.layout
// 左右浮動
.fl
.fr
// 常用清除浮動
.clearfix:after
.clearfix
// 多行文字溢位
.div
// 單行文字溢位
.div
// 統一怪異盒子模型
.border-box
// 統一標準盒子模型
.content-box
// 按鈕
@mixin btn-style($width, $height, $fontsize, $color, $backgroundcolor )
}// 定義三角形
/* 方向 三角的寬度 三角的顏色 */
@mixin arrow($direction, $width, $color)
@else if $direction == bottom
@else if $direction == left
@else if $direction == right
}// 使用
.trangle
// css 公用
.errtxt
// 引用
.box
// 圓角相容
@mixin border-radius
// 從上到下漸變
@mixin gradient($startcolor, $endcolor)
// 從左到右漸變
@mixin gradient($startcolor, $endcolor)
// 放大
@mixin scale($scale)
// 引用：
.notice
//方法： 父元素相對定位，子元素絕對定位
//html結構
//css
/* 方法一 */
.box
.child
/* 方法二 */
.child
/* 方法三 */
.child
/* 方法四 */
.box
以上前三種方法都是利用絕對定位處理。第四中方法是flex
## rem布局寫法
// 給html基礎畫素
function init()
init();
$basepx:750;// 設計圖畫素750*x
@function pxcount($px)
頁面布局 兩列布局
left right right css left right簡單的布局方法，左側設定浮動，右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix，然後對r...
頁面布局之flex布局
flex布局 flex布局也叫作彈性盒子布局，可以簡便 完整 響應式的實現各種頁面布局，同時也支援所有的瀏覽器。父級元素設定css樣式為 display flex。內容的位置用justify content來控制，常用的屬性有 space between space around center le...
頁面布局（三欄布局）
假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應。1.浮動布局 2.絕對定位 3.flexbox解決 4.table cell 布局 5.grid網格布局。doctype html en utf 8 viewport content width device width,i...