Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区佳宾路深华贸易大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 战略型高端网站设想公司

    Strategic advanced website design company

    View More
  • 网站扶植中纯 CSS呼应式导航

    时候:2022-12-21  作者:尼高GARY  来历:http://expovol.com

    网站扶植中呼应式导航栏应当易于在任何装备上操纵,并且不管在甚么尺寸的屏幕上检查它都应当看起来很棒。在本文中,咱们将向您展现若何仅操纵 CSS 建立呼应式导航栏。导航栏是任何网站上最主要的设想元素之一。它能够赞助用户阅读您的网站,也能够用来转达主要信息。

    您须要做的第一件事是建立一个导航元素。这将是您的导航栏的容器。接上去,您须要建立一个 li 元素列表。这些将是导航栏中的零丁链接。每一个 li 元素都应当显现 inline-block 。这将确保链接程度显现,并且它们在屏幕上占有不异的空间。您还能够为 li 元素增加边距和添补。这将有助于节制链接之间的间距。默许环境下,链接的背景色彩为 #ccc 。可是,您能够经由过程增加 :hover 挑选器来变动此设置。当鼠标悬停在链接上时,这将操纵差别的背景色彩。您还能够操纵 :active 挑选器在单击链接时变动背景色彩。最初,您能够操纵@media 屏幕和 (max-width: 767px) 法则在屏幕小于 767 像素时变动导航栏的规划。这将确保导航栏显现为单行链接,而不是多列规划。

    演示中显现的呼应式导航栏的代码以下:

    nav { margin: 0; padding: 0; list-style: none; } nav > li { display: inline-block; margin: 0 10px; } nav > li:hover { background-color: #ddd; } nav > li.active { background-color: #fff; color: #000; } @media screen and (max-width: 767px) { nav > li { margin: 0; } nav > li:hover { background-color: #fff; } nav > li.active { background-color: #000; color: #fff; } }

    CSS 导航栏示例

    网站扶植

    深圳网站扶植

    高端网站扶植

    专业网站扶植


    相干案例

    OTHER CASE