泉州市人民政府官方网站样式修改
一、隐藏部分元素
为了提高网站的性能和用户体验,我们需要对部分元素进行隐藏。这里使用了一个名为avalonHide
的类,将其应用于需要隐藏的元素上,设置display: none!important
,使元素在页面布局中消失。
二、调整导航栏样式
- 对顶部导航栏的链接进行外边距调整,设置
margin: 0 25px;
。 - 对于
tu_list2
模块下的列表项,需要调整图片图标的位置,使其显示在图片下方。将top:auto;bottom:0;
添加到图片图标的CSS样式中。 - 当屏幕宽度小于999px时,需要隐藏导航栏的二级分类。通过设置
.tu_list2 .hd{display: none;}
实现。 - 为标题列表的列表项设置右边距为10px。
三、调整提示栏样式
- 将提示栏的背景颜色设置为红色,并设置边框颜色和宽度。通过以下CSS代码实现:
.tit1 li{margin-right:10px;}.yqfk_bar{display: inline-block;background: #ba2b29;border: #ba2b29;height: 34px;line-height: 34px;border-radius: 10px 10px 10px 0px;text-align: center;right: 0;margin-top: 8px;color: #ffffff!important;padding: 0 5px;font-size: 16px;font-weight: bold;}.yqfk_bar a{color: #ffffff!important
四、总结
通过对泉州市人民政府官方网站的样式进行修改,我们提高了网站的性能和用户体验,优化了页面布局,使其更加美观易用。