測試文字功能,小工具,標題

記錄很重要,不然會浪費很多時間在找以前的記憶

一個人的氣度,決定他未來的高度。

2015年3月2日 星期一

HTML Table 使用記錄

HTML Table 使用記錄

//置頂
<td valign="top" border="8">

// table 包的格式
  <table >
            <tr>
                <td >                </td>
                <td >                </td>
            </tr>
            <tr>
                <td>                    </td>
                <td>                    </td>
            </tr>
        </table>

可做出垂直的線
style="border-right: thin solid #2C5F93;"
 
 
置中的css語法
 
   <style type="text/css">
       
/*
#center {
    position:absolute;top:50%; margin-top:0px; /* div高度的一半 *//*
}
       .style1
       {
           width: 100%;
    }
    */
      
 
/* 下面這組會有一個300 * 300 的 box空間,在放入table來做垂直的部份*/ 
 
body
{
    background-color:#EEE;
    }
    .BOX
    {width:300px;
     height:300px;
     /*border:1px solid #444;*/
     /*box-shadow:1px 5px 5px #666;*/
     
     position:absolute;
     left:50%;
     top:50%;
        margin-top:-150px;
        margin-left:-150px;
        }
       
       .style1
       {
           width: 100%;
       }
       
   </style> 
 
 
做一個垂直左右置中的login 
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Test_Default" %>

<!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 runat="server">
    <title></title>
   <style type="text/css">
       
/*
#center {
    position:absolute;top:50%; margin-top:0px; /* div高度的一半 *//*
}
       .style1
       {
           width: 100%;
    }
    */
      
       
body
{
    background-color:#EEE;
    }
    .BOX
    {width:200px;
     height:200px;
     /*border:1px solid #444;*/
     /*box-shadow:1px 5px 5px #666;*/
     
     position:absolute;
     left:50%;
     top:50%;
        margin-top:-100px;
        margin-left:-100px;
        }
       
       </style>
</head>
<body>
    <form id="form1" runat="server">
<%--<div id="center">
1<table class="style1">
        <tr>
            <td>
                1</td>
            <td>
                1</td>
        </tr>
        <tr>
            <td>
                1</td>
            <td>
                1</td>
        </tr>
    </table>
&nbsp;</div>--%>
<div class="BOX">

    <table width="200px" border="1px">
        <tr style="background-color:Silver">
            <td>登入系統</td>
        </tr>
        <tr>
            <td>
                帳號</td>
        </tr>
        <tr>
            <td >
                <asp:TextBox ID="TextBox1" runat="server" Width="200px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td >
                密碼</td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="TextBox2" runat="server" TextMode="Password" Width="200px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="Button1" runat="server" Text="登入" />
            </td>
        </tr>
    </table>

</div>
    </form>
</body>
</html>
 

沒有留言:

張貼留言