| « | November 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | | | | |
|
公告 |
| 暂无公告... |
| Blog信息 |
|
blog名称:
日志总数:16
评论数量:42
留言数量:1
访问次数:84929
建立时间:2007年5月10日 |
| |
|
 DIV + css 实践1
心得体会
kcruci 发表于 2007/7/12 17:20:56 |
|
<!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"><!-- DW6 --><head><!-- Copyright 2005 Macromedia, Inc. All rights reserved. --><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title>
<style type="text/css">
body{ font-family: Arial, sans-serif; color: #ECE9D8; line-height: 1.6; margin: 0px; padding: 0px;} #topMailList { FONT-SIZE: 93%; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal; background-color: #FFFFFF;}#topMailList UL { PADDING-RIGHT: 10px; PADDING-LEFT: 50px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none FLOAT: left; position: fixed; height: auto; width: auto;}
#topMailList LI { PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; height: 1.6px; width: 100px; color: #0000FF; z-index: auto;}
#topMailList INPUT{ FLOAT: left; }
#topMailList A { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; BACKGROUND: url(images/tableft.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none; position: inherit; width: 30%; white-space: nowrap; overflow: hidden;}
#topMailList li span A{ PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; height: 1.6px; width: 100px; color: #0000FF; z-index: auto;
}
/* 邮件条目 */
.mailItem { FONT-SIZE: 93%; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal; background-color: #FFFFFF;}.mailItem UL { PADDING-RIGHT: 10px; PADDING-LEFT: 50px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none FLOAT: left; position: fixed; height: auto; width: auto;}
.mailItem LI { PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; height: 1.6px; width: 100px; color: #0000FF; z-index: auto;}
.mailItem INPUT{ FLOAT: left; }
.mailItem A { PADDING-RIGHT: 0px; PADDING-LEFT: 4px; BACKGROUND: url(images/tableft.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none; position: inherit; width: 30%; white-space: nowrap; overflow: hidden;}/* 邮件列表 */#mailItems{ float: left; width: auto; height: 256px; overflow-y:scroll; margin: 0 2 0 0 ;}
#mailDetail{ float: left; width: 100%; height: 422px; overflow-y:scroll; color: #990000; font-family: "宋体"; margin: 2 0 0 0; text-align: left;}#right{ width:80%; float: left; height: auto; margin:0 auto; position:absolute; }
a{ color: #006699; text-decoration: none;}
a:link{ color: #006699; text-decoration: none;}
a:visited{ color: #006699; text-decoration: none;}
a:hover{ color: #FF0000; text-decoration: underline;}
h1{ font-family: Verdana,Arial,sans-serif; font-size: 120%; color: #334d55; margin: 0px; padding: 0px;}
h2{ font-family: Arial,sans-serif; font-size: 114%; color: #006699; margin: 0px; padding: 0px;}
h3{ font-family: Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px;}
h4{ font-family: Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px;}
h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px;}
ul{}
ul ul{ list-style-type: disc;}
ul ul ul{ list-style-type: none;}
label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55;}
/***********************************************//* Layout Divs *//***********************************************/
#masthead{ padding: 10px 0px 0px 0px; border-bottom: 1px solid #cccccc; width: 100%;}
#navBar{ float: left; width: 200px; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; bottom: 1px solid #cccccc; height: 80%;}
#headlines{ float:right; width: 20%; border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding-right: 10px;}
#content{ float: left; width: auto; height: 250px; overflow-y:scroll}
/***********************************************//* Components *//***********************************************/
#siteName{ margin: 0; padding: 0 0 0 10px; height: 10%;}
/************* #globalNav styles **************/
#globalNav{padding: 0px 0px 5px 10px;border-bottom: 1px solid #CCC;color: #cccccc;}
#globalNav img{ display: block;}
#globalNav a { font-size: 90%; padding: 0 4px 0 0;}
/*************** #pageName styles **************/
#pageName{ margin: 0px; padding: 0px 0px 0px 10px;}
/************* #breadCrumb styles *************/
#breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px;}
/************** .feature styles ***************/
.feature{ padding: 0px 0px 10px 10px; font-size: 80%; height: 100px;}
.feature h3{ padding: 30px 0px 5px 0px; text-align: center;}
.feature img{ float: left; padding: 10px 10px 0px 0px;}
/************** .story styles *****************/
.story{ clear: both; padding: 10px 0px 0px 10px; font-size: 80%;}
.story p{ padding: 0px 0px 10px 0px;}
/************* #siteInfo styles ***************/
#siteInfo{ clear: both; border: 1px solid #cccccc; font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; position:absolute; bottom:0; width: 100%;}
#siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle;}
/************* #search styles ***************/
#search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%;}
#search form{ margin: 0px; padding: 0px;}
#search label{ display: block; margin: 0px; padding: 0px;}
/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */html>body #navBar li {border-bottom: none;}
/*********** #sectionLinks styles ***********/
#sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #cccccc; font-size: 90%;}
#sectionLinks h3{ padding: 10px 0px 2px 10px;}
#sectionLinks a { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px;}
#sectionLinks a:hover{ background-color: #dddddd;}
/*********** .relatedLinks styles ***********/
.relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%;}
.relatedLinks h3{ padding: 10px 0px 2px 0px;}
.relatedLinks a:link,.relatedLinks a:visited { display: block; }
/************** #advert styles **************/
#advert{ padding: 30px 0px 10px;}
#advert img{ display: block;}
/************** #headlines styles **************/
#headlines{ margin: 0px; padding: 10px 0px 20px 10px; font-size: 80%;}
#headlines p{ padding: 5px 0px 5px 0px;}
.STYLE1 {font-size: xx-large}</style><script type="text/javascript">function _resize(){ var _h = Pia.isIE ? (document.body.clientHeight - 50) : ((document.body.clientHeight - 60)); if(_h > 0){ document.getElementById("container").style.height = _h; }}</script>
</head><body>
<div id="masthead"> <h1 class="STYLE1" id="siteName">Title tab </h1></div><div><div id="navBar"> <div id="search"> <form action="#"> <label>search</label> <input name="searchFor" type="text" size="10" /> <input name="goButton" type="submit" value="go" /> </form> </div> <div id="sectionLinks"> <h3>链接</h3> <ul> <li><a href="#"> Link1</a></li> <li><a href="#"> Link2</a></li> </ul> </div> <div class="relatedLinks"> <h3>Related Link Category</h3> <ul> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> </ul> </div> <div class="relatedLinks"> <h3>Related Link Category</h3> <ul> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> </ul> </div></div>
<!--end headlines --><div id="right">
<div id=mailItems> <div id=topMailList> <ul> <li> <input name="checkbox" type="checkbox" onclick="selectall(this.checked)" value="Check All" /> </li> <li> <a href="?page=1&sortby=from&ascent=true&folder=inbox">发件人</a></li> <li> <a href="?page=1&sortby=subject&ascent=true&folder=inbox">主题</a></li> <li> <img /></li> <li><span><a href="?page=1&sortby=date&ascent=true&folder=inbox">接收时间</a></span></li> <li><span><a href="?page=1&sortby=size&ascent=true&folder=inbox">大小</a></span></li> </ul> </div>
<div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /> </li> <li> 2007/07/06 15:14:25 </li> <li> 1.68 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /> </li> <li> 2007/07/06 15:14:25 </li> <li> 1.68 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /> </li> <li> 2007/07/06 15:14:25 </li> <li> 1.68 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /> </li> <li> 2007/07/06 15:14:25 </li> <li> 1.68 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');"> 用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /> </li> <li> 2007/07/06 15:14:25 </li> <li> 1.68 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.152" value="167abe78922a1c4768b79fb3b242a1e6.152" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.152" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.152');">H.Yuan <hyuan@scut.edu.cn></a></li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.152" title="j啦啦啦" target="content" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.152');" style="white-space: nowrap;overflow: hidden;">just for a look </a></li> <li> <img /> </li> <li>2007/07/04 11:21:31 </li> <li> 9.80 KB </li> </ul> </div> <div class=mailItem> <ul> <li> <input type="checkbox" name="uid" id="uid_167abe78922a1c4768b79fb3b242a1e6.153" value="167abe78922a1c4768b79fb3b242a1e6.153" /> </li> <li><a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" onclick="checkBoxSelect('167abe78922a1c4768b79fb3b242a1e6.153');">用户服务中心 <serv@scut.edu.cn> </a></li> <li> <a href="content.jsp?msgid=167abe78922a1c4768b79fb3b242a1e6.153" > 请及时更新病毒库！ </a></li> <li> <img /></li> <li> 2007/07/0615:14:25 </li> <li> 1.68 KB </li> </ul> </div> </div> <div id="mailDetail"> 2.空间定位
在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
这里利用了CSS定位的z-index属性，代码如下：
通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
下一章我将带您进入CSS滤镜的精彩世界。 2.空间定位
在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
这里利用了CSS定位的z-index属性，代码如下：
通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
下一章我将带您进入CSS滤镜的精彩世界。 2.空间定位
在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
这里利用了CSS定位的z-index属性，代码如下：
通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
下一章我将带您进入CSS滤镜的精彩世界。 2.空间定位
在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
这里利用了CSS定位的z-index属性，代码如下：
通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。
下一章我将带您进入CSS滤镜的精彩世界。 2.空间定位
在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。
这里利用了CSS定位的z-index属性，代码如下：
通过这两节的例子，我们可以看到CSS定位具有强大的功能，至于其他的一些定位属性，您可以自己尝试一下，很简单的。
利用好了CSS的定位功能，会使您的页面更加精致，更加富有动感。 </div> </div></div>
<!--end content --><div id="siteInfo"><img src="" width="44" height="22" /><a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | © sadadada </div><br /></body></html>
|
|
|