DWHTML(DHTML)是一種用于創建交互式網頁的HTML框架。在DHTML中,可以使用CSS來定義頁面的外觀和行為,這使得網頁可以具有更多的功能,如表單驗證、動畫和樣式等。
下面是一個使用DHTML和CSS創建一個簡單的網站的例子:
1. 創建HTML頁面
使用HTML語言,我們可以創建一個包含一個標題、一個段落和一個圖片的頁面。以下是一個基本的HTML模板:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. 添加CSS樣式
在DHTML頁面中,可以使用CSS來定義頁面的外觀和行為。以下是一個基本的CSS模板:
body {
font-family: Arial, sans-serif;
color: white;
text-align: center;
font-size: 2em;
font-size: 1.5em;
line-height: 1.6;
max-width: 100%;
height: auto;
3. 添加表單
在DHTML頁面中,可以使用CSS來創建表單。以下是一個基本的CSS模板:
form {
display: flex;
flex-direction: column;
label {
margin-bottom: 1em;
input[type="text"],
input[type="password"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
在上面的CSS模板中,我們使用了`form`元素來定義表單的外觀和行為,使用`display: flex`屬性將其轉換為彈性盒子布局,使表單中的所有元素都居中對齊。`label`元素用來定義表單項的標題,使用`margin-bottom`屬性使其在垂直方向上居中對齊。`input`元素用來定義表單項的輸入框,使用`padding`屬性使其在垂直方向上居中對齊,并使用`border`屬性來定義邊框。`button`元素用來定義表單的提交按鈕,使用`background-color`屬性來定義按鈕的背景顏色,使用`color`屬性來定義按鈕的文字顏色,使用`padding`和`border`屬性來定義按鈕的邊框和文字。
4. 測試
現在我們已經創建了一個簡單的DHTML和CSS網站,可以對其進行測試。可以使用瀏覽器的開發者工具來查看頁面的樣式和布局,并測試表單和圖像的響應式設置。