HTML CSS網(wǎng)頁設(shè)計實例分析

這篇“HTML CSS網(wǎng)頁設(shè)計實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML CSS網(wǎng)頁設(shè)計實例分析”文章吧。

　　html代碼：

　　<!--HTML-->

　　<div>

　　<h3>這是我的第一個網(wǎng)頁</h3>

　　<p>BODY標簽表示網(wǎng)頁主體元素的容器，它包含了網(wǎng)頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網(wǎng)頁標簽都需要放在這里面，這里我寫了一段文字，它就會在瀏覽器里顯示出來。這些就構(gòu)成了我們網(wǎng)頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。</p>

　　<p><img src=''></p>

　　</div>

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

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

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

　　首先，我想給整個區(qū)域限制一個高度和寬度，那么我們就應(yīng)該這樣寫：

　　<style type='text/css'>

　　div {

　　width: 300px;

　　}

　　&hellip;

　　</style>

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

　　div {

　　width: 300px;

　　background: #f2f2f2;

　　padding: 20px;

　　margin: 20px;

　　}

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

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

　　h3 {

　　font-size: 20px;

　　color: #ff0000;

　　text-align: center;

　　}

　　&mdash;&mdash;

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

　　p {

　　font-size: 14px;

　　color: #333;

　　line-height: 24px;

　　}

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

　　img {

　　width: 100%;

　　}

以上就是關(guān)于“HTML CSS網(wǎng)頁設(shè)計實例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。