现在的位置: 首页 > 综合 > 正文

一个高度自适应的网页的例子

2013年03月22日 ⁄ 综合 ⁄ 共 3515字 ⁄ 字号 评论关闭
<!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=gb2312" /><style type="text/css">html,body{margin:0px; padding:0px; text-align:center; font-size:12px;}html,body div{margin-left:auto; margin-right:auto; border:0px;}html,body div img{border:0px;}html,body ul{margin:0px; padding:0px;} #friendListTit{ width: 344px; height: 39px; background-image: url(images/message_share_title.gif); }#content{width:344px; overflow:auto; text-align:left; border:1px solid #CCC;background-color: #f3f6fd;}#clear{ float:left;width:344px; height:1px; clear:both;background-color: #f3f6fd;}#content ul{ float:left; list-style:none;} #content ul li {float:left; height:2.5em; line-height:2.5em; display:block; display:inline;background-color: #f3f6fd; border-bottom:1px solid White;} .widthL{width:39px; text-align:center; border-right:1px solid White;} .widthS{width:304px; } #messBut_D{ width: 344px; height: 25px; line-height: 25px; border-bottom: 1px solid Gray; border-left: 1px solid Gray; border-right: 1px solid Gray; background-color: #ececec; padding-top: 1px; } #messBut_D ul li{ float: left; height: 25px; line-height: 25px; display: block; display: inline; } #uploadButt,#closeButt{ width: 78px; height: 22px; line-height: 22px; border: none; } .leftBut{ width: 130px; } .rightBut{ width: 214px; text-align: left; } .nor_DelButton{ background: url(images/del_message_button_bg.gif)  no-repeat; background-position: -1px -1px; color: Black; } .hover_DelButton{ background: url(images/del_message_button_bg.gif)  no-repeat; background-position: -1px -24px; color: White; } </style><title>message-shareList</title></head> <body><div id="friendListTit"></div><div id="content"> <ul >    <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    </li>    <li class="widthS">短信共享测试</li>    </ul>    <ul>    <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" /></li>    <li class="widthS">短信共享测试</li>    </ul>  <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>  </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul>    <ul>     <li class="widthL"><input type="checkbox" name="checkbox" id="checkbox" />    <li class="widthS">短信共享测试</li>    </ul> <div id="clear"></div></div><div id="messBut_D"><ul><li class="leftBut">  <input type="checkbox" name="checkbox2" id="checkbox2" />  全选</li><li class="rightBut" >    <input type="button" id="uploadButt" name="uploadButt"  value="上传" class="nor_DelButton" onmouseover="this.className='hover_DelButton'" onmouseout="this.className='nor_DelButton'" />  <input type="button" id="closeButt" name="closeButt"  value="关闭" class="nor_DelButton" onmouseover="this.className='hover_DelButton'" onmouseout="this.className='nor_DelButton'" /></li></ul></div></body></html>

抱歉!评论已关闭.