精通CSS+DIV網頁樣式與佈局頁面背景

阿新 • • 發佈：2018-11-08

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

上篇部落格，我們主要簡單的總結了CSS的圖片效果，我們這回來講講CSS如何對網頁的背景進行設定，網頁的背景是整個網頁的重要組成部分，她直接決定了整個網頁的風格和色調。這篇部落格簡單的總結一下如何用CSS來設定背景顏色、背景圖片。首先，我們來看一張圖：

接著，小編會隨著上述思維導圖的脈絡，對各個知識點進行詳細講解，首先，我們來看頁面背景色，例子程式碼和執行效果如下所示：

頁面背景色

<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>背景顏色</title><style 
><!--body{ background-color:#5b8a00;  /* 設定頁面背景顏色 */ margin:0px; padding:0px; color:#c4f762;     /* 設定頁面文字顏色 */}p{ font-size:15px;     /* 正文文字大小 */ padding-left:10px; padding-top:8px; line-height:120%;}span 
{        /* 首字放大 */ font-size:80px; font-family:黑體; float:left; padding-right:5px; padding-left:10px; padding-top:8px;}--></style>   </head><body> <img src="mainroad.jpg" style="float:right;"> <span>春</span> <p>季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裡發情，因此中國也將春季稱為“萬物復甦”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</p> <p>對農民來說，春季是播種許多農作物的季節。在春季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裡發情，因此中國也將春季稱為“萬物復甦”的季節。</p></body></html></span></span>

執行效果如下：

CSS設定背景顏色特別簡單：background-color，採用十六進位制的設計方法。背景顏色不但可以給網頁設定背景顏色，同樣也可以給網頁分塊。我們接下來看，用背景色給頁面分塊，例子和程式碼如下所示：

用背景色給頁面分塊

<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>利用背景顏色分塊</title><style><!--body{ padding:0px; margin:0px; background-color:#ffebe5; /* 頁面背景色 */}.topbanner{ background-color:#fbc9ba; /* 頂端banner的背景色 */}.leftbanner{ width:22%; height:330px; vertical-align:top; background-color:#6d1700; /* 左側導航條的背景色 */ color:#FFFFFF; text-align:left; padding-left:40px; font-size:14px;}.mainpart{ text-align:center;}--></style>   </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr>  <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr>  <td class="leftbanner">   <br><br>首頁<br><br>分類討論   <br><br>談天說地<br><br>精華區   <br><br>我的信箱<br><br>休閒娛樂   <br><br>立即註冊<br><br>離開本站  </td>  <td class="mainpart">正文內容...</td> </tr></table></body></html></span></span>

執行效果如下：

分析上面的程式碼我們可以看出，在整個body中採用了table來進行分塊，就看到了如上的顯示效果，這裡還要說一點的是，正文部分我們在程式碼中並沒有給其設定顏色，然而在topbanner和leftbanner中卻設定了顏色，所以沒有設定顏色的就繼承body的，設定了之後就覆蓋原來的。通過背景色和對整個網頁進行分塊，能達到很好的排版的效果。CSS不但可以設定頁面的背景顏色，同樣可以給背景新增圖片，我們來看一下例子程式碼和執行效果：

頁面背景圖

<span style="font-size:18px;"><html><head><title>背景圖片</title><style><!--body{ background-image:url(03.jpg); /* 頁面背景圖片 */}--></style>   </head><body></body></html></span>

執行效果如下：

從上面的小時效果我們看到這個小圖片在橫向和縱向都佈滿了這個頁面，是不是很漂亮nie，傳說中的五葉草，代表自信和堅強，希望看到這篇博文的小夥伴在新的一年，自信堅強，無論遇到什麼樣的困難，都勇敢無畏，我們剛才看到了一個小小的圖片的重複能佈滿整個頁面，但是倘若我們不希望這樣重複，我們應該怎麼設定呢？看下面的例子和程式碼：

背景圖片的重複

<span style="font-size:18px;"><html><head><title>背景重複</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg1.jpg);  /* 背景圖片 */ background-repeat:repeat-y;   /* 垂直方向重複 */ background-color:#0066FF;   /* 背景顏色 */}--></style>   </head><body></body></html></span>

執行效果如下：

如果我們若把background-repeat設定為repeat-x會有怎樣的驚喜等著我們nie，小夥伴們可以自己動手試試，我們剛才看到了背景圖片的重複，無亂是X軸，還是Y軸，都是從左上角開始的，倘若我們想改變這些呢，我們應該怎麼設定，接著，我們來看背景圖片的位置，例子程式碼和執行效果如下：

背景圖片的位置

<span style="font-size:18px;"><html><head><title>背景的位置</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg4.jpg);  /* 背景圖片 */ background-repeat:no-repeat;  /* 不重複 */ background-position:bottom right; /* 背景位置，右下 */ background-color:#eeeee8;}span{         /* 首字放大 */ font-size:70px; float:left; font-family:黑體; font-weight:bold;}p{ margin:0px; font-size:14px; padding-top:10px; padding-left:6px; padding-right:8px;}--></style>   </head><body> <p><span>雪</span>是大氣固態降水中的一種最廣泛、最普遍、最主要的形式。大氣固態降水是多種多樣的，除了美麗的雪花以外，還包括能造成很大危害的冰雹，還有我們不經常見到的雪霰和冰粒。</p> <p>由於天空中氣象條件和生長環境的差異，造成了形形色色的大氣固態降水。這些大氣固態降水的叫法因地而異，因人而異，名目繁多，極不統一。為了方便起見，國際水文協會所屬的國際雪冰委員會，在徵求各國專家意見的基礎上，於1949年召開了一個專門性的國際會議，會上通過了關於大氣固態降水簡明分類的提案。這個簡明分類，把大氣固態降水分為十種：雪片、星形雪花、柱狀雪晶、針狀雪晶、多枝狀雪晶、軸狀雪晶、不規則雪晶、霰、冰粒和雹。前面的七種統稱為雪。</p> <p> 立冬 太陽位於黃經225°，11月7～8日交節<br> 小雪 太陽位於黃經240°，11月22～23日交節<br> 大雪 太陽位於黃經255°，12月6～8日交節<br> 冬至 太陽位於黃經270°，12月21～23日交節<br> 小寒 太陽位於黃經285°，1月5～7日交節<br> 大寒 太陽位於黃經300°，1月20～21日交節</p></body></html></span>

