网页布局样式表：导航栏设计与实现

以下代码是一个简单的网页布局样式表，包括以下部分：

设置全局样式：将页面边距和内边距都设置为0，背景颜色为浅灰色。

margin: 0px;
padding: 0px;

头部样式：将头部高度设置为130px，用于放置网站的标题、Logo等内容。

.header {
  /*头部*/
  width: 100%;
  height: 130px;
}

头部图片样式：将图片宽度设置为100%，高度设置为150px，用于放置网站的头部背景图片。

#hi1 {
  /*头部图片*/
  width: 100%;
  height: 150px;
}

导航栏样式：将导航栏宽度设置为100%，内边距设置为0，高度设置为30px，外边距设置为30px，用于放置网站的主要导航链接。

.dh {
  width: 100%;
  margin-top: 10px;
}

.dh ul {
  /*导航栏*/
  width: 100%;
  padding: 0px; /*内边距*/
  height: 30px; /*高度*/
  margin-bottom: 30px; /*外边距*/
  display: flex;
  justify-content: center;
}

导航栏列表样式：将每个导航链接的高度设置为30px，宽度设置为100%，去除列表符号，浮动在左侧，行内显示。

.dh ul li {
  /*列表设置*/
  height: 30px;
  width: 100%;
  list-style: none;
  /*列表样式*/
  float: left;
  display: inline; /*行内显示*/
}

导航链接样式：将文本居中，字体颜色为白色，字体大小设置为larger，字体样式设置为楷体，去除下划线，背景颜色为深蓝色，行高设置为40px，底部添加1px粗细的灰线条。

.dh ul li a {
  /*列表超链接设置*/
  text-align: center;
  /*文本中部*/
  color: white;
  width: 100%;
  font-size: larger;
  font-family: '楷体';
  text-decoration: none;
  /*列表下划线无*/
  display: block;
  background-color: rgb(36, 84, 129);
  line-height: 40px;
  /*行高*/
  border-bottom: 1px solid rgb(168, 164, 172);
}

鼠标悬停样式：当鼠标悬停在导航链接上时，字体颜色变为黑色，背景颜色变为更深的蓝色，底部添加3px粗细的深紫色线条。

.dh ul li a:hover {
  /*鼠标划过时*/
  color: rgb(0, 0, 0);
  background-color: rgb(37, 84, 155);
  border-bottom: 3px solid rgb(16, 4, 28);
}

底部样式（未给出）：可以在代码后面添加底部样式，用于放置网站的版权信息、联系方式等内容。

以上代码示例展示了一个简单的网页布局样式表，用于实现网页的导航功能和基本布局。您可以根据自己的需求修改代码，实现不同的网页布局效果。