今天我為大家分享一個(gè)特別的網(wǎng)頁(yè)，這是一個(gè)HTML5表白頁(yè)面，可以用來(lái)向自己心儀的TA表白。下面我們來(lái)看一下它的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的表白頁(yè)面</title>
<style>
body {
background-color: #F5DEB3;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #B22222;
font-size: 50px;
margin-top: 50px;
}
input[type=text] {
width: 400px;
height: 30px;
font-size: 20px;
padding: 5px;
border-radius: 5px;
border: none;
box-shadow: 1px 1px 2px #A9A9A9;
margin-top: 50px;
}
input[type=submit] {
width: 150px;
height: 50px;
font-size: 30px;
background-color: #B22222;
color: #fff;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 2px #A9A9A9;
margin-top: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>我喜歡你</h1>
<p>請(qǐng)輸入你的名字：</p>
<form>
<input type="text" name="name" placeholder="請(qǐng)輸入你的名字">
<br><br>
<input type="submit" value="確定">
</form>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
var name = e.target.name.value;
alert('親愛(ài)的' + name + '，我喜歡你很久了，愿意跟我在一起嗎？');
});
</script>
</body>
</html>這個(gè)頁(yè)面非常簡(jiǎn)單，主要由一個(gè)輸入框和一個(gè)按鈕組成，通過(guò)輸入框可以輸入自己的名字，點(diǎn)擊按鈕后會(huì)出現(xiàn)一個(gè)提示框，提示框中顯示了一條表白的話語(yǔ)，里面包含了我們輸入的名字。
在樣式方面，我們?yōu)轫?yè)面設(shè)置了一個(gè)淡黃色的背景，同時(shí)使用了Arial字體作為頁(yè)面的主要字體。在標(biāo)題方面，我們采用了一種比較醒目的紅棕色，同時(shí)通過(guò)字號(hào)和上下間距的設(shè)置，讓標(biāo)題更加突出。
在輸入框和按鈕方面，我們采用了比較簡(jiǎn)潔的樣式，為了讓頁(yè)面更加美觀，給它們添加了一些陰影和圓角效果。在點(diǎn)擊按鈕后，我們通過(guò)JavaScript代碼來(lái)獲取輸入框中的值，然后使用alert函數(shù)彈出一個(gè)提示框，其中包含了表白的話語(yǔ)和我們輸入的名字。
好了，上面就是這個(gè)HTML5表白頁(yè)面的全部代碼。如果想要使用它，可以直接復(fù)制粘貼到自己的編輯器中，然后保存為HTML文件，用瀏覽器打開(kāi)即可。相信對(duì)于愛(ài)情中的你來(lái)說(shuō)，這個(gè)小小的網(wǎng)頁(yè)一定是非常有用的！
下一篇js建立css