| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: moccasin; | |
| } | |
| .list { | |
| list-style: none; | |
| 900px; | |
| margin: 100px auto; | |
| background-color: powderblue; | |
| } | |
| .list li { | |
| float: left; | |
| padding: 4px 0; | |
| margin: 0 18px; | |
| 160px; | |
| line-height: 48px; | |
| text-align: center; | |
| } | |
| .list a { | |
| display: block; | |
| color: #000; | |
| text-decoration: none; | |
| font-size: 30px; | |
| position: relative; | |
| } | |
| .list span { | |
| display: block; | |
| 100%; | |
| } | |
| .list span:after { | |
| position: absolute; | |
| left: 50%; | |
| right: 50%; | |
| bottom: 0; | |
| content: ""; | |
| display: block; | |
| transition: .65s; | |
| border-bottom: solid 2px transparent; | |
| } | |
| .list a:hover span:after { | |
| left: 0; | |
| right: 0; | |
| border-bottom: solid 2px deeppink; | |
| } | |
| .clearfix:after, .clearfix:before { | |
| content: ""; | |
| display: table; | |
| } | |
| .clearfix:after { | |
| clear: both; | |
| } | |
| .clearfix { | |
| *zoom: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="list clearfix"> | |
| <li><a href="#" class="title_a move"><span class="T_title">首页</span></a></li> | |
| <li><a href="#" class="title_a move"><span class="T_title">家庭服务</span></a></li> | |
| <li><a href="#" class="title_a move"><span class="T_title">企业服务</span></a></li> | |
| <li><a href="#" class="title_a move"><span class="T_title">收纳服务</span></a></li> | |
| </ul> | |
| </body> | |
| </html> |