求dw网页框架代码,布局方式采用DIV+CSS的布局方式,附件为导航栏格式,多谢

 我来答
力欢0c1
2018-12-15 · TA获得超过124个赞
知道小有建树答主
回答量:258
采纳率:50%
帮助的人:117万
展开全部

简单谢了一个,主要涉及一个浮动,一个hover的隐藏,显示,不是很复杂,可以自己尝试写下,以下代码仅供参考

<!DOCTYPE html>
<html>
  <head>
    <style>
   div.menu-bar{
    margin:0 auto;
    width: 1024px;
   }
   div.menu-bar ul {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #fffabf;
}

div.menu-bar li > a, div.menu-bar li > a:link, div.menu-bar li > a:visited, div.menu-bar li > a:active {
    display: block;
    padding: 0 0 0 10px;
    height: 100%;
    line-height: 30px;
    font-size: 24px;
    font-style: italic;
    text-decoration: none;
    background-color: #fffabf;
    color: #5d5636;
    cursor: pointer;
}

div.menu-bar ul ul {
margin-top: 2px;
display: none;
}

div.menu-bar ul ul li {
margin: 0;
padding: 0;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}

div.menu-bar li:hover > ul {
  display: block;
}
   
   div.menu-bar ul li {
display: block;
float: left;
width:170px;
}
   </style>
    
 </head>
 <body>
  <div>
  <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">专业特色</a>
      <ul>
        <li>
          <a href="#">培养方案</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">教学团队建设</a>
      <ul>
        <li>
          <a href="#">教师</a>
        </li>
        <li>
          <a href="#">培训</a>
        </li>
        <li>
          <a href="#">研究项目</a>
        </li>
        <li>
          <a href="#">建设成果</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">实训基地建设</a>
      <ul>
        <li>
          <a href="#">校内实训</a>
        </li>
        <li>
          <a href="#">校外实训</a>
        </li>
        <li>
          <a href="#">工学交替</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">社会服务</a>
      <ul>
        <li>
          <a href="#">合作企业</a>
        </li>
        <li>
          <a href="#">社会服务</a>
        </li>
      </ul>
    </li>
     <li>
      <a href="#">网络教学平台</a>
      <ul>
        <li>
          <a href="#">教学资源库</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
 </body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式