jashliao Web System 切版+JS-[PHP程式的前置作業]

jashliao Web System 切版+JS-[PHP程式的前置作業]

jashliao Web System 切版+JS-[PHP程式的前置作業]

 

CS-menu.css

#nav{margin:10px;text-align:center;line-height:25px;width:200px;font-size:18px;}

li{

/*去除前面的黑點*/

        list-style:none;

}

#wrapper #nav li a{

        /*指定所有左側選單超連結顏色*/

        color: #0000FF;

}

.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;font-size:18px;}

.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;font-size:18px;}

.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;font-size:18px;}

 

screen.css

@charset “utf-8”;

/* CSS Document */

<style type=”text/css”>

p ,h1,h2,h3,h4,h5,h6,ol,ul,li,table,th,td,tr{

        margin: 0px;

        padding: 0px;

}

 

body {

        font-family: “新細明體”, “Times New Roman”;

        font-size: 100%;

        margin: 0px;

        padding: 0px;

        /*background-image: url(../images/template_img/bg.png);*//*背景圖*/

        /*background-repeat: repeat;*//*背景小圖重複填滿*/

        background-color: #FFFFFF;/*背景顏色*/

}

p ,h1,h2,h3,h4,h5,h6,ul,ol,li,table,tr,td,th{

        margin: 0px;

        padding: 0px;

}

 

#wrapper {

        /*設定整個網頁的寬度,如果畫面比網頁寬度大就置中*/

        width: 1720px;/*1000px*/

        margin-right: auto;

        margin-left: auto;

}

#wrapper #header {

        /*設定天的 ICON和畫面大小*/

        background-image: url(../images/base/head_logo.png);

        background-repeat: no-repeat;/*背景小圖不重複填滿*/

        height: 100px;

        width: 1620px;/*900px*/

}

#wrapper #navigation table {

        width: 1620px;/*900px*/

}

#wrapper #navigation {

        background-image: url(../images/template_img/template_02.jpg);

        background-repeat: no-repeat;

        margin-top:10px;/*導航列距離天的距離*/

        height: 30px;

        width: 1720px;/*1000px*//*導航列寬度*/

        margin: 0px;

}

#wrapper #content {

        margin-top:10px;/*主體距離導航列的距離*/

        width: 1720px;/*1000px*/

}

#wrapper #header #icon_table tr td p a {

        font-family: “新細明體”, “Times New Roman”;

        font-size: 0.8em;

        color: #000000;

        text-decoration: none;

}

#wrapper #header #icon_table {

        float: right;

        margin-right: 120px;

}

#wrapper #header #icon_table tr td a img {

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

}

#wrapper #navigation table tr td p {

        /*設定 「歡迎使用jash進銷存」的字型相關*/

        font-family: “新細明體”, “Times New Roman”;

        font-size: 1.2em;

        text-align: center;

        color: #0000FF;

}

#wrapper #navigation table tr td a {

        /*設定 導航功能-超連結*/

        font-family: “新細明體”, “Times New Roman”;

        font-size: 1.3em;

        text-align: center;

        color: #0000FF;

        /*畫出虛線外框*/

        border-top-width: 1px;

        border-right-width: 1px;

        border-bottom-width: 1px;

        border-left-width: 1px;

        border-right-style: dotted;

        border-top-style: dotted;

        border-bottom-style: dotted;

        border-left-style: dotted;

        border-top-color: #000000;

        border-right-color: #000000;

        border-bottom-color: #000000;

        border-left-color: #000000;   

}

#wrapper #navigation table tr td a img {

        border-top-style: none;

        border-right-style: none;

        border-bottom-style: none;

        border-left-style: none;

}

#wrapper #navigation table tr td p a {

        text-decoration: none;

        color: #FFF;

}

#wrapper #content #left {

        background-color: #FFF;

        width: 225px;/*身體左邊選單寬度*/

        float: left;       

}

#wrapper #content #left #if1 {

        /*frameborder=”0″ width=”225px” height=”600px”*/

        border:none;

        height: 600px;

}

#wrapper #content #right  #if2 {

        border:none;

        width: 1305px;/*700px*/ /*從這裡來的 [#wrapper #content #right]*/

        height: 1024px

}

