CSS 導航欄登陸樣式
.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #eee; padding: 10px 20px; } .navbar-brand { font-size: 28px; font-weight: bold; } .navbar-items { display: flex; justify-content: space-between; align-items: center; width: 30%; } .navbar-items li { list-style: none; } .navbar-items a { color: #333; text-decoration: none; margin-left: 20px; font-size: 18px; } .navbar-items a:hover { color: #666; } .navbar-login { display: flex; align-items: center; justify-content: space-between; } .navbar-login input[type=text], .navbar-login input[type=password] { padding: 5px 10px; border: none; border-radius: 5px; margin-right: 10px; } .navbar-login button { background-color: #333; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; } .navbar-login button:hover { background-color: #666; }
上面是一個簡單的 CSS 導航欄登陸樣式代碼,它包括一個導航欄和一個登陸框。
導航欄使用了 Flex 布局,其中 navbar-brand 是網站品牌的名稱,navbar-items 是導航欄的菜單項。
登陸框使用了 input 和 button 標簽,將它們放在 navbar-login 的 Flex 容器中。
這個樣式可以讓你快速搭建一個漂亮的導航欄并且方便用戶登陸網站。
上一篇mysql數據庫分盤
下一篇css導航欄漸變特效