HTML和CSS是現代網頁設計的基石，通過它們的使用我們可以創建出精美、功能豐富的網站。下面給大家分享一些HTML CSS網頁設計實例代碼，希望能對初學者有所幫助。
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #EEECEC;
}
h1 {
color: #5E5E5E;
font-size: 48px;
text-shadow: 2px 2px #CFCFCF;
}
p {
color: #5E5E5E;
font-size: 24px;
line-height: 1.5;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
.box {
background-color: #FFFFFF;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0px 5px 10px #CFCFCF;
}
</style>
</head>
<body>
<div class="container">
<h1>歡迎來到我的網頁</h1>
<p>這是一段文字，用于說明本網頁的內容。</p>
<div class="box">
<h2>第一篇文章</h2>
<p>這是第一篇文章的內容。</p>
</div>
<div class="box">
<h2>第二篇文章</h2>
<p>這是第二篇文章的內容。</p>
</div>
<div class="box">
<h2>第三篇文章</h2>
<p>這是第三篇文章的內容。</p>
</div>
</div>
</body>
</html>上面這段代碼主要包括了網頁的基本結構和樣式設置。在<head>標簽中，使用<style>標簽設置了網頁的字體、背景色、標題、段落、容器和盒子的樣式。而在<body>標簽中，使用了<div>標簽來包裹內容，通過使用class屬性來識別不同的元素。
其中，容器的樣式設置使其最大寬度為1200px，且居中顯示。而盒子的樣式設置使其具有白色背景、陰影、內邊距和外邊距，形成了類似于卡片的效果。
希望這個HTML CSS網頁設計實例代碼對想要學習網頁制作的朋友們有所啟示。
下一篇mui 和 vue