HTML和CSS是網頁設計中常用的兩種技術，通過代碼編寫，可以實現我們想要的頁面效果。在這篇文章中，我們將介紹一個HTML和CSS案例源代碼，幫助讀者更好地理解和學習這兩種技術。 下面是一個簡單的HTML頁面示例，展示了一個網頁布局，包括頁面頭部、導航欄和內容區域。

My Website
Introduction
Welcome to my website!
About
I am a web developer based in New York City.
Contact
You can contact me atinfo@mywebsite.com.

為了實現網頁的樣式效果，我們需要使用CSS來設置元素的樣式。下面是示例中使用的樣式代碼。

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav {
background-color: #333;
color: #fff;
}
header {
padding: 20px;
}
nav {
display: flex;
justify-content: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px;
}
h1, h2 {
font-size: 36px;
margin: 0;
padding: 20px 0;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
}

通過使用這些HTML和CSS代碼，我們可以創建一個簡單但漂亮的網站布局。讀者可以嘗試使用這些代碼，并根據自己的需求進行修改和擴展，以實現更多的頁面效果。