定義了一個基本的HTML結構,包括標題、段落和一個聯系表單。同時,我們引入了兩個外部文件 – styles.css和app.js。
2. 接下來,我們來創建CSS文件。CSS文件用于設置網站的樣式,如顏色、字體等。創建一個名為styles.css的文件,并添加以下代碼:
“`css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4caf50;
color: white;
text-align: center;
paddinghtml5生成app模板: 1rem;
}
h1 {
margin: 0;
}
main {
width: 80%;
margin: 2rem auto;
}
section {
margin-bottom: 2rem;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
input, textarea {
display: block;
width: 100%;
margin-bottom: 1rem;
}
button {
background-color: #4caf50;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 1rem;
}
“`
在上面的CSS代碼中,我們為網站添加了一些基本的樣式,如顏色、字體等。
3. 最后,我們要創建一個JavaScript文件。JavaScript文件為網站添加交互性和動態功能。創建一個名為app.js的文件,并添加以下代碼:
“`javascript
document.getElementById(‘contact-form’).addEventListener(‘submit’, function (event) {
event.preventDefault();
const name = document.getElementById(‘name’).value;
const email = document.getElementById(’email’).value;
const message = document.getElementById(‘message’).value;
console.log(`Name: ${name}, Email: ${email}, Message: ${message}`);
});
“`
這段代碼為我們的聯系表單添加了一個事件監聽器。當用戶提交表單時,它會阻止默認的表單提交行為,然后獲取表單字段的值,并將它們顯示在控制臺上。
至此,我們已經創建了一個簡單的App網站。您可以根據需要擴展這個基本的結構,實現更豐富的功能和交互。希望這個教程對于入門創建App網站的人員有所幫助!