#wrapper #content #right {

        background-image: url(../images/template_img/template_04.jpg);

        background-repeat: repeat-y;

        float: left;

        width: 1350px;/*745px*/ /*身體右邊內容寬度*/

        height: 1024px;/*身體高度定義*/

       

        /*畫出虛線外框*/

        border-top-width: 1px;

        border-right-width: 1px;

        border-bottom-width: 1px;

        border-left-width: 1px;

        border-right-style: dotted;

        border-top-style: dotted;

        border-bottom-style: dotted;

        border-left-style: dotted;

        border-top-color: #000000;

        border-right-color: #000000;

        border-bottom-color: #000000;

        border-left-color: #000000;           

}

#wrapper #footer {

        background-image: url(../images/template_img/template_05.jpg);

        background-repeat: no-repeat;

        height: 30px;

        width: 1000px;/*地的寬度*/

        float: left;

        margin: 0px;

        padding: 0px;

}

</style>

 

index.html

<html>

        <head>

                <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

                <!– InstanceBeginEditable name=”doctitle” –>

                <title>jash 進銷存-首頁</title>

                <!– InstanceEndEditable –>

                <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <link href=”css/menu.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <!–left menu start–>

                <script language = JavaScript>

                function showmenu(id) {

                        var list = document.getElementById(“list”+id);

                        var menu = document.getElementById(“menu”+id)

                        if (list.style.display==”none”) {

                                document.getElementById(“list”+id).style.display=”block”;

                                menu.className = “title1”;

                        }else {

                                document.getElementById(“list”+id).style.display=”none”;

                                menu.className = “title”;

                        }

                }

                function ShowMenu() {

                        showmenu(1);

                }

                function ChangeMenu(v1){

                        switch(v1)

                        {

                                case 1:

                                        if1.location=”left-menu01.html”;

                                        break;

                                case 2:

                                        if1.location=”left-menu02.html”;

                                        break;                                     

                        }

                }

                function ChangeMain(v1,v2){

                        var url;

                        switch(v1)

                        {

                                case 1:

                                        url=”main01.html?”+v2;

                                        break;

                                case 2:

                                        url=”main02.html?”+v2;

                                        break;                                     

                        }

                        if2.location=url;

                }              

                </script>

                <!–left menu end–>

        </head>

        <body>

       

                <div id=”wrapper”><!–ALL start–>

                        <div id=”header”>

                          <table width=”230″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”icon_table”>

                                <tr>

                                        <td>

                                                <a href=”index.php”><img src=”images/base/icon_home.png” width=”70″ height=”70″ alt=”回到首頁” title=”回到首頁”/></a>

                                        </td>

                                        <td>

                                                <a href=”./login.php?action=logout”><img src=”images/base/icon_logout.png” width=”70″ height=”70″ alt=”管理者登出” title=”管理者登出”/></a>

                                        </td>

                                </tr>

                          </table>

                        </div><!–header end–>

                       

                        <div id=”navigation”>

                                <table border=”0″ cellspacing=”0″ cellpadding=”0″>

                                        <tr>

                                                <td width=”225″>

                                                        <p>歡迎 OOXX 登錄中</p>

                                                </td>

                                                <td>

                                                        <a href=”javascript:ChangeMenu(1)”>系統人員管理</a>

                                                </td>

                                                <td>

                                                        <a href=”javascript:ChangeMenu(2)”>廠商與貨物管理</a>

                                                </td>

                                                <td>

                                                        <a href=”clientele_index.php”>客戶管理</a>

                                                </td>                                              

                                                <td>

                                                        <a href=”products_index.php”>產品管理</a>

                                                </td>

                                                <td>

                                                        <a href=”buy_index.php”>進/退貨管理</a>

                                                </td>

                                                <td>

                                                        <a href=”sales_index.php”>出貨管理</a>

                                                </td>

                                                <td>

                                                        <a href=”accounts_index.php”>每月結算</a>

                                                </td>

                                        </tr>

                                </table>

                        </div><!–navigation–>

                       

                        <div id=”content”>

                       

                                <div id=”left”>

                                        <iframe id=”if1″ name=”if1″ src=”left-menu00.html”></iframe>

                                </div><!–content_left end–>

                               

                                <div id=”right” align = “center”><!– 在CSS中有指定高度,所以有透個這個高度值確定身體的長度–>

                                        <iframe id=”if2″ name=”if2″ src=”right-main00.html” align=”center”></iframe>

                                </div><!–content_right end–>

                               

                        </div><!–content end–>

                       

                        <div id=”footer”><!– 在CSS中有指定高度–>

                                <table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footer_text”>

                                        <tr>

                                                <td width=”552″>

                                                        <p>│<a href=”aboutus.html”>關於 jash 進銷存</a>│<a href=”webindex.html”>網站地圖</a>│<a href=”privacy.html”>隱私權保護</a>│客服專線:0800-888-999</p>

                                                </td>

                                                <td width=”348″>

                                                        <h5>COPYRIGHT &copy; FOL. ALL RIGHTS RESERVED</h5>

                                                </td>

                                        </tr>

                                </table>

                        </div><!–footer end–>

                       

                </div><!–ALL end–>              

       

        </body>

       

