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>