# 網頁製作 III (CSS 更簡單der ) --- 上面的列表看起來很無聊對吧！ 我們來給他修飾一下 --- ### 選擇器(II) --- - A > B - :hover - :first-child - :last-child - :only-child - :nth-child(n) - :first-of-type - :nth-od-type(A) - :nth-of-type(An+B) --- - 擴充表單 ```htmlmixed <li><a>About</a> <ul> <li><a>Contect Us</a></li> <li><a>Location</a></li> <li><a>QA</a></li> </ul> </li> ``` --- ### 增加設定 ---- - 設定子項參數 參考 ```css ul.menu a { background-color: rgb(53, 153, 164); border-left: 1px solid #ccc; color: #333; display: block; padding: 0 30px; text-decoration: none; line-height: 40px; } ul.menu li { position: relative; white-space: nowrap; } ``` ---- - 設定滑鼠移入後變色 參考 ```css ul.menu a:hover { background-color: #ef5c28; color: #fff; } ul.menu li:hover > a { background-color: #ef5c28; color: #fff; } ``` ---- 參考 ```css ul.menu ul { position: absolute; z-index: 99; left: -1px; top: 100%; min-width: 180ox; } ul.menu ul li { border-bottom: #ccc 1px solid; } ul.menu ul li:last-child { border-bottom: none; } ``` ---- ### 修飾表格 --- 參考 ```css ul.menu li > a:first-child { /*modify right border of About element */ border-left: none; } ul.menu li > a:last-child { /* show side border element */ border-right: 1px solid #ccc; } ul.menu ul > li > a:first-child { /* modify right border of the second content */ border-right: none; } ul.menu ul > li > a { /* modify color of the second content */ background-color: rgba(77, 137, 206, 0.8); } ``` ---- - 先試一下效果 ```css ul.menu ul { /* hide the second content */ display: none; } ul.menu li:hover > ul { /* show the content when mouse move in*/ display: block; } ``` ---- #### 進階 參考 ```css ul.menu ul { /* hide the second content */ left: 99999px; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } ul.menu li:hover > ul { /* show the content when mouse move in*/ opacity: 1; -webkit-transition: opacity 0.3s; /* Safari and Chrome */ -moz-transition: opacity 0.3s; /* Firefox 4 */ transition: opacity 0.5s; left: -1px; border-right: 5px; } ```