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