今天我們來看一下如何用CSS制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)。
<!DOCTYPE html>
<html>
<head>
<title>CSS簡(jiǎn)單網(wǎng)頁(yè)成品</title>
<style>
/* 設(shè)置整個(gè)頁(yè)面的背景色及字體 */
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
/* 設(shè)置網(wǎng)頁(yè)的標(biāo)題樣式 */
h1 {
text-align: center;
color: navy;
}
/* 設(shè)置網(wǎng)頁(yè)的段落樣式 */
p {
line-height: 1.5; /* 行高 */
text-indent: 2em; /* 首行縮進(jìn) */
margin-top: 10px;
margin-bottom: 10px;
}
/* 設(shè)置鏈接樣式 */
a {
color: navy;
text-decoration: underline;
}
/* 設(shè)置圖片樣式 */
img {
margin: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<h1>我的個(gè)人網(wǎng)頁(yè)</h1>
<p>歡迎來到我的個(gè)人網(wǎng)頁(yè)，這里記錄了我生活和工作中的點(diǎn)滴。</p>
<p>我喜歡旅游，看到的美景總是讓人感到驚嘆。以下是我拍攝的一張照片：</p>
<img src="beautifulview.jpg" alt="美景">
<p>如果你也喜歡旅游，可以訪問<a >travel.com</a>，里面有很多有用的旅游信息。</p>
</body>
</html>以上就是制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)所需的CSS代碼，在此基礎(chǔ)上可以根據(jù)實(shí)際需要進(jìn)行修改和擴(kuò)展。