Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
件引用規范
先說加載的規范,這個規范主要是為了提高頁面加載速度或者是首屏的速度。
1 CSS 文件或樣式在 head 標簽中引用。頁面的渲染需要 CSS,所以盡量早的讓 CSS 文件加載出來。
2 JS 文件要放在 body 標簽尾部。頁面里加載和運行 JS 都會阻塞頁面的渲染過程,所以把 JS 放在尾部可以加快首屏顯示的速度,但對整個頁面完成加載的時間沒什么影響。
3 使用壓縮后的文件。線上使用的靜態文件,盡量都是壓縮好的,CSS 使用 .min.css 形式,JS 使用 .min.js 形式,這樣可以減少文件的體積,從而減少下載的時間。
4 減少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加載并解析后才會去請求, 會拖慢 CSS 文件的加載速度。
屬性的書寫規范
一、使用縮寫
在 CSS 中有很多屬性或屬性值可以縮寫, 在能用縮寫的地方盡量使用縮寫。
1、屬性的縮寫。CSS 中有些屬性是可以合并的, 如:
margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;
上面這幾組 margin 相關的屬性占了四條樣式, 我們可以使用一條 margin 屬性代替這四個方向的 margin:
margin: 10px 5px 0 5px;
一般帶有方向的屬性, 縮寫的時候各個方向的值都是按著"上 右 下 左"的順序寫的。另外如果四個方向值一樣,可以直接用一個值代替四個方向;如果左右方向的值一樣,則可以省略最后一個左側的值。
上面這條縮寫也可以寫成:
margin: 10px 5px 0;
2、顏色的縮寫。在使用十六進制顏色的時候, 如果 rgb 三個顏色位置中, 每兩位的顏色值相同, 可以把六位的顏色寫成三位。
如:color: #22ffcc;
就可以寫成:
color: #2fc;
這兩種寫法是等效的, 但要注意的是如果需要兼容低版本 IE 瀏覽器, 還是要用六位的顏色值。
3、數字的縮寫。在 CSS 中如果整數部分是 0 的小數, 可以忽略小數點前面的 0; 如果屬性值是 0, 則可以忽略屬性值的單位。
如: font-size: 0.8rem; padding: 0px;
這兩條屬性就可以做簡寫:
font-size: .8rem; padding: 0;
二、屬性順序的規范
理論上, CSS 的屬性是一條一條解析執行的。這種情況下, 就要把能確定大小和位置的屬性寫在前面, 把對布局沒什么影響的屬性寫在后面, 避免返工。
一般說的使用順序如下:
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等)
注釋規范
一 文件頭注釋
/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/
二 普通注釋
/* 頭部導航 */
.nav-top{
background: #ccc;
}
CSS-Reset
邊距(margin)
margin-top:當前盒子距離上層盒子頭部的像素;
margin-bottom:當前盒子距離上層盒子底部的像素;
margin-left:當前盒子距離上層盒子左部的像素;
margin-right:當前盒子距離上層盒子右部的像素;
案例
去掉白色部分
<!--head內部的css部分-->
<style type="text/css">
* { /*也可以寫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>
天我教大家怎么零基礎編寫html框架
首先建立一個index.html文件,index(為首頁的意思)
請大家先看看效果圖
網站可分為三個部分
head頭
<head></head>
body體
<body><body>
foot腳
<footer></footer>
在剛剛建好的index.html里面寫上html標準代碼
<!--這為文本類型也是html開始代碼-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其次給html寫上編碼讓瀏覽器知道他是什么編碼,不然會出現亂碼
<!DOCTYPE html>
<html>
<head>
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網站標題-->
<title></title>
</head>
<body>
</body>
</html>
在給網站起個標題
<!DOCTYPE html>
<html>
<head>
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網站標題-->
<title>html框架</title>
</head>
<body>
</body>
</html>
現在我們開始寫body體
先建立三個div塊
我們給這三個塊下個名稱
在給這三個div塊寫上css樣式,css樣式有三種我們先講內聯,下節課再講外聯
再給css樣式寫上內容
/*width:為寬度;height :為高;background:為網站背景;(也可以用color表示)css樣式要以;結尾*/
現在我們來看看效果
div塊靠左,不美觀怎么辦?
沒關系我們寫上css讓它居中更美觀
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點,auto為塊自動居中*/
/*也可以用margin-left:左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
再讓我們看看效果吧
是不是居中了
只是這樣還不像網站怎辦別急我們再給它寫上幻燈片的框架和做導航和右內容框架
我們在建三個塊分別命名為lmage(圖片的意思)left(左)right(右)
我們在給這三個塊寫上css樣式
讓我們看看效果吧
讓我們再給右內容區寫的東西吧
我們再寫上四個塊
我們給這四個塊寫上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;
}
這是我們會發現板塊亂了怎么辦,別擔心現在教給你新知識那就是浮動代碼
/*float:為浮動代碼;(意為漂浮起來)*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
讓我們看看效果如何把
是不是很漂亮呢
好了現在我們就回顧一下這節課的知識點吧
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--這為網站標題-->
<title>html框架</title>
/*width:為寬度;height :為高;background:為網站背景;(也可以用color表示)css樣式要以;結尾*/
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點,auto為塊自動居中*/
/*也可以用margin-left:左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
/*float:為浮動代碼;(意為漂浮起來)*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
<!--這為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//為名稱-->
*請認真填寫需求信息,我們會在24小時內與您取得聯系。