几个网页练习
苹果官网简单的框架
<!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>Apple</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#aa
{width:%100px; height:30px;
background-color:#333;
position:relative;
}
#bb
{width:%100px; height:30px;
background-color:#666;
position:relative;
z-index:2;
}
#cc:hover
{text-decoration:underline;
color:#FFF;
transition:0.8s;
}
#dd
{width:280px;
height:150px;
border:1px solid black;
position:relative;
float:left;
margin:24px;
}
</style>
</head>
<body>
<div id="aa" >
<table width="1365" height="30" cellpadding="0" cellspacing="0" border="0" style="text-align:center;" >
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><font color="#666" face="Verdana, Geneva, sans-serif" size="-1" ><广告></font></td>
<td> </td>
</tr>
</table>
<div style="width:100%; height:730px; top:30px; border:1px solid #000;">
<div id="bb">
<table width="1365" height="30" cellpadding="0" cellspacing="0" border="0" style="text-align:center;" >
<tr>
<td> </td>
<td id="cc"><font size="-1">苹果</font></td>
<td id="cc"><font size="-1">Mac</font></td>
<td id="cc"><font size="-1">iPad</font></td>
<td id="cc"><font size="-1">iPhone</font></td>
<td id="cc"><font size="-1">Wath</font></td>
<td id="cc"><font size="-1">Music</font></td>
<td id="cc"><font size="-1">技术支持</font></td>
<td id="cc">8</td>
<td id="cc">9</td>
<td> </td>
</tr>
</table>
</div>
</div>
<div style="width:%100px; height:150px; top:270; border:1px sold #000"
<div id="dd"></div>
<div id="dd"></div>
<div id="dd"></div>
<div id="dd"></div>
</div>
</body>
</html>
360 浏览器
<!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>无标题文档</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.a1
{
width:1000px; height:80px; margin:auto; top:10px; position:relative; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a2
{
width: 150px; height: 60px; position: absolute; top: 11px; left: 20px; z-index: 2 border:1px solid #666; box-shadow:1px 1px 1px #666;}
.a3
{
width:110px; height:40px; background-color:#FFF; border: 1px solid #666; line-height:40px; text-align:center; position:relative; top:0px; right:0px; float:right;}
.a4
{
width:250px; height:248px; border:1px solid #666; box-shadow:1px 1px 1px #666; position:relative; top:40px; left:0px; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a5
{
width:331px; height:200px; position:relative; float:left; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a6
{
width: 740px; position: absolute; right: 0px; border:1px solid #666; box-shadow:1px 1px 1px #666;}
</style>
</head>
<body>
<center><font color="#9900" face="Courier New, Courier, monospace" size="+5" ><i>360</i></font><font color="#330000" face="Arial, Helvetica, sans-serif" size="+1">导航</font><br></center>
<center><font size="+1" face="Verdana, Geneva, sans-serif">360搜索</font><input value="" /><font color="#333333" face="Verdana, Geneva, sans-serif" size="+1">搜一下</font></center>
<hr />
<div style="width:1000px; height:2010px; position:relative; margin:auto;">
<div class="a1">
<div class="a2" style="width:200px;"></div>
<div class="a2" style="left: 275px;"></div>
<div class="a2" style="left: 459px;"></div>
<div class="a2" style="left: 642px;"></div>
<div class="a2" style="left: 821px;"></div>
</div>
<div style="width:1000px; height:130px; margin:auto; top:20px; position:relative; border:1px solid #666; box-shadow:1px 1px 1px #666;">
</div>
<div class="a1" style="top:30px;">
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
<div class="a3"></div>
</div>
<div class="a4">
<table width="250" height="250" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</table>
</div>
<div class="a4" style="height:150px; top:50px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a6" style="height: 214px; top: 336px;">
</div>
<div class="a6" style="height: 50px; top: 560px;">
</div>
<div class="a6" style="height: 200px; top: 620px;">
</div>
<div class="a6" style="height: 200px; top: 853px;">
</div>
<div class="a6" style="height: 200px; top: 1053px;">
</div>
<div class="a6" style="height: 200px; top: 1253px;">
</div>
<div class="a6" style="height: 450px; top: 1453px;">
</div>
<div class="a6" style="height: 93px; top: 1913px;">
</div>
</div>
<div style="width:1000px; height:200px; position:relative; top:10px; margin:auto;">
<div class="a5"></div>
<div class="a5"></div>
<div class="a5"></div>
</div>
</body>
