整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們先分析一下整個(gè)網(wǎng)頁的結(jié)構(gòu)，整體內(nèi)容采用的是一個(gè)兩列布局，導(dǎo)航無限延長(zhǎng)的背景，并且添加了分割符號(hào)
素材：
第一步： 去掉默認(rèn)的HTML間距。
*{padding:0;margin:0;}
Ps(我們可以在后期進(jìn)行修改,根據(jù)網(wǎng)頁中使用的HTML元素的個(gè)數(shù)如body,h1,div等)
第二步：按效果圖頭部灰色背景但是無限延長(zhǎng)
HTML代碼：
<div class="top">
<div id="top">
<p>讀書屋歡迎您！</p>
</div>
</div>
兩個(gè)DIV嵌套，<div class="top">這個(gè)需要100%添加背景，而內(nèi)側(cè)<div id="top"> 實(shí)現(xiàn)居中布局就可以了
.top{width:100%;background:#f5f5f5;height:35px;}
解釋：寬度100%,添加背景顏色，設(shè)定高度，這樣在縮放網(wǎng)頁，始終可以看到灰色的背景
#top {width:970px;margin:0 auto;}
解釋：網(wǎng)頁寬度970像素，使id=top的div元素進(jìn)行居中margin:0 auto;
#top p{font-size:13px;line-height:35px;}
解釋：改變文字大小，就一行宣傳文字，通過行高（和高度一樣時(shí)間）實(shí)現(xiàn)垂直居中l(wèi)ine-height:35px;
第三步：logo的實(shí)現(xiàn)，采用典型的以圖換字的方式，有利于SEO
HTML代碼：
<div id="header">
<h1>
<a href="#">css教程</a>
</h1>
</div>
CSS編碼：
#header h1 a{
background:url(images/logo.png) no-repeat 0 50%;
display:block;
width:215px;height:60px;
text-indent:-9999px;
}
一篇文章中我分享了一段圖文標(biāo)簽，這篇文章主要給大家詳細(xì)解釋一下這些代碼的作用和意義，以及編寫網(wǎng)頁代碼的格式與思路。
下面我貼上html代碼：
<!--HTML--> <div> <h2>這是我的第一個(gè)網(wǎng)頁</h2> <p>BODY標(biāo)簽表示網(wǎng)頁主體元素的容器，它包含了網(wǎng)頁所有的html標(biāo)簽如：文本、圖片、列表等等。以后我們編寫的網(wǎng)頁標(biāo)簽都需要放在這里面，這里我寫了一段文字，它就會(huì)在瀏覽器里顯示出來。這些就構(gòu)成了我們網(wǎng)頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時(shí)候直接拿來用。</p> <p><img src="http://www.jungjaehyung.com/uploadfile/2024/0808/20240808042153700.png"></p> </div>
從代碼當(dāng)中可以發(fā)現(xiàn)，所有的標(biāo)簽內(nèi)容都被一個(gè)div標(biāo)簽所包含著，div屬于組合塊級(jí)元素，常用來區(qū)分不同的區(qū)域或模塊，它可以是獨(dú)立的，可分割的，它有自動(dòng)換行的屬性，但你可以通過使用css來給它定義樣式或布局。
h2屬于標(biāo)題標(biāo)簽，從h1到h6都可以自定義，一般網(wǎng)頁的標(biāo)題或者需要著重表現(xiàn)的都可以用，p標(biāo)簽表示段落或者一段文字介紹，img標(biāo)簽表示頁面中的圖像，你可以直接引入圖片地址，注意，它是一個(gè)單標(biāo)記。
那么知道了這些標(biāo)簽的意義，我們就可以根據(jù)自己實(shí)際的需求給這段html代碼定義css樣式，
首先，我想給整個(gè)區(qū)域限制一個(gè)高度和寬度，那么我們就應(yīng)該這樣寫：
<style type="text/css">
div {
width: 300px; /*這里給個(gè)300像素的寬度*/
}
... /*未完待續(xù)*/
</style>
如果想加入其他的樣式可以繼續(xù)定義，如：添加一個(gè)背景顏色，添加一個(gè)內(nèi)邊距或外邊距。
div {
width: 300px; /*這里給個(gè)300像素的寬度*/
background: #f2f2f2; /*這里給一個(gè)灰色的背景*/
padding: 20px; /*這里給一個(gè)20像素的內(nèi)邊距*/
margin: 20px; /*這里給一個(gè)20像素的外邊距*/
}
注意：內(nèi)邊距的意思就是一個(gè)獨(dú)立的區(qū)塊或者標(biāo)簽往內(nèi)部擴(kuò)展距離，外邊距就是往外部擴(kuò)展距離，新入門的同學(xué)這里容易搞混。
接下我們定義標(biāo)題，標(biāo)題比較簡(jiǎn)單，比如，給它一個(gè)20像素的大小，標(biāo)題顏色為紅色，需要讓它居中，那么就應(yīng)該這樣寫：
h2 {
font-size: 20px; /*這里給個(gè)20像素的字體大小*/
color: #ff0000; /*這里給一個(gè)紅色的字體顏色*/
text-align: center; /*讓它居中*/
}
```
文字介紹和標(biāo)題差不多，就是字體小一點(diǎn)，注意的是需要給段落定義一個(gè)行高，調(diào)整段落之間的間隔。
p {
font-size: 14px; /*這里給個(gè)14像素的字體大小*/
color: #333; /*這里給一個(gè)黑色的字體顏色*/
line-height: 24px; /*這里給一個(gè)24像素的行高*/
}
最后圖片就更簡(jiǎn)單了，直接讓它自適應(yīng)寬度，跟隨div，設(shè)置一個(gè)100%。
img {
width: 100%;
}
一個(gè)簡(jiǎn)單的網(wǎng)頁代碼和設(shè)計(jì)思路就這樣完成了，如果你懂了這些代碼的作用和意義，那么恭喜你，你就基本入門了，因?yàn)樗械木W(wǎng)頁代碼基本都是按照這種格式和思路編寫的。下一篇給大家繼續(xù)介紹其他常用的html+css標(biāo)簽以及實(shí)戰(zhàn)演示，謝謝觀看！！！
者：sunshine小小倩
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/599970f4518825243a78b9d5
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
