以一个产品网站为例，以下是每个部分的HTML结构和CSS样式的完整代码示例。
1、顶部导航条
顶部导航条通常包含网站的联系信息或者一些导航链接。
HTML:
<div id="top-nav"><ul><li><a href="#">联系方式</a></li><li><a href="#">帮助中心</a></li><li><a href="#">登录</a></li></ul>
</div>
CSS:
#top-nav {background-color: #333;color: #fff;text-align: right;padding: 10px 20px;
}
#top-nav ul {list-style: none;padding: 0;margin: 0;
}
#top-nav li {display: inline;margin-left: 20px;
}
#top-nav a {color: #fff;text-decoration: none;
}
2、头部
头部包含网站的Logo和可能的标语。
HTML:
<header><div class="logo">产品网站Logo</div><div class="tagline">优质产品，尽在这里</div>
</header>
CSS:
header {background-color: #444;color: #fff;padding: 20px 0;text-align: center;
}
.logo {font-size: 2em;
}
.tagline {font-size: 1em;
}
3、主导航
主导航是网站的导航栏，包含指向网站主要部分的链接。
HTML:
<nav id="main-nav"><ul><li><a href="#">首页
