?? sina.aspx
字號:
?<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sina.aspx.cs" Inherits="sina" %>
<!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" media="screen,print">
/* Layout rules */
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
/* Styling rules to make the example look nicer */
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
font:90%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
.equal {
margin:10px auto;
border-spacing:10px;
background:#898B60;
width:70%;
}
.row div {
background:#fff;
}
.row div.one {
width:40%;
}
.row div.two {
width:40%;
}
.row div.three {
vertical-align:middle;
}
.row div h2 {
margin:0 0 0.5em 0;
padding:0.5em 10px;
font-size:1.2em;
color:#fff;
background:#595B30;
}
.row div p {
font-size:0.94em;
margin:0.5em 0;
padding:0 10px;
}
#labfooter {
text-align:center;
}
</style>
</head>
<body>
<div class="equal">
<div class="row">
<div class="one">
<h2>This is a box</h2>
<p>這個容器含有較少的內容，但是他的高低卻能和較多內容的容器等高</p>
</div>
<div class="two">
<h2>This is another box</h2>
<p>這個盒子含有比另外一個更多的內容. 如果所有的容易都作為單元格顯示, 那么它的高度將是所有容易的高度. 它現在想表格一樣顯示, 但是他不是一個表格.</p>
<p>另外, display:table, display:table-row and display:table-cell 使的div顯示出像表格一樣的效果，可是糟糕的是他不能正常運行在你所熟悉的瀏覽器IE上,但是它卻可以順利運行于像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.這些瀏覽器上面</p>
<p>了解更多細節: <a href="http://www.jluvip.com/blog/article.asp?id=149">Equal height boxes with CSS</a>.</p>
</div>
<div class="three">
<p>這也是個含有較少內容的容器.而且內容是垂直居中顯示的</p>
</div>
</div>
</div>
<div id="labfooter">
<a href="http://www.jluvip.com">My blog</a> | 這個翻譯的頁面版權歸greengnn所有，轉載請注明出處
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -