CSS是我們網頁設計中非常重要的一部分。它提供了我們外觀的樣式和布局。今天我們將學習如何簡單地使用CSS做一個網頁模板。
首先，我們需要一些HTML代碼。這些是我們要樣式化的元素。例如：
<body> <div id="header"> <h1>My Website</h1> <p>Welcome to my website!</p> </div> <div id="content"> <h2>About Me</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="footer"> <p>Copyright ? 2021</p> </div> </body>
這是一個基本的HTML結構，但它看起來有點無聊。現在我們可以使用CSS添加一些樣式和布局。
我們將使用CSS選擇器來選擇每個元素并為其添加樣式。例如：
#header {
background-color: #333;
color: #fff;
text-align: center;
padding: 50px;
}
#content {
width: 80%;
margin: 0 auto;
}
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}這里，我們使用了ID選擇器來選擇我們的header、content和footer元素。我們按需添加了背景顏色、字體顏色、文本對齊方式和填充值等屬性。
現在，當我們將HTML和CSS代碼一起放在一起時，我們就可以看到我們的網頁模板：
<body>
<div id="header">
<h1>My Website</h1>
<p>Welcome to my website!</p>
</div>
<div id="content">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="footer">
<p>Copyright ? 2021</p>
</div>
</body>
#header {
background-color: #333;
color: #fff;
text-align: center;
padding: 50px;
}
#content {
width: 80%;
margin: 0 auto;
}
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}如您所見，CSS可以讓我們非常容易地設計和樣式化我們的網頁模板，讓它們看起來專業且令人印象深刻。那么現在就試試看它吧！