Div+Css一个初体验例子

最新推荐文章于 2020-11-12 19:21:37 发布

最新推荐文章于 2020-11-12 19:21:37 发布 · 241 阅读

本文介绍了网页设计中div+css布局的基本概念及其优势，并通过一个简单实例展示了如何使用div+css进行网页布局，使代码更加简洁，易于搜索引擎抓取。

众所周知，网页设计经历了三个时期，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>  <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这个文件，然后就完毕了，整体来说，代码确实更加简洁美观。确实很舒服。