分散對齊,iframe,漂亮的標籤頁

分散對齊:

 

<label style="width: 53px;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify">備註:</label>

 

iframe:

<iframe name="" src="about:blank" style="z-index:1; width:100%; height:100%;" marginheight="0" marginwidth="0" hspace="0" vspace="0" frameborder="0" scrolling="auto"></iframe>

 

標籤頁:

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<style type="text/css">
body, div, ul, li {
 margin:0;
 padding:0;
}
.tabs {
 background-color:#fad78d;
 height:28px;
 position:relative;
 border:1px solid #ffae00;
 padding:0 3px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
}
.tabs ul {
 position:absolute;
 height:29px;
 top:0px;
}
.tabs li {
 float:left;
 list-style-type:none;
 margin:0 3px 0 0;
}
.tabs li a, .tabs li a:hover {
 text-decoration:none;
 font-size:12px;
 font-weight:bold;
}
.tabs li a {
 background-color:#f6f6f6;
 color:#3f3f3f;
 border:1px solid #ffae00;
 height:23px;
 line-height:23px;
 padding:0 5px;
 margin-top:4px;
 display:block;
 float:left;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px;
 -webkit-border-top-right-radius:4px;
}
.tabs li a.selected, .tabs li a:focus {
 background:#fff;
 color:#e6820e;
 cursor:default;
 border-bottom-color:#fff;
}
.tabs li a:hover {
 background:#fff4d6 url(/images/bg_li_tabs_hover.gif) repeat-x 50% 50%;
 color:#3f3f3f;
 outline:none;
}
.tabs li a.selected:focus, .tabs li a.selected:hover {
 background:#fff;
 color:#e6820e;
}
</style>
</head>
<body style="margin:100px;">
<div class="tabs">
  <ul class="clearfix">
    <li><a href="#">菜單一</a></li>
    <li><a href="#" class="selected">菜單二</a></li>
    <li><a href="#">菜單三</a></li>
    <li><a href="#">菜單四</a></li>
    <li><a href="#">菜單五</a></li>
    <li><a href="#">菜單五</a></li>
    <li><a href="#">菜單五</a></li>
    <li><a href="#">菜單五</a></li>
    <li><a href="#">菜單五</a></li>
  </ul>
</div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章