CSS网页布局样式：头部、导航栏和主体设置

以下代码是一个基本的网页布局样式，包括头部、导航栏和主体部分的设置。

margin: 0px; padding: 0px;
}
.header {
  /*头部*/
  width: 100%;
  height: 150px;
}
body{
  /*主体*/
  background-color: rgb(235, 225, 225);
}
#hi1 {
  /*头部图片*/
  width: 100%;
  height: 150px;
}
img{
  /*图片设置*/
  border-radius: 15px;/*边框弧度*/
}
.dh{
  width: 100%;
  margin-top: 10px;
}
.dh ul {
  /*导航栏*/
  width: 100%;
  padding: 0px;/*内边距*/
  height: 30px;/*高度*/
  margin-bottom: 30px;/*外边距*/
  display: flex;
  justify-content: center;
}
.dh ul li {
  /*导航栏列表*/
  height: 30px;
  width: 100%;
  list-style: none;/*列表样式*/
  float: left;/*左浮动*/
  display: inline;/*行内显示*/
  font: 0.9em;/*字体大小*/
}
.dh{
  /*导航高度*/
  height: 30px;
}
.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);/*底部边框*/
}
.dh ul li a:hover {
  /*鼠标划导航栏时过时*/
  color: rgb(0, 0, 0);
}

代码解释:

• margin: 0px; padding: 0px; 设置了页面的外边距和内边距都为0，避免出现不必要的空白。
• .header 设置了头部的宽度和高度。
• body 设置了页面的背景颜色。
• #hi1 设置了头部图片的宽度和高度。
• img 设置了图片的边框弧度为15px。
• .dh 设置了导航栏的宽度和顶部外边距为10px。
• .dh ul 设置了导航栏列表的宽度、内边距、高度和底部外边距，并使用了弹性盒子模型（display: flex; justify-content: center;）将导航栏居中。
• .dh ul li 设置了导航栏列表的高度、宽度、列表样式、左浮动和行内显示，并使用了字体大小为0.9em。
• .dh ul li a 设置了导航栏链接的文本居中、颜色、宽度、字体大小、字体、下划线无、块显示、背景色、行高和底部边框，并使用了:hover伪类，当鼠标划过链接时，字体颜色变为黑色。

这些样式可以通过CSS样式表嵌入到HTML文档中，用于设置网页的布局和样式。