<!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>360网页练习</title>
<link href="360样式.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FAFAFA">
<!--上1文本框-->
<div class=" t1">
<table width="495" height="30" border="0" align="center" >
<tr>
<td id="b1">网页</td>
<td id="b1">图片</td>
<td id="b1">新闻</td>
<td id="b1">视频</td>
<td id="b1">音乐</td>
<td id="b1">微博</td>
<td id="b1">地图</td>
<td id="b1">问答</td>
<td id="b1">购物</td>
<td id="b1">机票</td>
<td id="b1">汽车</td>
</tr>
</table>
<!--上2文本框-->
<div class="t2">
<table width="866" border="0">
<tr>
<td width="180"> </td>
<td width="60" ><form ><select style="font-size:18px">
<option>360搜索</option>
<option>百度一下</option>
<option>搜狗搜索</option>
</select></form></td>
<td colspan="4">
<form><input type="text" style="width:500px; height:34px;"/></form></td>
<td><form><input style="font-size:20px;"type="submit" value="搜一下"/></form></td>
</tr>
</table>
</div>
</div>
<!--上3文本框-->
<div class="t3">
<table width="1066" height="30" >
<tr>
<td width="105">推荐网站</td>
<td width="105">新闻头条</td>
<td width="105">电视剧</td>
<td width="105">最新电影</td>
<td width="105">小游戏</td>
<td width="105">小说大全</td>
<td width="105">旅游度假</td>
<td width="105">网上购物</td>
<td width="105">好药推荐</td>
<td ><form><input type="button" value="声音"/></form></td>
<td ><form><select>
<option>看钢琴曲</option>
<option>录制钢琴曲</option>
<option>弹钢琴</option>
<option>钢琴攻略</option>
</select></form></td>
</tr>
</table>
<table width="1066" border="0" >
<tr align="center">
<td width="88"><a href="http://www.baidu.com">人民网</a></td>
<td width="88"><a href="http://www.baidu.com">新华网</a></td>
<td width="88"><a href="http://www.baidu.com">中国网</a></td>
<td width="88"><a href="http://www.baidu.com">国际在线网</a></td>
<td width="88"><a href="http://www.baidu.com">中国日报网</a></td>
<td width="88"><a href="http://www.baidu.com">央视网</a></td>
<td width="88"><a href="http://www.baidu.com">中国经济网</a></td>
<td width="88"><a href="http://www.baidu.com">光明网</a></td>
<td width="88"><a href="http://www.baidu.com">央光网</a></td>
<td width="88"><a href="http://www.baidu.com">求是网</a></td>
<td width="88"><a href="http://www.baidu.com">中国青年网</a></td>
<td width="88"><a href="http://www.baidu.com">网信网</a></td>
</tr>
</table>
</div>
<!--左侧1边框-->
<div class="l1">
</div>
<!--左侧2边框-->
<div class="l2">
</div>
<!--左侧3边框-->
<div class="l3">
</div>
<!--左侧4边框-->
<div class="l4">
</div>
<!--左侧5边框-->
<div class="l5">
</div>
<!--左侧6边框-->
<div class="l6">
</div>
<!--左侧7边框-->
<div class="l7">
</div>
<!--右侧1边框-->
<div class=" r1">
</div>
<!--右侧2边框-->
<div class="r2">
</div>
<!--右侧3边框-->
<div class="r3">
</div>
<!--右侧4边框-->
<div class="r4">
</div>
<!--右侧5边框-->
<div class="r5">
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
.t1/*上1框*/
{
border: 1px solid black;
width: 1066px;
height: 90px;
left: 150px;
top: 12px;
position: absolute;
background-color: #FFF
}
.t2
{
border:0px ;
width:1066px; height:50px;
left:150px; top:50px;
position:fixed;
z-index:2;
}
.t3
{
border:1px solid #666;
width:1066px; height:60px;
left:150px;top:110px;
position:absolute;
background-color:#FFF
}
.l1
{
border:1px solid #666;
width:216px; height:210px;
left:150px;top:180px;
position:absolute;
background-color:#FFF
}
.l2
{
border:1px solid #666;
width:216px; height:120px;
left:150px;top:400px;
position:absolute;
background-color:#FFF
}
.l3
{
border:1px solid #666;
width:216px; height:300px;
left:150px;top:530px;
position:absolute;
background-color:#FFF
}
.l4
{
border:1px solid #666;
width:216px; height:240px;
left:150px;top:830px;
position:absolute;
background-color:#FFF
}
.l5
{
border:1px solid #666;
width:216px; height:240px;
left:150px;top:1070px;
position:absolute;
background-color:#FFF
}
.l6
{
border:1px solid #666;
width:216px; height:240px;
left:150px;top:1310px;
position:absolute;
background-color:#FFF
}
.l7
{
border:1px solid #666;
width:216px; height:300px;
left:150px;top:1550px;
position:absolute;
background-color:#FFF
}
.r1
{
border:1px solid #666;
width:840px; height:270px;
left:376px;top:180px;
position:absolute;
background-color:#FFF
}
.r2
{
border:1px solid #666;
width:840px; height:210px;
left:376px;top:460px;
position:absolute;
background-color:#FFF
}
.r3
{
border:0px ;
width:840px; height:30px;
left:376px;top:680px;
position:absolute;
background-color:#FFF
}
.r4
{
border:1px solid #666;
width:840px; height:1050px;
left:376px;top:720px;
position:absolute;
background-color:#FFF
}
.r5
{
border:1px solid #666;
width:840px; height:60px;
left:376px;top:1780px;
position:absolute;
background-color:#FFF
}
/*上1标签样式*/
#b1:hover
{
cursor:pointer;
background-color:#0F6;
}
#b1:active
{
background-color:#03F;
}
/*图标链接样式*/
a:link
{
text-decoration:none;
color:black;
}
a:visited
{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:orange;
}
