对话高考网（1）

最新推荐文章于 2024-10-26 17:41:46 发布

handsome_le

最新推荐文章于 2024-10-26 17:41:46 发布

阅读量266

点赞数 1

文章标签：下拉式导航栏-滚动图

本文链接：https://blog.csdn.net/handsome_le/article/details/60867956

版权

项目开始进行主页面的制作，大致确定框架，进行div分块。

页面主标题及图片
导航栏
新闻模块（滚图及简介）
信息模块
交流论坛模块

在最初写导航栏的时候，设想使用看起来比较有趣的下拉式导航栏，在经过看视频自己联系之后制作了一个初步成品，效果如下：

下拉式导航栏

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>对话高考网</title>
  <style type="text/css">
      ul{ margin: 0px;padding: 0px;}
      #nav{ background-color: #79a4ee;width: 660px;height: 40px;margin:0 auto;}
      ul{list-style: none;}
      ul li{ float:left; width: 110px; line-height: 40px; text-align:center; position: relative;}
      a{ text-decoration: none;color: #000; display:block; padding:0 10px;}
      a:hover{ color:#FFF; background-color: #666;}
      ul li ul li { float:none ;background-color: #eee; margin-top:2px; }
      ul li ul{ position: absolute; left: 0px; top:40px; display: none;}
      ul li ul li a{width: 90px;}
      ul li ul li a:hover{ background-color: cornflowerblue;}
      ul li:hover ul{ display: block;}
    </style>
</head>
<body>
   <div id="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><a href="#">信息查询</a>
           <ul>
             <li><a href="#">大学直通车</a></li>
             <li><a href="#">录取分数线</a></li>
           </ul>
        </li>
        <li><a href="#">交流论坛</a></li>
        <li><a href="#">建议留言</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>
</body>
</html>