众所周知,网页设计经历了三个时期,table,table+css,div+css,现在主流的门户网站都是使用div+css。
同样,div+css能够是网页的代码简洁,并且对搜索引擎更加友好。
/*div是用于存放html元素,文字,图片,视频的元素*/
/*css是层叠样式表,用于去指定div中的内容的样式*/
下面来演示一个简单的div+css网页
首先是网页代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>div.html</title> <!-- 引入DIV --> <link href="/HTML/css/my.css" type="text/css" rel="stylesheet"> </head> <body> <div class="style1"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>
然后是css
/*div是用于存放html元素,文字,图片,视频的元素*/ /*css是层叠样式表,用于去指定div中的内容的样式*/ .style1{ width: 300px; height: 200px; border: 1px solid red; margin: 0px 0px 0px 20px; } .style1 table { width: 298px; height: 198px; border: 1px solid black; } .style1 table td{ border: 1px solid black; text-align: center; }
注意html要引入css这个文件,然后就完毕了,整体来说,代码确实更加简洁美观。确实很舒服。