執行效果如下：

通過設定圖片的背景的位置，便可以很好的利用一些大圖片作為整個網頁的背景，而文字在上方。我們剛才的效果可以發現，背景圖片與文字的相對位置是固定的，跟著圖片一起動，那麼我們應該怎麼設定固定背景圖片呢？我們看下面的例子和執行效果：

固定背景圖片

<span style="font-size:18px;"><html><head><title>固定背景圖片</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg6.jpg);  /* 背景圖片 */ background-repeat:no-repeat;  /* 不重複 */ background-attachment:fixed;  /* 固定背景圖片 */}p{ padding:10px; margin:5px; line-height:1.5em; color:#FFFFFF; font-size:22px;}--></style>   </head><body> <p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</p> <p>CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。CSS是1996年由W3C稽核通過，並且推薦使用的。簡單的說CSS的引入就是為了使得HTML能夠更好的適應頁面的美工設計。它以HTML為基礎，提供了豐富的格式化功能，如字型、顏色、背景、整體排版等等，並且網頁設計者可以針對各種視覺化瀏覽器設定不同的樣式風格，包括顯示器、印表機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p></body></html></span>

執行效果如下：

我們看到程式碼裡邊的background-attachment：fixed將背景圖片固定住，當文字移動的時候，背景圖片不會隨著圖片的移動而移動。

小編寄語：該博文，小編主要簡單總結了設定頁面背景的相關知識，主要接好了頁面背景，用背景色給頁面分塊，頁面背景圖，背景圖片的重複，背景圖片的位置以及固定背景圖片，其中用背景色給頁面分塊中在整個body中採用了table來進行分塊，就看到了如上的顯示效果，這裡還要說一點的是，正文部分我們在程式碼中並沒有給其設定顏色，然而在topbanner和leftbanner中卻設定了顏色，所以沒有設定顏色的就繼承body的，設定了之後就覆蓋原來的。通過背景色和對整個網頁進行分塊，能達到很好的排版的效果。BS學習未完待續......

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

你好！這是你第一次使用 **Markdown編輯器** 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。

新的改變

我們對Markdown編輯器進行了一些功能拓展與語法支援，除了標準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

全新的介面設計 ，將會帶來全新的寫作體驗；
在創作中心設定你喜愛的程式碼高亮樣式，Markdown 將程式碼片顯示選擇的高亮樣式 進行展示；
增加了 圖片拖拽 功能，你可以將本地的圖片直接拖拽到編輯區域直接展示；
全新的 KaTeX數學公式 語法；
增加了支援甘特圖的mermaid語法¹ 功能；
增加了 多螢幕編輯 Markdown文章功能；
增加了 焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定 等功能，功能按鈕位於編輯區域與預覽區域中間；
增加了 檢查列表 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜體：Ctrl/Command + I
標題：Ctrl/Command + Shift + H
無序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
檢查列表：Ctrl/Command + Shift + C
插入程式碼：Ctrl/Command + Shift + K
插入連結：Ctrl/Command + Shift + L
插入圖片：Ctrl/Command + Shift + G

合理的建立標題，有助於目錄的生成

直接輸入1次#，並按下space後，將生成1級標題。
輸入2次#，並按下space後，將生成2級標題。
以此類推，我們支援6級標題。有助於使用TOC語法後生成一個完美的目錄。

如何改變文字的樣式

強調文字 強調文字

加粗文字 加粗文字

標記文字

~~刪除文字~~

引用文字

H₂O is是液體。

2¹⁰ 運算結果是 1024.

插入連結與圖片

連結: link.

圖片:

帶尺寸的圖片:

當然，我們為了讓使用者更加便捷，我們增加了圖片拖拽功能。

如何插入一段漂亮的程式碼片

去部落格設定頁面，選擇一款你喜歡的程式碼片高亮樣式，下面展示同樣高亮的 程式碼片.

// An highlighted block var foo = 'bar';

生成一個適合你的列表

專案
- 專案
  - 專案

專案1
專案2
專案3

計劃任務
完成任務

建立一個表格

一個簡單的表格是這麼建立的：

專案	Value
電腦	$1600
手機	$12
導管	$1

設定內容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文字居中	第二列文字居右	第三列文字居左

SmartyPants

SmartyPants將ASCII標點字元轉換為“智慧”印刷標點HTML實體。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

建立一個自定義列表

Markdown: Text-to- HTML conversion tool
Authors: John; Luke

如何建立一個註腳

一個具有註腳的文字。²

註釋也是必不可少的

Markdown將文字轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表示式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通過尤拉積分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多關於的資訊 LaTeX 數學表示式here.

新的甘特圖功能，豐富你的文章

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 現有任務
        已完成               :done,    des1, 2014-01-06,2014-01-08
        進行中               :active,  des2, 2014-01-09, 3d
        計劃一               :         des3, after des2, 5d
        計劃二               :         des4, after des3, 5d

關於 甘特圖 語法，參考這兒,

UML 圖表

可以使用UML圖表進行渲染。 Mermaid. 例如下面產生的一個序列圖：:

這將產生一個流程圖。:

關於 Mermaid 語法，參考這兒,

FLowchart流程圖

我們依舊會支援flowchart的流程圖：

關於 Flowchart流程圖 語法，參考這兒.

匯出與匯入

匯出

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到 文章匯出 ，生成一個.md檔案或者.html檔案進行本地儲存。

匯入

如果你想載入一篇你寫過的.md檔案或者.html檔案，在上方工具欄可以選擇匯入功能進行對應副檔名的檔案匯入，
繼續你的創作。

mermaid語法說明 ↩︎
註腳的解釋 ↩︎

精通CSS+DIV網頁樣式與佈局 頁面背景

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

新的改變

功能快捷鍵

合理的建立標題，有助於目錄的生成

如何改變文字的樣式

插入連結與圖片

如何插入一段漂亮的程式碼片

生成一個適合你的列表

建立一個表格

設定內容居中、居左、居右

SmartyPants

建立一個自定義列表

如何建立一個註腳

註釋也是必不可少的

KaTeX數學公式

新的甘特圖功能，豐富你的文章

UML 圖表

FLowchart流程圖

匯出與匯入

匯出

匯入

相關推薦

精通CSS+DIV網頁樣式與佈局頁面背景