定義了一個基本的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網站的人員有所幫助!

未經允許不得轉載:亦門 » 生成app網站源碼作用介紹

相關推薦