整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
件引用規(guī)范
先說(shuō)加載的規(guī)范，這個(gè)規(guī)范主要是為了提高頁(yè)面加載速度或者是首屏的速度。
1 CSS 文件或樣式在 head 標(biāo)簽中引用。頁(yè)面的渲染需要 CSS，所以盡量早的讓 CSS 文件加載出來(lái)。
2 JS 文件要放在 body 標(biāo)簽尾部。頁(yè)面里加載和運(yùn)行 JS 都會(huì)阻塞頁(yè)面的渲染過(guò)程，所以把 JS 放在尾部可以加快首屏顯示的速度，但對(duì)整個(gè)頁(yè)面完成加載的時(shí)間沒(méi)什么影響。
3 使用壓縮后的文件。線上使用的靜態(tài)文件，盡量都是壓縮好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，這樣可以減少文件的體積，從而減少下載的時(shí)間。
4 減少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加載并解析后才會(huì)去請(qǐng)求, 會(huì)拖慢 CSS 文件的加載速度。
屬性的書(shū)寫(xiě)規(guī)范
一、使用縮寫(xiě)
在 CSS 中有很多屬性或?qū)傩灾悼梢钥s寫(xiě), 在能用縮寫(xiě)的地方盡量使用縮寫(xiě)。
1、屬性的縮寫(xiě)。CSS 中有些屬性是可以合并的, 如:
margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;上面這幾組 margin 相關(guān)的屬性占了四條樣式, 我們可以使用一條 margin 屬性代替這四個(gè)方向的 margin：
margin: 10px 5px 0 5px;一般帶有方向的屬性, 縮寫(xiě)的時(shí)候各個(gè)方向的值都是按著"上 右 下 左"的順序?qū)懙摹Ａ硗馊绻膫€(gè)方向值一樣，可以直接用一個(gè)值代替四個(gè)方向；如果左右方向的值一樣，則可以省略最后一個(gè)左側(cè)的值。
上面這條縮寫(xiě)也可以寫(xiě)成：
margin: 10px 5px 0;2、顏色的縮寫(xiě)。在使用十六進(jìn)制顏色的時(shí)候, 如果 rgb 三個(gè)顏色位置中, 每?jī)晌坏念伾迪嗤? 可以把六位的顏色寫(xiě)成三位。
如：color: #22ffcc;
就可以寫(xiě)成：
color: #2fc;這兩種寫(xiě)法是等效的, 但要注意的是如果需要兼容低版本 IE 瀏覽器, 還是要用六位的顏色值。
3、數(shù)字的縮寫(xiě)。在 CSS 中如果整數(shù)部分是 0 的小數(shù), 可以忽略小數(shù)點(diǎn)前面的 0; 如果屬性值是 0, 則可以忽略屬性值的單位。
如: font-size: 0.8rem; padding: 0px;
這兩條屬性就可以做簡(jiǎn)寫(xiě)：
font-size: .8rem; padding: 0;二、屬性順序的規(guī)范
理論上, CSS 的屬性是一條一條解析執(zhí)行的。這種情況下, 就要把能確定大小和位置的屬性寫(xiě)在前面, 把對(duì)布局沒(méi)什么影響的屬性寫(xiě)在后面, 避免返工。
一般說(shuō)的使用順序如下:
1. 位置屬性 (position, top, right, z-index, display, float等)
2. 大小 (width, height, padding, margin)
3. 文字系列 (font, line-height, letter-spacing, color- text-align等)
4. 背景 (background, border等) 5. 其他 (animation, transition等)
注釋規(guī)范
一 文件頭注釋
/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/二 普通注釋
/* 頭部導(dǎo)航 */
.nav-top{
background: #ccc;
}CSS-Reset
邊距(margin)
margin-top：當(dāng)前盒子距離上層盒子頭部的像素；
margin-bottom：當(dāng)前盒子距離上層盒子底部的像素；
margin-left：當(dāng)前盒子距離上層盒子左部的像素；
margin-right：當(dāng)前盒子距離上層盒子右部的像素；
案例
去掉白色部分
<!--head內(nèi)部的css部分-->
<style type="text/css">
* { /*也可以寫(xiě)body*/
margin: 0px;
}
.box {
width: 300px;
height: 300px;
background-color: red;
margin: 0px;
}
.nav_box {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
<!--html body部分-->
<div class="box">
<div class="nav_box"></div>
</div>
天我教大家怎么零基礎(chǔ)編寫(xiě)html框架
首先建立一個(gè)index.html文件，index（為首頁(yè)的意思）
請(qǐng)大家先看看效果圖
網(wǎng)站可分為三個(gè)部分
head頭
<head></head>
body體
<body><body>
foot腳
<footer></footer>
在剛剛建好的index.html里面寫(xiě)上html標(biāo)準(zhǔn)代碼
<!--這為文本類型也是html開(kāi)始代碼-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其次給html寫(xiě)上編碼讓瀏覽器知道他是什么編碼，不然會(huì)出現(xiàn)亂碼
<!DOCTYPE html>
<html>
<head>
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網(wǎng)站標(biāo)題-->
<title></title>
</head>
<body>
</body>
</html>
在給網(wǎng)站起個(gè)標(biāo)題
<!DOCTYPE html>
<html>
<head>
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網(wǎng)站標(biāo)題-->
<title>html框架</title>
</head>
<body>
</body>
</html>
現(xiàn)在我們開(kāi)始寫(xiě)body體
先建立三個(gè)div塊
我們給這三個(gè)塊下個(gè)名稱
在給這三個(gè)div塊寫(xiě)上css樣式，css樣式有三種我們先講內(nèi)聯(lián)，下節(jié)課再講外聯(lián)
再給css樣式寫(xiě)上內(nèi)容
/*width:為寬度;height :為高;background:為網(wǎng)站背景;（也可以用color表示）css樣式要以;結(jié)尾*/
現(xiàn)在我們來(lái)看看效果
div塊靠左，不美觀怎么辦？
沒(méi)關(guān)系我們寫(xiě)上css讓它居中更美觀
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個(gè)像素點(diǎn)，auto為塊自動(dòng)居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
再讓我們看看效果吧
是不是居中了
只是這樣還不像網(wǎng)站怎辦別急我們?cè)俳o它寫(xiě)上幻燈片的框架和做導(dǎo)航和右內(nèi)容框架
我們?cè)诮ㄈ齻€(gè)塊分別命名為lmage（圖片的意思）left（左）right（右）
我們?cè)诮o這三個(gè)塊寫(xiě)上css樣式
讓我們看看效果吧
讓我們?cè)俳o右內(nèi)容區(qū)寫(xiě)的東西吧
我們?cè)賹?xiě)上四個(gè)塊
我們給這四個(gè)塊寫(xiě)上css樣式
.kuai1{
width: 50%;
height:50%;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
background: #efbefb;
}
這是我們會(huì)發(fā)現(xiàn)板塊亂了怎么辦，別擔(dān)心現(xiàn)在教給你新知識(shí)那就是浮動(dòng)代碼
/*float:為浮動(dòng)代碼;（意為漂浮起來(lái)）*/
/*float:left;(向左浮動(dòng))float:right;(向右浮動(dòng))*/
讓我們看看效果如何把
是不是很漂亮呢
好了現(xiàn)在我們就回顧一下這節(jié)課的知識(shí)點(diǎn)吧
<!--網(wǎng)站編碼為utf-8-->
<meta charset="utf-8">
<!--這為網(wǎng)站標(biāo)題-->
<title>html框架</title>
/*width:為寬度;height :為高;background:為網(wǎng)站背景;（也可以用color表示）css樣式要以;結(jié)尾*/
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個(gè)像素點(diǎn)，auto為塊自動(dòng)居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
/*float:為浮動(dòng)代碼;（意為漂浮起來(lái)）*/
/*float:left;(向左浮動(dòng))float:right;(向右浮動(dòng))*/
<!--這為div（塊）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class為塊名稱也可以用//id//,//name//為名稱-->
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
