<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邮箱</title> <link href="css/font-awesome.min.css" rel="stylesheet" /> </head> <style> *{margin: 0;padding: 0;} nav{ width: 200px; margin: auto; border: 1px solid #eee; border-radius: 8px; box-shadow: 0px 2px 3px #eee; } li{ line-height: 2em; list-style: none; padding-left:20px ; } li:not(:last-child){ border-bottom: :1px solid #eee; } li:first-child{ background: dimgray; border-radius: 5px 5px 0px 0px; color: #EEEEEE; border-bottom: 1px solid darkblue; } .fa-envelope-o{color: skyblue;} .fa-flag{color: #FF0000;} .fa-fighter-jet{color: green;} .fa-archive{color: #FFA500;} .fa-trash-o{color: #EEEEEE;} i{margin-right: 10px;} li:not(:first-child){ color: #a3a2a2; position: relative; cursor: pointer; } li:not(:first-child):hover{ background: #f0f0f0; } li span{ border: 1px solid #FFA500; padding: 3px 8px; border-radius: 0.9em; font-size: 0.8em; position: absolute; right: 10px; line-height: 1em; top: 0.5em; } li.selected{ background: grey!important; color: #fff; } li.selected span{ background: #f00; border:none; } li.selected:after{ content: ""; border: 8px solid #6c737d; border-top-color: transparent; border-bottom-color: transparent; border-right:none ; display: block; position: absolute; right: -8px; top: calc(1em - 8px); } </style> <body> <nav> <ul> <li>我的邮箱</li> <li class="selected"><i class="fa fa-envelope" aria-hidden="true"></i>收件箱<span>32</span></li> <li><i class="fa fa-flag" aria-hidden="true"></i>红旗邮件<span>7</span></li> <li><i class="fa fa-fighter-jet" aria-hidden="true"></i>已发送<span>0/17</span></li> <li><i class="fa fa-archive" aria-hidden="true"></i>草稿箱<span>2</span></li> <li><i class="fa fa-trash" aria-hidden="true"></i>已删除<span>5</span></li> <li>所有邮件</li> </ul> </nav> </body> </html>