table+css布局之法 首次学习之路

从今年的5月份,就开始试着在typecho中做的主题,边做边学习,截止现在已经做了两套主题,都是div+css写的,后期转换为PHP代码,就可以用了。

不过,我代码的技术很烂的,因此,很多地方的兼容没有调试好,因此,今天用table+div+css写了一个网页,还算比较顺手,回家我在转换为PHP网页,传到网站看看效果。

这样写的好处是,框架是死的,适合多种浏览器不变形,适合新手,同时也适合比较懒的老手啦。

table源码:

<table>  
  <tr>
    <td>
     <h1>Web Sites</h1>
     <h3>text/h3>
    </td>
  </tr>
</table>

div源码:

<div>tect</div>

table+div范本:

<div id="wrap">
<table>  
  <tr>
    <td>
     <h1>Web Sites</h1>
     <h3>text/h3>
    </td>
  </tr>
</table>
</div>

这就是传说中的table布局样式。

完整的静态网页布局如下:

<!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>techblog v2.0</title>
<style type="text/css">
body {
    margin-left: 0px;
    margin-top:0px;
    margin-right: 0px;
}
#wrap { width:100%; height:100%; background-color:#F8FEF9;}



/*导航部分*/
li { list-style:none; display:inline; padding:5px; font-size:22px; font-family:楷体;}
#zuitop { background-color:#D7F9DA; width:100%;}
#nav a { color:#000; text-decoration:none}
#nav a:hover { color:#fff; background-color:#060;}
/*导航部分*/


/*网站正文与侧栏*/
#main_rignt { }

#main_left  { }
#main_left li { list-style:none; background-color:#BBF0E6; color:#000; display:list-item; margin:0px 10px 10px 10px;}

/*网站正文与侧栏*/

/*网站底部*/
#footer { background-color:#000; width:100%; color:#fff;}
#footer_l  a { color:#fff;}
#footer_l  a:hover { background-color:#030; color:#fff;}
#footer_r  a { color:#fff;}
#footer_r a:hover { background-color:#999; color:#000;}
/*网站底部*/



</style>
</head>

<body>
<div id="wrap">

<!--导航部分 -->
<div id="zuitop">
<table width="1000px" height="80px" border="0" align="center" cellpadding="0" cellspacing="0">
  
  <tr>
    <td width="70%">
      <div id="nav">
     
         <li><a>首页</a></li>
         <li><a>首页</a></li>

      </div>  
    </td>
    <td width="30%">
   
       
       <input name="选择" type="text" value="搜索一下" size="20"/><input name="提交" type="button" id="提交" value="按一下" />
     
    </td>
  </tr>
  
</table>
</div>
<!--导航部分 -->

<!--网站标题 -->
<table width="1000px" height="88px" border="0" align="center" cellpadding="0" cellspacing="0" style="line-height:15px;">
  
  <tr>
    <td>
     <h1>Web Sites</h1>
     <h3>Sites DescribeSites</h3>
    </td>
  </tr>
  
</table>

<!--网站标题 -->

<!--网站正文与侧栏 -->

<table width="1000px" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  
  <tr>
    <td width="70%">
      <div id="main_rignt">
         <h3>Post</h3>
         <h4>XXXXXXXX</h4>

         <h3>Post</h3>
         <h4>XXXXXXXX</h4>
            
         
      </div>
 
 
 
    </td>
    <td width="30%" >
      <div id="main_left">
 
        <li>块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块块</li>



 
      
      </div>
     
    </td>
  </tr>
  
</table>

<!--网站正文与侧栏 -->


<!--网站底部 -->
<div id="footer">
<table width="1000px" height="88px" border="0" align="center" cellpadding="0" cellspacing="0" style="line-height:8px;">
  
  <tr>
    <td width="60%" >
     <div id="footer_l">

     </div>
    </td>
    
    <td width="40%" >
     <div id="footer_r">
     百度统计
     <a>AAA</a> <a>AAA</a> <a>AAA</a> <a>AAA</a>
     
     </div>
    </td>    
  </tr>
  
</table>
</div>
<!--网站底部 -->



</div>
</body>
</html>

总结下吧。

等我回家测试去!!!

Comments
Write a Comment