用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的還是DW,當然不同軟件寫出的前端Html5代碼都是一致的。
一、網站布局方面:計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
二、網站程序方面:計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器,已達到打開后就能即時看到網站的效果。
三、網站素材方面:計劃收集各大平臺好看的圖片素材,并精挑細選適合網頁風格的圖片,然后使用PS做出適合網頁尺寸的圖片。
四、網站文件方面:網站系統文件種類包含:html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
五、網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中: (1) html文件包含:其中index.html是首頁、其他html為二級頁面; (2) css文件包含:css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含:js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。
演示視頻在文章底部
1.頁面內容居中顯示方法
將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。
將</div>放置在</body>之上。
將全部內容包裹在這個div中,就可以實現整個頁面居中。
內容顯示寬度為瀏覽器視窗寬度的50%。
margin(外邊距)是在CSS布局中經常用到的屬性,它指定了該div元素距離四周的距離。使用“auto”值,可以實現居中。
2.導航欄懸停頂端方法
把四個a標簽裝到一個div中。
將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性,“fixed”值是讓該div懸停于固定位置。
默認下,該div距離視窗頂端有10px左右的距離,因此為了讓它與視窗頂部對齊,添加top:0px。
3.鼠標滑過導航標題或鏈接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說,就是在<head></head>標簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head標簽有啥用?——零基礎自學網頁制作的小伙伴應該知道,CSS腳本是可以添加在head元素中的。
其中,a:hover中的a指的是所有<a></a>標簽。
hover指的是:當鼠標懸停在a上面時的狀態。
使用:連接。
這個狀態下要執行的內容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隱藏滾動條方法
首先,我們要明確一點,就是,滾動條是在內容長度超過視窗高度時產生的。
如果要取消視窗最右側滾動條,就要控制內容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中,控制該div的高度可以實現。
在<p>標簽色上面添加<div>。
在</map>標簽下面添加</div>。
下面,為div規定尺寸,添加style="width:610px; height:530px;"。
這樣,就不會超出視窗。但是代碼寫完后發現并不是,如圖:
多出的文字內容超出div范圍,右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”(超出最大高度)就顯示滾動條(scroll)。而不是讓內容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖:
因為圖片寬度的問題,下方的x軸的scroll也出現了,我們不想看到它,影響美觀。
添加“overflow-x:hidden”即可,hidden(隱藏)。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖:hidden之后,將無法滾動或拖動畫面。
最后,我們要把右側的scroll也隱藏掉,因為點擊鼠標,滾動滾輪就夠了,滾動條實在礙眼。
從前面的例子可知,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制作一個簡單頁面(代碼閱讀練習)——零基礎自學網頁制作
*請認真填寫需求信息,我們會在24小時內與您取得聯系。