这是一个基础的网页布局样式代码,其中包含了头部、导航栏、主体内容区、页面目录、尾部等部分的样式设置。具体解释如下:

  1. 全局设置样式:
  • 'margin: 0px; padding: 0px;': 重置页面外边距和内边距为0,以保证页面布局整齐。
  1. 头部样式:
  • '.header': 设置头部样式,包括宽度、高度等。
  1. 背景样式:
  • 'body': 设置页面背景颜色为rgb(235, 225, 225)。
  1. 导航栏样式:
  • '.dh': 设置导航栏样式,包括宽度、高度、外边距等。
  • '.dh ul': 设置导航栏列表样式,包括宽度、内边距、高度、外边距等。
  • '.dh ul li': 设置导航栏列表项样式,包括高度、列表样式、浮动等。
  • '.dh ul li a': 设置导航栏列表项超链接样式,包括文本样式、宽度、字体、文本装饰、行高、背景颜色等。
  • '.dh ul li a:hover': 设置导航栏列表项鼠标划过时的样式。
  1. 尾部样式:
  • '.footer': 设置尾部样式,包括宽度、高度、背景颜色、字体等。
  • '#fi1': 设置尾部图片样式,包括宽度、高度、浮动、内边距等。
  • '.footer p': 设置尾部文本样式,包括外边距等。
  1. 主体内容区样式:
  • '#shiming': 设置市名简介模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#shiming img': 设置市名图片样式,包括边框弧度、浮动、外边距等。
  • '#shiming img:hover': 设置市名图片鼠标划过时的放大效果。
  • '#shiming p': 设置市名文本样式,包括字体间隔、文本缩进、行高等。
  • '#shihua': 设置市花1模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#shihua1': 设置市花2样式,包括宽度、高度、浮动等。
  • '#shishu': 设置市树样式,包括宽度、高度、浮动、内边距等。
  • '#hua': 设置花图片样式,包括边框弧度、浮动、外边距等。
  • '#hua:hover': 设置花图片鼠标划过时的放大效果。
  • '#shu': 设置树图片样式,包括边框弧度、浮动、外边距等。
  • '#shu:hover': 设置树图片鼠标划过时的放大效果。
  • '#shihua p': 设置市花文本样式,包括字体间隔、文本缩进、行高等。
  • '#dili': 设置地理模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#dili img': 设置地理图片样式,包括宽度、高度、浮动、外边距、边框样式、边框弧度等。
  • '#dili img:hover': 设置地理图片鼠标划过时的放大效果。
  • '#dili p': 设置地理文本样式,包括字体间隔、文本缩进、行高等。
  • '#lishi': 设置历史模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#lishi p': 设置历史文本样式,包括字体间隔、文本缩进、行高等。
  • '#lishi img': 设置历史图片样式,包括宽度、高度、浮动、外边距、边框样式、边框弧度等。
  • '#lishi img:hover': 设置历史图片鼠标划过时的放大效果。
  • '#ziyuan': 设置资源模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#ziyuan p': 设置资源文本样式,包括字体间隔、文本缩进、行高等。
  • '#ziyuan img': 设置资源图片样式,包括宽度、高度、浮动、外边距、边框样式、边框弧度等。
  • '#ziyuan img:hover': 设置资源图片鼠标划过时的放大效果。
  • '#quhua': 设置行政区划模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#quhua p': 设置区划段落样式,包括字体间隔、文本缩进、行高等。
  • '#quhua img': 设置区划图片样式,包括宽度、高度、浮动、外边距、边框样式、边框弧度等。
  • '#quhua img:hover': 设置区划图片鼠标划过时的放大效果。
  • '#renkou': 设置人口模块样式,包括清除浮动、背景颜色、内边距、边框样式、边框弧度等。
  • '#renkou p': 设置人口段落样式,包括字体间隔、文本缩进、行高等。
  1. 页面目录样式:
  • '.mulu': 设置页面目录样式,包括浮动、宽度、外边距、背景颜色等。
  • '#d1': 设置目录块大小设置,包括字体、颜色、背景颜色、宽度、高度、内边距、外边距等。
  • '#d2': 设置目录内容块设置,包括清除浮动等。
  • '.mulu ul li': 设置列表设置,包括列表样式等。
  • '.mulu ul': 设置目录块样式,包括外边距、内边距等。
  • '.mulu ul li a': 设置目录超链接设置,包括显示方式、文本装饰、颜色、行高、边框等。
  • '.mulu ul li a:hover': 设置鼠标划过时目录时的样式。
  • '.mulu span': 设置目录链接块样式,包括浮动等。
  1. 主体样式:
  • '.zhuti': 设置主体样式,包括背景颜色、外边距等。
  1. 视频设置样式:
  • '#ship': 设置视频设置样式,包括文本对齐方式、外边距等。
网页布局样式代码 - 头部、导航栏、主体内容区、页面目录、尾部样式设置

原文地址: https://www.cveoy.top/t/topic/oytp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录