我最近剛剛完成了一個html5css3作業的源代碼。這次作業是為了設計一個簡單的博客頁面。我首先使用html5編寫了網站的框架，然后使用css3來制作樣式。下面是我的源代碼。
HTML5
<!DOCTYPE html> <html> <head> <title>My Blog</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>My Blog</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <section> <h2>My First Post</h2> <p>This is my first blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu enim in odio hendrerit euismod. Donec lobortis commodo enim, eget commodo ligula porttitor eget. Vivamus sit amet urna mi. Sed congue urna vel luctus faucibus. Sed pharetra aliquam mauris vel varius. Sed eu urna id ligula scelerisque fringilla. Mauris commodo vestibulum lacus, vel sodales dui elementum et. Nulla facilisi. Nullam gravida arcu vel sem volutpat aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris scelerisque magna nibh, sed porttitor nisl mollis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tempor odio ac egestas sollicitudin. Vestibulum tempor leo a auctor vehicula.</p> </section> <section> <h2>My Second Post</h2> <p>This is my second blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu enim in odio hendrerit euismod. Donec lobortis commodo enim, eget commodo ligula porttitor eget. Vivamus sit amet urna mi. Sed congue urna vel luctus faucibus. Sed pharetra aliquam mauris vel varius. Sed eu urna id ligula scelerisque fringilla. Mauris commodo vestibulum lacus, vel sodales dui elementum et. Nulla facilisi. Nullam gravida arcu vel sem volutpat aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris scelerisque magna nibh, sed porttitor nisl mollis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tempor odio ac egestas sollicitudin. Vestibulum tempor leo a auctor vehicula.</p> </section> </main> <footer> <p>Copyright © 2021<p> </footer> </body> </html>
CSS3
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}
h1 {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
section {
background-color: #f2f2f2;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 20px;
margin-top: 20px;
}以上就是我最近完成的html5css3作業源代碼。雖然這個網站簡單，但它讓我更好地理解了html5和css3，這將對我未來的web開發項目產生積極的影響。