七小時帶你入門HTML+CSS網頁設計，編寫網頁代碼的思路（三）

一篇文章中我分享了一段圖文標簽，這篇文章主要給大家詳細解釋一下這些代碼的作用和意義，以及編寫網頁代碼的格式與思路。

下面我貼上html代碼：

<!--HTML-->
<div>
<h2>這是我的第一個網頁</h2>
<p>BODY標簽表示網頁主體元素的容器，它包含了網頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網頁標簽都需要放在這里面，這里我寫了一段文字，它就會在瀏覽器里顯示出來。這些就構成了我們網頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。</p>
<p><img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806104803445.png"></p>
</div>

從代碼當中可以發現，所有的標簽內容都被一個div標簽所包含著，div屬于組合塊級元素，常用來區分不同的區域或模塊，它可以是獨立的，可分割的，它有自動換行的屬性，但你可以通過使用css來給它定義樣式或布局。

h2屬于標題標簽，從h1到h6都可以自定義，一般網頁的標題或者需要著重表現的都可以用，p標簽表示段落或者一段文字介紹，img標簽表示頁面中的圖像，你可以直接引入圖片地址，注意，它是一個單標記。

那么知道了這些標簽的意義，我們就可以根據自己實際的需求給這段html代碼定義css樣式，

首先，我想給整個區域限制一個高度和寬度，那么我們就應該這樣寫：

<style type="text/css">
div {
 width: 300px; /*這里給個300像素的寬度*/
}

... /*未完待續*/

</style>

如果想加入其他的樣式可以繼續定義，如：添加一個背景顏色，添加一個內邊距或外邊距。

div {
 width: 300px; /*這里給個300像素的寬度*/
 background: #f2f2f2; /*這里給一個灰色的背景*/
 padding: 20px; /*這里給一個20像素的內邊距*/
 margin: 20px; /*這里給一個20像素的外邊距*/ 
}

注意：內邊距的意思就是一個獨立的區塊或者標簽往內部擴展距離，外邊距就是往外部擴展距離，新入門的同學這里容易搞混。

接下我們定義標題，標題比較簡單，比如，給它一個20像素的大小，標題顏色為紅色，需要讓它居中，那么就應該這樣寫：

h2 {
 font-size: 20px; /*這里給個20像素的字體大小*/
 color: #ff0000; /*這里給一個紅色的字體顏色*/
 text-align: center; /*讓它居中*/
}
```

文字介紹和標題差不多，就是字體小一點，注意的是需要給段落定義一個行高，調整段落之間的間隔。

p {
 font-size: 14px; /*這里給個14像素的字體大小*/
 color: #333; /*這里給一個黑色的字體顏色*/
 line-height: 24px; /*這里給一個24像素的行高*/
}

最后圖片就更簡單了，直接讓它自適應寬度，跟隨div，設置一個100%。

img {
	width: 100%;
}

一個簡單的網頁代碼和設計思路就這樣完成了，如果你懂了這些代碼的作用和意義，那么恭喜你，你就基本入門了，因為所有的網頁代碼基本都是按照這種格式和思路編寫的。下一篇給大家繼續介紹其他常用的html+css標簽以及實戰演示，謝謝觀看！！！

用wordpress開發主題的時候，經常避免不了要寫各種樣式的按鈕，下面記錄一下用按鈕樣式的寫法，以后用的時候直接拿來即可。

HTML和CSS代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.container{
margin: 0 auto;
padding-top: 30px;
width: 1000px;
}
.btn{
display: inline-block;
padding: 0 30px;
width: auto;
height: 35px;
font: 14px/35px 'microsoft yahei';
color: #fff; border: 0;
border-radius: 3px;
text-align: center;
cursor: pointer;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.blueBtn{
background: #5dcbff;
} /*藍色按鈕*/
.blueBtn:hover{
background: #40b6ee;
}
.orangeBtn{
background: #ff5700;
}/*橙色按鈕*/
.orangeBtn:hover{
background: #e25d18;
}
.violetBtn{
background: #6680ff;
}/*紫色按鈕*/
.violetBtn:hover{
background: #425de0;
}
.grayBtn{
background: #999;
}/*灰色按鈕*/
.grayBtn:hover{
background: #7f7f7f;
}
</style>
</head>
<body>
<div class="container">
<span class="btn blueBtn">藍色按鈕</span>
<span class="btn orangeBtn">橙色按鈕</span>
<span class="btn violetBtn">紫色按鈕</span>
<span class="btn grayBtn">灰色按鈕</span>
</div>
</body>
</html>

表達全國各族人民對抗擊新冠肺炎疫情斗爭犧牲烈士和逝世通報的深切哀悼，國務院今天發布公告，決定2020年4月4日舉行全國性哀悼活動。在此期間，全國和駐外使館下半旗致哀，全國停止公共娛樂活動，4月4日10點開始，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。

想到以往默哀日訪問網站時發現整站會變成全灰，即想到如果立即開始開發、設計圖修改等工作也會消耗大量的時間與精力，那會不會有css可以直接處理所有的元素將他們變灰，隨即想到了css3的filter（濾鏡），并也證實了這一想法的可行性。

filter: grayscale 使用可以調整元素的灰度值

.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
復制代碼

實戰

以B站為例：

在正常的情況下B站這個導航欄滑到下面之后是fixed在頁面的頂部的

但假如你把這段css加到了body上會發生下面這種情況：

你可以發現它不再固定在頁面的頂部了，而是超出去了屏幕外面，屏幕左下角的小電視人也跑到了頁面上半部分去，為什么會發生這樣的情況呢？

我去Google查閱了相關資料，發現:

對于指定了 filter 樣式且值不為 none 時，被應用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素，會為這些元素創建一個新的容器，使得這些絕對或固定定位的元素其定位的基準相對于這個新創建的容器。

我們可以聯想出fixed是相對于html根容器來定位的，如果在body上設置了filter則會創建一個新的定位基準，而頁面滾動時將body滾動出了屏幕外，則body內所有子孫元素的fixed將產生不符合預期的效果。

如何解決呢？

解決方案1

影響全站的方法我們可以將該樣式應用到根元素html上，即使創建了新的定位基準元素，也不會對子孫元素產生不符合預期的影響。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
復制代碼

效果：

解決方案2

非全站變灰我們可以將需要使用filter的元素單獨加上


<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>
復制代碼

兼容IE的辦法

很多小伙伴評論說IE低版本不支持該怎么辦于是我Google搜索了一下是有實現辦法的實現辦法是引入grayscale.js，Demo下載 grayscale.js Demo

簡單查看了該js的源碼后發現會將color、background-color、borderColor等屬性提取出來后替換成灰色，background-image和圖片會使用canvas繪制處理成灰色再替換成處理后的圖片源

demo內functions.js則是對判斷瀏覽器userAgent來識別瀏覽器類型與版本，做出對應的處理

參考資料地址：http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/

小程序下的問題

微信小程序我嘗試加在page上但是fixed還是失效了，只能使用第二種方法去加樣式，大家如果有解決方案可以評論提出來大家一起討論一下~

CSS3 filter MDN 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

整合營銷服務商