<html>
<head>
<title></title>
<meta http-equiv="content" content="text/html" charset="utf-8"/> <style type="text/css">
*{ margin: 0; padding: 0; } .beijing{ border: 5px solid gainsboro; width: 222px; height: 600px; } .biao1 ul li{ list-style-type: none; padding-left: 30px; line-height: 40px; border-bottom:2px solid gainsboro; } .biao1 ul li:hover{ background-color: gainsboro; color: orange; cursor: pointer; width: 190px; border-left: 2px solid orange; } .biao2 ul li{ padding-left: 65px; } .biao2 ul li:hover{ width: 155px; } .sousuo{ margin-top: 20px; margin-left: 20px; } .sousuo:hover{ cursor: pointer; } .wenben{ margin-left: 45px; margin-top: -22px; } </style> </head> <body> <div class="beijing"> <div class="tu1"> <img src="xxxx" alt=""> </div> <div class="biao1"> <ul> <li>首页</li> <li>博文</li> <div class="biao2"> <ul> <li>前端技术</li> <li>交互设计</li> <li>视觉设计</li> <li>用户研究</li> <li>设计茶吧</li> <li>团队生活</li> </ul> </div> <li>文涛札记</li> <li>关于我们</li> </ul> </div> <div class="sousuo"> <img src="xxxx"> </div> <div class="wenben"> <input type="text"/> </div> </div> </body> </html>
以上是一个简单的导航页面，为基础的入门代码
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