</html>

 

left-menu00.html

<html>

        <head>

                <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

                <!– InstanceBeginEditable name=”doctitle” –>

                <title>left-menu</title>

                <!– InstanceEndEditable –>

                <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <link href=”css/menu.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <!–left menu start–>

                <script language = JavaScript>

                function showmenu(id) {

                        var list = document.getElementById(“list”+id);

                        var menu = document.getElementById(“menu”+id)

                        if (list.style.display==”none”) {

                                document.getElementById(“list”+id).style.display=”block”;

                                menu.className = “title1”;

                        }else {

                                document.getElementById(“list”+id).style.display=”none”;

                                menu.className = “title”;

                        }

                }

                function ShowMenu() {

                        showmenu(1);

                }

                </script>

                <!–left menu end–>

        </head>

        <body onload=”ShowMenu();”>             

                <table border=”0″ cellspacing=”0″ cellpadding=”0″><!–利用table width指定整體表個寬度–>

                        <tr>

                                <td>

                                        <div id=”nav”>        

                                                <div class=”title” id=”menu1″ onclick=”showmenu(‘1’) “>首頁功能選單</div>

                                                        <div id=”list1″ class=”content” style=”display:none”>

                                                                 <ul>

                                                                        <li><a href=”user_index.php”>系統人員管理</a></li>

                                                                        <li><a href=”manufacturer-goods_index.php”>廠商與貨物管理</a></li>

                                                                        <li><a href=”clientele_index.php”>客戶管理</a></li>

                                                                        <li><a href=”products_index.php”>產品管理</a></li>

                                                                        <li><a href=”buy_index.php”>進/退貨管理</a></li>

                                                                        <li><a href=”sales_index.php”>出貨管理</a></li>

                                                                        <li><a href=”accounts_index.php”>每月結算</a></li>

                                                                 </ul>

                                                        </div>     

                                        </div>

                                </td>

                        </tr>

                </table>

        </body>

</html>          

 

left-menu01.html

<html>

        <head>

                <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

                <!– InstanceBeginEditable name=”doctitle” –>

                <title>left-menu</title>

                <!– InstanceEndEditable –>

                <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <link href=”css/menu.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <!–left menu start–>

                <script language = JavaScript>

                function showmenu(id) {

                        var list = document.getElementById(“list”+id);

                        var menu = document.getElementById(“menu”+id)

                        if (list.style.display==”none”) {

                                document.getElementById(“list”+id).style.display=”block”;

                                menu.className = “title1”;

                        }else {

                                document.getElementById(“list”+id).style.display=”none”;

                                menu.className = “title”;

                        }

                }

                function ShowMenu() {

                        showmenu(1);

                }

                function Callparent(v2)

                {

                        if(window.parent.document){ //判斷母視窗是否存在

                                window.parent.ChangeMain(1,v2)();

                        }

                }

                </script>

                <!–left menu end–>

        </head>

        <body onload=”ShowMenu();”>             

                <table border=”0″ cellspacing=”0″ cellpadding=”0″><!–利用table width指定整體表個寬度–>

                        <tr>

                                <td>

                                        <div id=”nav”>        

                                                <div class=”title” id=”menu1″ onclick=”showmenu(‘1’)”>X0001</div>

                                                        <div id=”list1″ class=”content” style=”display:none”>

                                                                 <ul>

                                                                        <li><a href=”javascript:Callparent(‘a=10’);”>0001</a></li>

                                                                        <li><a href=”manufacturer-goods_index.php”>0002</a></li>

                                                                        <li><a href=”clientele_index.php”>0003</a></li>

                                                                        <li><a href=”products_index.php”>0004</a></li>

                                                                        <li><a href=”buy_index.php”>0005</a></li>

                                                                        <li><a href=”sales_index.php”>0006</a></li>

                                                                        <li><a href=”accounts_index.php”>0007</a></li>

                                                                 </ul>

                                                        </div>     

                                        </div>

                                </td>

                        </tr>

                </table>

        </body>

