寻求网页制作程序

道理很简单的，就是用JS控制DIV的显示与隐藏，主要是DIV的CSS要写好。

解决方案 »

  1.   

    参考这个吧，手把手的教你：http://www.w3cn.org/article/translate/2005/112.html
      

  2.   

    三楼的仁兄,你提供的网址在下去了.有很多css的文章值得学习.我现在刚学做网,CSS还学艺不精.
    CSDN用户登陆界面http://passport.csdn.net/UserLogin.aspx?from=http://community.csdn.net/中就有我想要的样子:电机"新闻","Blog","论坛","图书"后分别显示它们相应的界面.
    我现在很想有个成功的例子,以便修改后自用.
      

  3.   

    <!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>DIV - 自/手动变换</title>
    <style type="text/css">
    <!--
    @charset "utf-8";
    /* PR-CSS 全局设置 */
    * {font:normal 12px/150% "宋体", Arial;color:#666;padding:0;margin:0;}/*所有内外补丁为0，字体粗细正常，12px大，150%行高，#666颜色*/
    ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
    img {border:0;}/*所有图片边框无*/
    a {text-decoration:none;}/*所有链接无修饰[上、下划线，虚线...]*/
    a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
    button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
    /* 全局设置完毕 *//* PR-CSS 布局设置 */
    body {text-align:center;background:#fff;}/*内容对齐方式为居中[IE居中方式],为了保证浏览器的兼容性，必须设置页面背景*/
    #center,#bottom {width:750px;text-align:left;clear:both;margin:0 auto;background:#fff;}/*设置总宽度，文本对齐方式改回默认left,清除周围浮动，左右自适应[FireFox居中方式]*/
    #center2 {float:left;background:#fff;}/*设置背景。设置浮动，使该元素在FireFox下获得高度从而显示背景*/
    #pr {width:748px;filter: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');border:solid #ddd 1px;margin:50px 0 0;}
    #pr div {height:200px;padding:10px;border:solid #fff 1px;}
    #bottom {margin:10px;text-align:center;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    var NowImg = 1;
    var bStart = 0;
    var bStop =0;function fnToggle() 
    {var imgs=document.getElementById("pr").getElementsByTagName("DIV"); // 获取img的个数
      var MaxImg=imgs.length;
    var next = NowImg+1; if(next == MaxImg+1) 
    {
    NowImg = MaxImg;
    next = 1;
    }
    alert(next); if(bStop!=1)
    { if(bStart == 0)
    {
    bStart = 1;
    setTimeout('fnToggle()', 4000);
    return;
    }
    else
    {
    pr.filters[0].Apply();
    document.getElementById("oDIV"+next).style.display = "";
    document.getElementById("oDIV"+NowImg).style.display = "none";  pr.filters[0].Play(duration=2); if(NowImg == MaxImg)
    NowImg = 1;
    else
    NowImg++;
    }
    setTimeout('fnToggle()', 4000);
    }
    }
    function toggleTo(img)
    {var ts=document.getElementById("pr").getElementsByTagName("DIV");//获取img的个数
    bStop=1;  // 这个的作用是停止自动轮显。如果去掉。会发生很有意思的现象。。想知道？自己试试嘛～
    for(i=1;i<ts.length+1;i++){
    if(img==i)
    {
    document.getElementById ("oDIV"+i).style.display = "";}
    else{document.getElementById ("oDIV"+i).style.display = "none";

    }}
    }
    -->
    </script>
    </head><body  onload="fnToggle()">
    <div id="center"><div id="center2"><div id="pr">
    <div id="oDIV1">111111</div>
    <div id="oDIV2" style="display:none;">222222</div>
    <div id="oDIV3" style="display:none;">333333</div>
    <div id="oDIV4" style="display:none;">444444</div>
    <div id="oDIV5" style="display:none;">555555</div>
    <div id="oDIV6" style="display:none;">666666</div>
    </div>
    </div></div>
    <div id="bottom">
    <a href="javascript:toggleTo(1)"><img src="images/06/s_1.gif" alt="第一页" /></a>
    <a href="javascript:toggleTo(2)"><img src="images/06/s_2.gif" alt="第二页" /></a>
    <a href="javascript:toggleTo(3)"><img src="images/06/s_3.gif" alt="第三页" /></a>
    <a href="javascript:toggleTo(4)"><img src="images/06/s_4.gif" alt="第四页" /></a>
    <a href="javascript:toggleTo(5)"><img src="images/06/s_5.gif" alt="第五页" /></a>
    <a href="javascript:toggleTo(6)"><img src="images/06/s_6.gif" alt="第六页" /></a>
    </div>
    </body>
    </html>
    这个是点击变换，你稍做修改就是你要的样子。
      

  4.   

    去这下吧，我从我的网页里截了一段，应该能满足你的要求，其实这个主要是CSS的定义
    http://gz.web35.net.cn/index.rar