靜態頁面的導航欄製作
阿新 • • 發佈:2022-03-24
1. html
(1) 這個是首頁的基本結構
(2) css 的基本樣式結構
/* reset */ /* 重置樣式 */ * { padding: 0; margin: 0; box-sizing: border-box; } /* main styling */ html, body{ font-family: 'Segoe Ul', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.7em; } a { color: #333; text-decoration: none; } h1, h2, h3 { padding-bottom: 20px; } p { margin: 10px 0; }/* utitlity classes */ /* 重點 通用樣式 */ .container { margin: 0 auto; max-width: 1100px; overflow: hidden; padding: 0 20px; } .text-pranime { color: #f7c08a; }
/* navber */ #navbar { background-color: #333; color: #ffffff; overflow: auto; } #navbar a{ color: #ffffff; } #navbar h1 { float: left; padding-top: 20px; } #navbar ul { float: right; list-style: none; } #navbar ul li{ float: left; } #navbar ul li a{ display: block; padding: 20px; text-align: center; }
#navbar ul a:hover, #navbar ul a.curread{ background-color: #444; color: bisque; }