jqeury+div网页简单制作

一直以来，不怎么喜欢做网页。因为被某人教用Deamviewer 制作，然后是点击哪个哪个按钮，然后出入表格，然后点击哪里哪里，插入图片，又点....

 

今天试着去做一个页面，div 制作在网络上都可以找到很多内容。

如：div+css 制作表格等等。

昨晚切了一张图片，今天把它用到网页的背景中去吧。哈哈

  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="script/jquery-1.4.1.js" type="text/javascript" ></script>
<script src="script/index.js" type="text/javascript" ></script>
</head>
<body style="background-image:url(images/linux.png)">
    <div class="topdiv">
       <p>Mutou's Blog<p>
    </div>
    <div class="navigation"  >
        <ul id="menu" >
            <li class="onmove"  >首页</li>
            <li class="onmove"  >日记</li>
            <li class="onmove"  >相册</li>
            <li class="onmove"  >音乐</li>
            <li class="onmove"  >英语</li>
            <li class="onmove"  >关于我</li>

        </ul>
    </div>
    <div class="middiv" > </div>
    <div class="bottomdiv">
        <ul id="biaoge">
            <li class="bottomli">简介 </li>
            <li class="bottomli" >联系方式 </li>
            <li class="bottomli">风格 </li>
            <li class="bottomli">服务 </li>
            <li class="bottomli">VIP </li>
            <li class="bottomli">订阅 </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>版权所有-</li>
            <li>--mutou</li>
        </ul>
    </div>

</body>
</html>
View Code
       *{
          margin:0;
          padding:0;
       }
        .topdiv {
            font-size:50px;
           margin: auto;
           height: 400px;
           width: 1004px;
           background-image: url(../images/top.jpg);        
           text-align:center;
       }
       div.topdiv p {
           color:white;
           margin:auto;
           padding-top:250px;

       }
       .navigation {
           margin:auto;
           height:80px;
           width:1004px;
           font-size:25px;
           background-image:url(../images/daohan2.jpg);
       }
       div.navigation ul {
           margin:0 80px;
       }


       div.navigation li {
           float:left;
           width:100px;
           height:50px;
           list-style-type:none;
           color:white; 
           padding:20px;
           text-align:center;
           line-height:50px;
           cursor:pointer;
           
       }
        
       .middiv {
           margin:auto;
           height:200px;
           width:1004px;
           background-image:url(../images/zhongjian2.jpg);
       }

       .bottomdiv {
           margin:auto;
           height:167px;
           width:1004px;
           background-image:url(../images/bottom.jpg);
       } 
      
       #biaoge {
          width:1004px;
          margin:0px 200px;
       }

       div.bottomdiv li{
          color:#00ff00;
          font-size:10px;
          list-style-type:none;
          width:100px;
          height:12px;
          line-height:200px;   <!--文字与bottom顶端的距离 -->
          text-align:center;
          float:left;
          margin-left:0px;
          margin-top:8px;
  

       }
       
       .tionmove
       {
           background-color: blue;
       }
View Code
    $(function (){
            $('.onmove').hover(function(){
                $(this).addClass('tionmove');
                },function(){
                    $(this).removeClass('tionmove');
                }
             );       
      });
View Code

上面的js代码中的 "tionmove"  不可以与 “onmove”  相同。我调试了半天，总是一加载时导航条就显示蓝色，用鼠标经过移开后才变正常。

后来网上找了好久，忽然发现，class="onmove" 那里，在css中定义了 .onmove 的属性，那么网页一加载肯定就变色了。然后改了一个不一样的 class

,终于可以实现了预期的效果了。

虽说上面的不是很难制作，但对木头来说也算是保存今天的成果了。呵呵

 
 

posted @ 2014-04-12 23:05  那谁快跑辽  阅读(158)  评论(0)    收藏  举报