CSS 網頁教學模板是一種使用樣式表來控制網頁布局和樣式的模板。在 CSS 網頁教學模板中，使用了一些基本的 CSS 規則來設置頁面的顏色、字體、大小、對齊和邊框等屬性。本文將介紹如何使用 CSS 網頁教學模板來創建一個簡單的網站。
首先，我們需要在 HTML `
` 標簽中添加以下 CSS 樣式表：<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
header {
background-color: #4CAF50;
color: #fff;
padding: 20px;
}
nav {
float: left;
width: 25%;
background-color: #e5e5e5;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav a {
text-decoration: none;
color: #000;
}
article {
float: left;
width: 75%;
padding: 20px;
}
footer {
clear: both;
background-color: #4CAF50;
color: #fff;
padding: 20px;
text-align: center;
}
</style>接下來，我們可以使用以下 HTML 代碼來創建一個基本的網站結構：
<body> <header> <h1>My Website</h1> </header> <div class="container"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <h2>Welcome to my website</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor elit eu elit commodo congue. Vivamus id nibh eget urna sollicitudin congue. Sed nec fringilla nulla. Integer turpis lorem, sagittis eget vehicula a, facilisis ac nisl. Nam et leo enim. Phasellus ultrices libero eu urna posuere, non placerat nibh volutpat. Proin malesuada euismod dapibus. Curabitur vel velit in erat venenatis eleifend. Aliquam erat volutpat. Sed faucibus elit elit. Nulla facilisi. Sed lobortis urna sed sapien accumsan hendrerit. Suspendisse lacinia pretium eros, at placerat lacus sodales vel. Cras euismod porttitor metus quis egestas. Cras sed aliquet enim, eu rutrum dui. Aliquam vitae malesuada nisi, id ultricies dolor. Curabitur vel lacus nulla.</p> </article> </div> <footer> <p>Copyright © 2021</p> </footer> </body>
在使用了 CSS 網頁教學模板后，我們得到的網站將會是這樣的：
可以看到，使用 CSS 網頁教學模板可以快速創建一個簡潔、美觀的網站。當然，如果想要更加深入地了解 CSS，也可以嘗試自行編寫樣式表來控制網頁的樣式。
下一篇css網頁整體布局