随便做的一个网站开发笔记一

前端设计：

网页顶部：logo+导航(二级菜单)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript">
  //获取指定id的文本标签
  function $(id)
  {
      return document.getElementById(id);
  }
  
  //设置指定对象显示
  function showobj(id)
  {
      var obj=$(id);
      obj.style.display="";
  }
  
  //隐藏指定对象
  function hiddenobj(id)
  {
      var obj=$(id);
      obj.style.display="none";
  }

</script>

</head>

<body>
<div id="main">
  <!---*******************************************************************************-->
  <!--网页头部-->
  <div id="top">
    <!--logo-->
    <div id="logo"><img id="logo1"  src="images/logo/logo1.jpg"/><img  id="logo2" src="images/logo/logo2.jpg"/></div>
    <!--menu-->
    <div id="menu">
      <div class="menul"></div>
      <div class="menucenter">
        <div class="menulist">
          <ul class="menunav">
            <li><a href="#">首页</a><span>|</span></li>
            <li><a href="#">公司介绍</a><span>|</span></li>
            <li><a href="#">新闻中心</a><span>|</span></li>
            <li><a href="#" onmouseover="showobj('sub1')" onmouseout="hiddenobj('sub1')">产品信息</a><span>|</span></li>
            <li><a href="#">服务与支持</a><span>|</span></li>
            <li><a href="#">招贤纳士</a><span>|</span></li>
            <li><a href="#">联系我们</a></li>
          </ul>
          
          <!--二级菜单-->
           <ul id="sub1" class="submenu" onmouseover="showobj('sub1')" onmouseout="hiddenobj('sub1')" style="position:absolute; top:44px; left:400px; display:none;" >
             <li><a href="#">软件产品</a></li>
             <li><a href="#">硬件产品</a></li>
             <li><a href="#">游戏产品</a></li>
           </ul>
        </div>
        
      </div>
      <div class="menur"></div>
    </div>
  </div>
  
  <div id="menubar"></div>
  <!---*******************************************************************************-->
  <!--网页中间-->
  <div id="middle">
  
  </div>
  
  <!---*******************************************************************************-->
  <!--网页底部-->
  <div id="bottom">
  
  </div>

</div>

</body>
</html>

Css

html,body,div,ul,li,a{ margin:0px; padding:0px; }
bodu{ font-size:12px;}

#main{ width:960px; height:600ox; margin:0px auto;}

/**********************************************************************************/
/*网页顶部*/
#top { /*background-color:#F00;*/}
#logo1 { width:120px; height:133px;}
#logo2 { width:840px; height:133px;}
#menu{ width:960px; }
.menul{ width:11px; height:44px; background:url(../images/dh_l.gif); float:left;}
.menucenter{ background:url(../images/dh_dt.gif) repeat-x; height:44px; width:938px; float:left;}
.menur{ background:url(../images/dh_r.gif); width:11px; height:44px; float:left;}
.menulist{ position:relative;}
.menunav{ list-style:none;}
.menunav li { display:inline; line-height:44px; text-align:center; }
.menunav li a { color:#FFF; text-decoration:none; display:inline-block; width:120px; text-align:center; font-size:12px;}
.menunav li span { color:#FFF;}
.menunav li a:hover { color:#F00;}
/*二级菜单*/
.submenu { list-style:none; width:135px;}
.submenu li { width:135px; background-color:#0A736B; height:30px; line-height:30px; text-align:center; }
.submenu a { color:#000; text-decoration:none; display:inline-block; width:135px; height:30px;}
.submenu a:hover { color:#FFF; text-decoration:underline; background-color:#030;}

#menubar { height:5px; background:url(../images/menubar_byzq.gif) repeat-x; clear:both;}

二级菜单

<script type="text/javascript">
  //获取指定id的文本标签
  function $(id)
  {
      return document.getElementById(id);
  }
  
  //设置指定对象显示
  function showobj(id)
  {
      var obj=$(id);
      obj.style.display="";
  }
  
  //隐藏指定对象
  function hiddenobj(id)
  {
      var obj=$(id);
      obj.style.display="none";
  }

</script>
  <div class="menulist">
          <ul class="menunav">
            <li><a href="#">首页</a><span>|</span></li>
            <li><a href="#">公司介绍</a><span>|</span></li>
            <li><a href="#">新闻中心</a><span>|</span></li>
            <li><a href="#" onmouseover="showobj('sub1')" onmouseout="hiddenobj('sub1')">产品信息</a><span>|</span></li>
            <li><a href="#">服务与支持</a><span>|</span></li>
            <li><a href="#">招贤纳士</a><span>|</span></li>
            <li><a href="#">联系我们</a></li>
          </ul>
          
          <!--二级菜单-->
           <ul id="sub1" class="submenu" onmouseover="showobj('sub1')" onmouseout="hiddenobj('sub1')" style="position:absolute; top:44px; left:400px; display:none;" >
             <li><a href="#">软件产品</a></li>
             <li><a href="#">硬件产品</a></li>
             <li><a href="#">游戏产品</a></li>
           </ul>
        </div>

 

posted @ 2015-03-23 00:01  youguess  阅读(137)  评论(0)    收藏  举报