海南省农业科学院
导航栏样式调整
根据提供的素材,我们对网站的导航栏进行了以下样式调整:
- 当鼠标悬停在导航链接上时,为链接添加一个蓝色边框(.gdly li:hover)以及鼠标指针变为手型(.gdly .hover a)。
- 将具有”aria-fixedOldHidden=true”类的元素设置不显示轮廓线(.useOldFixed),并将具有”aria-hide”类的元素设置为不可见(.ariaHide)。
- 去除页面元素的轮廓线(:focus)。
通过这些样式调整,使得导航栏更具可读性和视觉吸引力。
导航栏设计
导航栏位于页面顶部,包含多个导航选项。每个导航项都是一个水平排列的列表项(.gdly li),并具有左右内边距和右外边距。
导航栏整体宽度为505px,高度为45px,下方有一个竖直边框(border-bottom)作为分隔线。
以下是一个示例的HTML代码片段:
<div class="gdly">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">研究</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
你可以根据自己的需求修改导航链接和文本内容。