2018.07.13學(xué)習(xí)總結(jié)
1.如果將box-sizing設(shè)置為borer-box會(huì)發(fā)生什么望浩？
答：將box-sizing設(shè)置為borer-box瀑晒，設(shè)置邊框和填充清蚀，盒子的寬度不變泡孩。
border-box.PNG
2.float
float的原理就是相對于整個(gè)頁面浮動(dòng)起來
FLOAT.PNG
float 父元素.PNG
多頁面float.PNG
3.練習(xí)4個(gè)框
4個(gè)框.PNG
4.導(dǎo)航條
導(dǎo)航條 nav.PNG
5.命名規(guī)范
1.布局相關(guān)
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 盒容器 | wrap | wrap |
| 盒子 | box | box |
| 容器 | container | container |
| 主欄 | main | main |
| 側(cè)欄 | sidebar / aside | sidebar / aside |
| 文檔 | doc | doc |
| 頭部 | head | hd |
| 主體 | body | bd |
| 底部 | foot | ft |
2.模塊相關(guān)
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 導(dǎo)航 | navigation | nav |
| 面包屑 | crumb | crumb |
| 菜單 | menu | menu |
| 選項(xiàng)卡 | tab | tab |
| 標(biāo)題 | title | title |
| 內(nèi)容 | content | content |
| 列表 | list | list |
| 表格 | table | table |
| 排行榜 | rank | rank |
| 登陸 | login | login |
| 表單 | form | form |
| 品牌標(biāo)識(shí) | logo | logo |
| 廣告 | advertise | ad |
| 搜索 | search | search |
| 切換 | slide | slide |
| 提示 | tips | tips |
| 版權(quán) | copyright | copyright |
| 按鈕 | button | btn |
| 輸入 | input | ipt |
| 結(jié)果 | result | result |
| 下載 | download | dowload |
| 新聞 | news | news |
| 注冊 | register | reg |
| 熱點(diǎn) | hot | hot |
| 展開 | collapse | collapse |
| 警告 | alert | alert |
| 提示 | tooltip | tooltip |
| 下拉 | dropdown | dropdown |
3.狀態(tài)相關(guān)
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 語義 | 命名 | 簡寫 |
| 選中 | selected | selected |
| 當(dāng)前 | current | current |
| 激活 | active | active |
| 顯示 | show | show |
| 隱藏 | hidden | hide |
| 打開 | open | open |
| 關(guān)閉 | close | close |
| 出錯(cuò) | error | err |
| 禁用 | disabled | disabled |
| 擴(kuò)展 | extend | extend |
4.命名規(guī)則
4.1駝峰命名
<p class="navWrap"></p>
4.2 劃線命名
<p class="nav-wrap"></p>
或
<p class="nav_wrap"></p>
