HTML標籤的應用（新手）

時間 2019-11-24

標籤 html 標籤應用新手欄目 HTML 简体版

原文原文鏈接

雪碧圖（精靈圖）：
sprite
compass-合併（儘可能寬高相同）css

兼容性：
1.resct重置技術：normalize技術
2.加前綴：-webkit- -moz- -0- -ms-
3.<!DOCTYPE>解析模式
4.css hack 不一樣瀏覽器顯示不一樣的頁面內容
5.條件註釋<LTE...><GTE...>
6.導入包（引入）html

------------------------------
1.模糊度：opality(0-1) filter(0-100) -----IE
2.PNG圖片-導包插件
3.圓角-導包圖片
4.BFC-*ZOOM=1<IE觸發BFC> haslayout技術
5.雙倍margin的兼容性
6.IE下有3PX的差距
7.font-size 10px 一下審查元素IE最小8px
8.條件註釋寫在head部分jquery

JS-naviegtor-判斷瀏覽器的版本web

SASS:（C盤下都不能爲中文，文件也不能爲中文）
$變量名：值
默認變量值：！default
無參數混合：@mixin名稱{聲明}
有參數的混合：@mixin_($opacity:50){聲明}bootstrap

bootstrap框架;屏幕分辨率爲1024*768採用界面寬960px
1.柵欄式佈局法
-------------------------------
12列每格60px 3.6.3佈局三格式佈局
16列每格40px 3.3.6.4 四格式佈局
24列每格30px
36列
---------------------------------------------
container容器
下載解壓後獲得的目錄 .min壓縮版
bootstrap/css-js-font
------------------------------------
移動端
《meta name="vieport" content="width=device-width;initial-scale=1.0》
加尾後user-scalable=no 禁用放大縮小頁面
頁面1：1引用手機設備
bootstrap.html
1.在head中link引入<bootstrap.min.css>
2.<meta name="vieport"
3.<script src="../js/jquery-1.11.2-min.js"></script>
4.<script src="../js/bootstrap.min.js"></script>
5.<html lang="zh-CN"
禁用響應式佈局
head中不要添加meta vieport瀏覽器

柵欄選項框架

手機平板桌面超寬桌面
12列 <768px >=768px >=992px >=1200px
class前綴 .col-xs- .col-sm- .col-md- .col-lg-
槽間距 30px左右均有15px每列佈局

bootstrap:
css響應式佈局-----手機-----平板-------桌面------超寬
自適應國外：自適應響應式佈局字體

@media 媒體查詢
scree(width:值)
屏幕 768px

Bootstrap(值爲rem）
針對APP端字體大小插件

1px=1px
1em=16px(瀏覽器默認值）
1rem=16px

em相對body會繼承
rem相對的是根元素HTML不會繼承
讓字體進行自適應

HTML{font-size:20px}

@media媒體查詢PC端@media screen and (min-width:992px){CSS}平板@media screen and (min-width:768px)and (max-width:991px){css}APP@media screen and (max-width:767px){css}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。