「前端+鸿蒙」核心技术HTML5+CSS3（九）

以一个产品网站为例，以下是每个部分的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">产品网站Logodiv>
  <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="#">首页