[前端開(kāi)發(fā)]網(wǎng)頁(yè)設(shè)計(jì)-如何實(shí)現(xiàn)網(wǎng)頁(yè)變灰效果_網(wǎng)站蒙灰CSS樣式總匯

每一個(gè)特定或者特殊的日子里，幾乎所有的網(wǎng)站都變成了灰色，那么這種效果是怎么實(shí)現(xiàn)的呢？

今天就來(lái)簡(jiǎn)單的實(shí)現(xiàn)一下這樣的效果。

添加以下全局CSS樣式，可以實(shí)現(xiàn)此效果：

代碼一：

html {
  -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
} 
<!-- 可以是整個(gè)網(wǎng)站變成灰色的  -->

實(shí)現(xiàn)網(wǎng)頁(yè)顏色變灰這個(gè)效果，非常簡(jiǎn)單：

filter: grayscale(100%);

這樣一段代碼即可實(shí)現(xiàn)，放在html和body的css屬性里即可實(shí)現(xiàn)。

意思是修改所有的顏色為黑白 (100% 灰度):

灰色網(wǎng)站會(huì)加入這段代碼，你可以按F12，把這段源碼刪除，即可變成彩色

代碼二：

html { 
   filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

使用方法：這段代碼可以變網(wǎng)頁(yè)為黑白，將代碼加到CSS最頂端就可以實(shí)現(xiàn)素裝。建議全國(guó)站長(zhǎng)動(dòng)起來(lái)。為在地震中遇難的同胞哀悼。

如果網(wǎng)站沒(méi)有使用CSS，可以在網(wǎng)頁(yè)/模板的HTML代碼<head>和</head> 之間插入：

<style>
   html{
     filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
</style>

有一些站長(zhǎng)的網(wǎng)站可能使用這個(gè)css 不能生效，是因?yàn)榫W(wǎng)站沒(méi)有使用最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)協(xié)議：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

請(qǐng)將網(wǎng)頁(yè)最頭部的<html>替換為以上代碼。

有一些網(wǎng)站FLASH動(dòng)畫(huà)的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和</object>之間插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

最簡(jiǎn)單的把頁(yè)面變成灰色的代碼是在head 之間加

<style type="text/css"> 
html {
   FILTER: gray
}
</style>

代碼三：

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,#grayscale"); 
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
-webkit-filter: grayscale(1);
}

總結(jié)：

以上幾種代碼（方法），都是通過(guò)CSS的濾鏡來(lái)控制頁(yè)面的顯示而已，唯一不同的就CSS代碼及調(diào)用的方式。在css的修飾時(shí)還有權(quán)重問(wèn)題，所以有時(shí)候css代碼不生效的時(shí)候可以考慮一下代碼的權(quán)重問(wèn)題。

歡迎關(guān)注第一山，今后將有更多前端開(kāi)發(fā)技術(shù)與大家共同交流學(xué)習(xí)。

ont 屬性可以用來(lái)作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡(jiǎn)寫(xiě)，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。

字體修改

font-family 屬性：設(shè)置HTML頁(yè)面中的字體
font-size 屬性：設(shè)置字體大小
font-weight 屬性：設(shè)置字體的粗細(xì)程度
font-style 屬性：設(shè)置指定字體樣式

font-family寫(xiě)法示例：

 <style>
         p{
             font-family: "幼圓";
         }
     </style>
 </head>
 <body>
     <p>19級(jí)啟嘉班</p>
 </body>

效果：

果想開(kāi)發(fā)一個(gè)網(wǎng)站，除了要精通后端開(kāi)發(fā)語(yǔ)言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語(yǔ)言，它包含有眾多的標(biāo)簽，我們可以通過(guò)這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見(jiàn)的網(wǎng)頁(yè)。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類(lèi)型聲明。

html5文檔類(lèi)型聲明：<!doctype html>

html4文檔類(lèi)型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對(duì)的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁(yè)面的元信息。

link：用來(lái)定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁(yè)面標(biāo)題的標(biāo)簽。

script：用來(lái)調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級(jí)標(biāo)簽。

塊級(jí)標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒(méi)有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁(yè)面顯示的效果如下圖：

常用的塊級(jí)標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級(jí)標(biāo)簽不同，它不能獨(dú)自占有一行，會(huì)與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級(jí)標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒(méi)有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級(jí)標(biāo)簽。

內(nèi)聯(lián)塊級(jí)標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級(jí)標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級(jí)標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級(jí)標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來(lái)劃分布局頁(yè)面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁(yè)面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。

5、表單標(biāo)簽。

這個(gè)表單標(biāo)簽我們也是會(huì)經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評(píng)論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開(kāi)發(fā)網(wǎng)頁(yè)時(shí)，會(huì)常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來(lái)后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開(kāi)發(fā)中很少用到，所以，這里就沒(méi)有做相應(yīng)的介紹。

在線咨詢

上一篇：如何在瀏覽器賬中查看網(wǎng)頁(yè)的HTML源代碼？
下一篇：HTML個(gè)人筆記