CSS學習實例-左側垂直導航菜單

時間 2019-12-06

標籤 css 學習實例左側垂直導航菜單欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的信息管理</title>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<style type="text/css">
#adminMenus {
 font-size: 14px;
 float: left;
 width: 180px;
}
.mod strong {
 display: block;
 font-size: 12pt;
 border-bottom: 2px solid #7798cb;
 padding: 0 10px 5px 0;
 color: #666666;
}
.mod ul{
 line-height: 24px;
}
.mod li {
 /*去除li前面的點號*/
 list-style: none;
 /*去除兩邊的浮動，不然若是內容少的話會不換行*/
 clear: both;
 float : left;
 padding: 5px;
}
#adminMenus a {
 text-decoration: none;
}


</style>
</head>
<body>
  <div id="adminMenus" class="mod">
    <ul>
        <strong>我的信息管理</strong>   
          <li><a href="#">修改我的資料</a></li>
          <li><a href="#">修改登陸密碼</a></li>
          <li><a href="#">個人活動</a></li>
          <li><a href="#">個人福利</a></li>
          <li><a href="#">個人體力</a></li>
    </ul>
  </div>
</body>
</html>

相關標籤/搜索