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 © 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> |