使用HBuilder制作一個簡單的HTML5網頁

  發布時間:2022-06-29 17:03:44   作者:藺WIT   我要評論
本文主要介紹了使用HBuilder制作一個簡單的HTML5網頁,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

寫在前面:開始入門網頁制作,寫下第一篇博文作為記錄。純純小白一個

先放上效果圖:

使用HBuilderX編輯器創建一個“基本HTML項目”:

雙擊index.html打開頁面,項目中已經默認生成了HTML5所需要的結構,代碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

解讀:

第1行代碼是一個聲明,告訴 Web 瀏覽器當前頁面應該使用哪個HTM版本進行解析。

< html >標簽是整個頁 的最外層圍墻,用來“包裏”頁面的所有內容。

< head >標簽相當于我面的身份證,包括了頁面的所有重要信息,這一部分內容不會呈現在頁面上,瀏覽者不能直接看到。

< body >部分是頁面的主體部分,包含了所有在瀏覽器上要呈現的內容信息,也就是瀏覽者可以著到的內容。

在< body >標簽內加入標題和內容:

  • 標題使用<h1>標簽,
  • 內容使用< p >標簽,
  • 按鈕使用< div >標簽。

這里,由于< body > 標簽里的元素是散亂的,所以需要< div >標簽充當一個“透明的盒子”,將元素收納在盒子內部??梢允褂胏lass屬性給< div >標簽增加類名以作區分。

<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>歡迎大家來到LinWit的制作的網頁,
		一起開啟精彩的世界吧!
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>

接下來主要是在頁面中使用CSS進行界面的設計與美化,這里需要在< head >標簽中新建一個< style > 標簽,頁面中的標簽都放在< style >標簽內部。
(具體見文末完整代碼)

一些CSS設計的“出彩點”:

頁面動態效果:當鼠標移動到按鈕上時,讓按鈕的形態發生變化。及在按鈕選擇器后面加上:hover,表示鼠標移動到按鈕上的狀態。

.btn:hover{
			background-color: royalblue;
			width: 300px;
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			margin: 100px auto;
		}

當鼠標放上按鈕時,變化效果如下:

在手機上查看頁面樣式調整:在HTML文檔的< meta >中設置移動端的viewport顯示窗口。(注:在電腦上可運行在瀏覽器上時進入開發者模式,亦可查看在手機上的界面樣式)

<meta name="viewport" content="width=device-width,initial-scale=1 .0 user-scale"/>

在手機(不同屏幕大小的設備)上查看頁面樣式如下(一些布局都進行了相應的變化):

最后附上一個簡單的網頁界面的代碼:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1 .0 user-scale"/>
		<meta charset="utf-8" />
		<title>Document</title>
		<style>
		html,body{
			height:100%;
			margin:0;
			padding:0;
		}
		body{
			background: red url(img/index.jpg) center center;
			background-size: cover;
			position: relative;/* 相對位置 */
		}
		.container{
			position: absolute;/* 絕對位置 */
			top: 50%;
			text-align: center;
			width: 100%;
			transform: translateY(-50%);/* 將div元素上移至自身高度的50% */
		}
		h1{
			line-height: 90px;
			color: royalblue;
			font-size: 50px;
		}
		p{
			line-height: 80px;
			color: royalblue;
			font-size: 22px;
		}
		.btn{
			width: 200px;
			height: 60px;
			background-color: #7cacae;
			color: #fff;
			font-size: 24px;
			line-height: 60px;
			margin: 30px auto;/* 設置其上下邊距:30px 左右邊距:自動 */
			border-radius: 10px;/* 給按鈕增加圓角樣式 */
			transition: 1s;
		}
		.btn:hover{
			background-color: royalblue;
			width: 300px;
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			margin: 100px auto;
		}
		</style>
	</head>
	<body>
		<div class="container">
		<h1>Let's start our first page!</h1>
		<p>歡迎大家來到LinWit的制作的網頁,
		一起開啟精彩的世界吧!
		</p>
		<div class="btn" id="start">start</div>
		</div>
	</body>
</html>

 到此這篇關于使用HBuilder制作一個簡單的HTML5網頁的文章就介紹到這了,更多相關HBuilder制作HTML5網頁內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • 使用HBuilder制作一個簡單的HTML5網頁

    本文主要介紹了使用HBuilder制作一個簡單的HTML5網頁,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學
    2022-06-29
  • html5+實現plus.io進行拍照和圖片等獲取

    本文主要介紹了html5+實現plus.io進行拍照和圖片等獲取,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起
    2022-05-31
  • HTML5之高度塌陷問題的解決

    本文主要介紹了HTML5之高度塌陷問題的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-05-30
  • HTML中實現音樂或視頻自動播放案例詳解

    由于期末大作業我想插入一個背景音樂,實現點開網頁就會自動播放音頻的效果,今天通過本文給大家分享下我基于HTML實現音樂或視頻自動播放功能,代碼簡單易懂,需要的朋友參
    2022-05-27
  • HTML標簽教你實現帶動畫的抖音LOGO效果

    這篇文章主要家教大家使用一個HTML標簽教你實現帶動畫的抖音LOGO效果,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-05-10
  • 使用feDisplacementMap+feImage濾鏡實現水波紋效果(計算動態值)

    這篇文章主要使用feDisplacementMap濾鏡實現水波紋效果(計算動態值),水波特效,是通過<feImage>標簽 x,y,width,height四個屬性和<feDisplacementMap>標簽scale
    2022-04-24
  • HTML5基礎學習之文本標簽控制

    這篇文章主要介紹了 HTML5基礎學習之文本標簽控制 ,文本與圖片在網站上的運用是最廣泛的,一個內容充實的網站必然會用大量的文本和圖片,然后把超級鏈接應用到文本和圖片
    2022-03-24
  • 使用Canvas繪制一個游戲人物屬性圖

    Canvas六邊形屬性圖在很多游戲中都可以用到,本文主要介紹了使用Canvas繪制一個游戲人物屬性圖,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可
    2022-03-23
  • 面試中canvas繪制圖片模糊圖片問題處理

    這篇文章主要為大家介紹了canvas繪制圖片,圖片變模糊問題的幾種處理解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步
    2022-05-10
  • canvas實現貪食蛇的實踐

    本文主要介紹了canvas實現貪食蛇的實踐,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-14

最新評論

美丽人妻被按摩中出中文字幕