</html>          

 

left-menu02.html

<html>

        <head>

                <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

                <!– InstanceBeginEditable name=”doctitle” –>

                <title>left-menu</title>

                <!– InstanceEndEditable –>

                <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <link href=”css/menu.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <!–left menu start–>

                <script language = JavaScript>

                function showmenu(id) {

                        var list = document.getElementById(“list”+id);

                        var menu = document.getElementById(“menu”+id)

                        if (list.style.display==”none”) {

                                document.getElementById(“list”+id).style.display=”block”;

                                menu.className = “title1”;

                        }else {

                                document.getElementById(“list”+id).style.display=”none”;

                                menu.className = “title”;

                        }

                }

                function ShowMenu() {

                        showmenu(1);

                }

                function Callparent(v2)

                {

                        if(window.parent.document){ //判斷母視窗是否存在

                                window.parent.ChangeMain(2,v2)();

                        }

                }              

                </script>

                <!–left menu end–>

        </head>

        <body onload=”ShowMenu();”>             

                <table border=”0″ cellspacing=”0″ cellpadding=”0″><!–利用table width指定整體表個寬度–>

                        <tr>

                                <td>

                                        <div id=”nav”>        

                                                <div class=”title” id=”menu1″ onclick=”showmenu(‘1’)”>Y0001</div>

                                                        <div id=”list1″ class=”content” style=”display:none”>

                                                                 <ul>

                                                                        <li><a href=”javascript:Callparent(‘b=20’);”>0001</a></li>

                                                                        <li><a href=”manufacturer-goods_index.php”>0002</a></li>

                                                                        <li><a href=”clientele_index.php”>0003</a></li>

                                                                        <li><a href=”products_index.php”>0004</a></li>

                                                                        <li><a href=”buy_index.php”>0005</a></li>

                                                                        <li><a href=”sales_index.php”>0006</a></li>

                                                                        <li><a href=”accounts_index.php”>0007</a></li>

                                                                 </ul>

                                                        </div>     

                                        </div>

                                </td>

                        </tr>

                </table>

        </body>

</html>          

 

right-main00.html

<html>

        <head>

                <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

                <!– InstanceBeginEditable name=”doctitle” –>

                <title>left-menu</title>

                <!– InstanceEndEditable –>

                <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />

                <link href=”css/menu.css” rel=”stylesheet” type=”text/css” media=”screen” />

               

                <!– InstanceBeginEditable name=”head” –>

                <style type=”text/css”>

                #news_form table tr td h3 {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 1em;

                        color: #000000;

                        text-align: center;

                        margin-top: 5px;

                        margin-bottom: 5px;

                }

                #news_form table tr td h4 {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 0.9em;

                        color: #670167;

                        text-align: center;

                        margin-top: 5px;

                        margin-bottom: 5px;

                }

                #news_form #news_table {

                        border-top-width: 1px;

                        border-top-style: dotted;

                        border-top-color: #000000;

                        border-right-width: 1px;

                        border-right-style: dotted;

                        border-right-color: #000000;

                }

                #news_form #news_table tr td {

                        border-bottom-width: 1px;

                        border-left-width: 1px;

                        border-bottom-style: dotted;

                        border-left-style: dotted;

                        border-bottom-color: #000000;

                        border-left-color: #000000;

                }

                #news_form #news_table tr td h5 {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 0.9em;

                        color: #A336A3;

                        margin-top: 5px;

                        margin-bottom: 5px;

                        margin-left: 5px;

                }

                .totalnum {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 0.8em;

                        color: #000000;

                        float: right;

                }

                #newslist_tab {

                        margin-right: auto;

                        margin-left: auto;

                        margin-top: 20px;

                        margin-bottom: 20px;

                        border-top-width: 1px;

                        border-right-width: 1px;

                        border-bottom-width: 1px;

                        border-left-width: 1px;

                        border-top-style: dotted;

                        border-right-style: dotted;

                        border-top-color: #000000;

                        border-right-color: #000000;

                        border-bottom-color: #000000;

                        border-left-color: #000000;

                }

                #newslist_tab tr td {

                        border-top-width: 1px;

                        border-right-width: 1px;

                        border-bottom-width: 1px;

                        border-left-width: 1px;

                        border-bottom-style: dotted;

                        border-left-style: dotted;

                        border-top-color: #000000;

                        border-right-color: #000000;

                        border-bottom-color: #000000;

                        border-left-color: #000000;

                }

                #newslist_tab tr td h3 {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 1.1em;

                        text-align: center;

                        margin: 10px;

                        color: #000000;

                }

                #newslist_tab tr td h4 {

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 1.1em;

                        text-align: center;

                        margin: 5px;

                        color: #000000;

                }

                #newslist_tab tr td p {

                        /*功能說明*/

                        font-family: “新細明體”, “Times New Roman”;

                        font-size: 1.1em;

                        color: #000000;

                        text-align: left;

                        margin-top: 5px;

                        margin-bottom: 5px;

                        margin-left: 5px;

                }

                .iconsimg {

                        margin-right: auto;

                        margin-left: auto;

                        margin-top: 2px;

                        margin-bottom: 2px;

                        border-top-style: none;

                        border-right-style: none;

                        border-bottom-style: none;

                        border-left-style: none;

                        text-align: center;

                }

                #newslist_form {

                        width: 600px;

                        margin-top: 20px;

                        margin-right: auto;

                        margin-bottom: 20px;

                        margin-left: auto;

                }

                </style>

                <!– InstanceEndEditable –>

        </head>

        <body>

                <table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”newslist_tab” width=”1305px”;><!–width=”1305px”就是工作區的最大限度從[ #wrapper #content #right  #if2 ]這裡來的 –>

                        <tr>

                                <td colspan=”3″>

                                        <h3>功能說明:</h3>

                                </td>

                        </tr>

                        <tr>

                                <td width=”157″>

                                        <h4>選單項目:</h4>

                                </td>

                                <td width=”440″>

                                        <h4>說明:</h4>

                                </td>

                        </tr>    

                        <tr>

                                <td>

                                        <p>系統人員管理</p>

                                </td>

                                <td>

                                        <p>可登錄系統的帳號所有相關功能(新增、修改、查詢)</p>

                                </td>

                        </tr>

                        <tr>

                                <td>

                                        <p>廠商與貨物管理</p>

                                </td>

                                <td>

                                        <p>廠商與貨物資料相關功能(新增、修改、查詢、刪除)</p>

                                </td>

                        </tr>

                        <tr>

                                <td>

                                        <p>客戶管理</p>

                                </td>

                                <td>

                                        <p>客戶資料相關功能(新增、修改、查詢、刪除)</p>

                                </td>

                        </tr>

                        <tr>

                                <td>

                                        <p>產品管理</p>

                                </td>

                                <td>

                                        <p>產品資料相關功能(新增、修改、查詢、刪除)</p>

                                </td>

                        </tr>                                               

                        <tr>

                                <td>

                                        <p>進/退貨管理</p>

                                </td>

                                <td>

                                        <p>進貨資料相關功能(新增、修改、查詢、刪除)</p>

                                </td>

                        </tr>               

                        <tr>

                                <td>

                                        <p>出貨管理</p>

                                </td>

                                <td>

                                        <p>出貨資料相關功能(新增、修改、查詢、刪除)</p>

                                </td>

                        </tr>

                        <tr>

                                <td>

                                        <p>每月結算</p>

                                </td>

                                <td>

                                        <p>每月結算相關計算</p>

                                </td>

                        </tr>                                                               

                </table> 

        </body>

</html>  

 

 

 

 

 

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *