📄 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 + -