H5CSS3個人網站代碼
以下是使用H5CSS3技術開發的一個簡單的個人網站的HTML和CSS代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>個人網站</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #22304b;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 3em;
}
.intro {
padding: 50px;
background-color: #f5f5f5;
}
h2 {
margin-top: 0;
font-size: 2em;
}
.about {
padding: 50px;
background-color: #d9d9d9;
}
h3 {
margin-top: 0;
font-size: 1.5em;
}
footer {
background-color: #22304b;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>個人網站</h1>
<p>歡迎訪問我的網站!</p>
</header>
<section class="intro">
<h2>簡介</h2>
<p>這是我的個人網站,主要用于分享我的學習經驗,以及記錄我的生活點滴。</p>
</section>
<section class="about">
<h3>關于我</h3>
<p>我是一名前端開發者,熱愛編寫優雅、高效的代碼。</p>
</section>
<footer>
<p>版權所有 ? 2021 個人網站</p>
</footer>
</body>
</html>
這個個人網站頁面包括一個頁面摘要,一個關于我部分,和一個底部版權聲明。使用H5和CSS3技術的一個好處就是使網站更加的美觀和生動,以便吸引用戶的眼球和激發他們的興趣。
上一篇h5css初始化
下一篇h5 css點擊樣式