html比较难记的点
网页布局:
table方式
<!DOCTYPE html> <html> <body> <table width="500" border="0"> //宽度500 边界为0 <tr> <td colspan="2" style="background-color:#99bbbb;"> //colspan 和并列 <h1>网页主标题</h1> </td> //列开头 </tr> //行开头 <tr valign="top"> //valign 垂直对齐 <td style="background-color:#ffff99;width:100px;text-align:top;"> //设置列样式 <b>菜单</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> 内容都在这里</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> //和并列 我是底部标签</td> </tr> </table> </body> //width 宽度 height 高度 align排列 top顶部 background背景 </html>
<!DOCTYPE html> <html> <head> //div标-可定义文档中的分区或节(division/section)。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。 如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。 签 <style type="text/css">//样式类型--> div#container{width:500px} //容器宽度 布局箱子宽度 float浮动--> div#header {background-color:#99bbbb;}//定义页眉属性 div#menu {background-color:#ffff99; height:200px; width:100px; float:left;} 定义菜单属 div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} 定义内容属性 div#footer {background-color:#99bbbb; clear:both; text-align:center;} //页脚 h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} //定义下边距 字号--> ul {margin:0;} //定义边缘--> li {list-style:none;}//列表式--> </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
理可顿悟,事须渐修。