整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
演示視頻在文章底部
1.頁面內(nèi)容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標(biāo)簽之下。
將</div>放置在</body>之上。
將全部內(nèi)容包裹在這個div中，就可以實現(xiàn)整個頁面居中。
內(nèi)容顯示寬度為瀏覽器視窗寬度的50%。
margin（外邊距）是在CSS布局中經(jīng)常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現(xiàn)居中。
2.導(dǎo)航欄懸停頂端方法
把四個a標(biāo)簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。
默認(rèn)下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。
3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時改變背景色提示
這就要介紹關(guān)于css的寫法了。
簡單來說，就是在<head></head>標(biāo)簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學(xué)過HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作的小伙伴應(yīng)該知道，CSS腳本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>標(biāo)簽。
hover指的是：當(dāng)鼠標(biāo)懸停在a上面時的狀態(tài)。
使用：連接。
這個狀態(tài)下要執(zhí)行的內(nèi)容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先，我們要明確一點，就是，滾動條是在內(nèi)容長度超過視窗高度時產(chǎn)生的。
如果要取消視窗最右側(cè)滾動條，就要控制內(nèi)容高度。
把<p></p>和<img/><map></map>全部裝進(jìn)<div></div>中，控制該div的高度可以實現(xiàn)。
在<p>標(biāo)簽色上面添加<div>。
在</map>標(biāo)簽下面添加</div>。
下面，為div規(guī)定尺寸，添加style="width:610px; height:530px;"。
這樣，就不會超出視窗。但是代碼寫完后發(fā)現(xiàn)并不是，如圖：
多出的文字內(nèi)容超出div范圍，右側(cè)滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓內(nèi)容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖：
因為圖片寬度的問題，下方的x軸的scroll也出現(xiàn)了，我們不想看到它，影響美觀。
添加“overflow-x：hidden”即可，hidden（隱藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖：hidden之后，將無法滾動或拖動畫面。
最后，我們要把右側(cè)的scroll也隱藏掉，因為點擊鼠標(biāo)，滾動滾輪就夠了，滾動條實在礙眼。
從前面的例子可知，hidden是不行的，有沒有別的辦法？
那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給里面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習(xí)）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
頁是一個包含HTML標(biāo)簽的純文本文件
網(wǎng)頁制作離不開瀏覽器和制作網(wǎng)頁工具
瀏覽器推薦【谷歌瀏覽器】或【火狐瀏覽器】
制作網(wǎng)頁工具用電腦自帶的【記事本】即可
六步即可學(xué)會最基礎(chǔ)的網(wǎng)頁制作！
右擊桌面，選擇新建，選擇文本文檔
打開新建的文本文檔，輸入以下內(nèi)容（建議照敲一遍）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
</head>
<body>
</body>
</html>上面這些內(nèi)容就是超文本標(biāo)記語言，也稱為HTML，現(xiàn)在HTML已經(jīng)發(fā)展到第五代——HTML5，上面這些HTML5代碼是幫助我們寫出網(wǎng)頁的基礎(chǔ)。
右擊文檔重命名，修改文件后綴，將文件擴(kuò)展名修改為.html
什么瀏覽器打開就會出現(xiàn)什么瀏覽器圖標(biāo)
如果你看不到文件的擴(kuò)展名那么就打開此電腦（我的電腦），在菜單欄查看勾選文件擴(kuò)展名即可。
雙擊打開它，你會發(fā)現(xiàn)一片空白。
但并不是什么都沒有，上圖中箭頭指的那一串字母就叫URL，也稱“統(tǒng)一資源定位器”。因為這個文件只是本地文件，所以它現(xiàn)在的作用是定位你的文件存放位置，顯示文檔地址，說明文檔放在什么地方。
忍受不了空空的感覺，那么就開始添加一些東西吧！
右擊選擇打開方式，選擇用記事本打開
點擊其他應(yīng)用可以看到記事本
試試看把標(biāo)題改成“這是一個標(biāo)題”，按快捷鍵ctrl+s保存
刷新一下瀏覽器，于是標(biāo)題就變成了“這是一個標(biāo)題”
那么我們就可以知道，修改<title></title>里面的內(nèi)容可以改變標(biāo)題；同時<title>標(biāo)簽是<head>標(biāo)簽中唯一要求包含的東西。
一鼓作氣，再添加一些內(nèi)容吧！
在<body></body>這一對標(biāo)簽里面加上這樣一段話：
<p>Hello</p>
<p>World</p>然后保存刷新
Hello World
恭喜你，你已經(jīng)學(xué)會了最基礎(chǔ)的網(wǎng)頁制作了。
<p>這是什么意思呢？
這些被稱為標(biāo)簽，上面出現(xiàn)尖括號的都屬于標(biāo)簽，它們通常都是成對的，由開始標(biāo)簽和結(jié)束標(biāo)簽（結(jié)束標(biāo)簽加上斜杠）構(gòu)成一組標(biāo)簽，例如<title></title>、<p></p>。
<p>標(biāo)簽定義段落，我們寫文章一般是敲一下回車就換一行，但是網(wǎng)頁不一樣，你敲多少個回車都是不被識別的。
<p>有志者，事竟成，破釜沉舟，百二秦關(guān)終屬楚;
苦心人，天不負(fù)，臥薪嘗膽，三千越甲可吞吳!</p>
<p><p></p>可以看到上面的一段話，敲多少個回車都沒有用，而下面的一段話，用兩個<p>標(biāo)簽就換行了。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
