这是页面效果
第一次运用框架，还不是很熟练，总体效果有一些，由于时间有限，因此左边选择栏没有对右侧使用到浮动框架，浮动框架将在下一个博客介绍到。
本次共有五个HTML文件
首先是框架页面
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
position: relative;
background:#B2CBE4 ;
}
img{
position: absolute;
left: 20px;
top: 20px;
width:600px;
height: 115px;
}
nav{
position: absolute;
right: 60px;
top: 60px;
}
a{
font-size: 25px;
border-right: 2px solid #8DA1BE;
margin-right: 5px;
padding-right: 5px;
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div>
<img src="../img/timg4.PNG" alt="">
</div>
<nav>
<table>
<tr>
<td><a href="">免费注册</a></td>
<td><a href="">关于拍拍</a></td>
<td><a href="">拍拍助理</a></td>
<td><a href="" style="border-right: none;">联系我们</a></td>
</tr>
</table>
</nav>
</body>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/iconfont.css">
<style>
a{
text-decoration: none;
margin: 0;
color:#3c7497 ;
background-color:#FDFEFF;
}
.one{
background-color:#F89C48;
font-size: 25px;
margin-left: 0;
}
div{
margin-top: 20px;
font-size: 20px;
margin-left: 5px;
}
.iconfont{
color: red;
font-size:20px;
margin-right: 0;
padding-right: 0;
}
</style>
</head>
<body>
<div>
<div class="one">
商品分类（店中店除外）
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">图书频道</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">数码</a>
<span>/</span>
<a href="">IT</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">影像</a>
<a href="">视听</a>
<a href="">电脑</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">手机通讯</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">手机配件</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">化妆品</a>
<a href="">饰品</a>
<a href="">玩具</a>
<a href="">母婴</a>
<a href="">女装</a>
<a href="">运动</a>
</div>
<div>
<i class="iconfont icon-jiantou"></i>
<a href="">精品</a>
<a href="">箱包</a>
<a href="">鞋帽钟表</a>
<a href="">眼睛家居</a>
<a href="">家电</a>
<a href="">保健品</a>
<a href="">成人用品</a>
</div>
</div>
</body>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/iconfont.css">
<style>
body{
font-size: 20px;
}
header{
position: relative;
width: 100%;
height: 40px
}
.one{
position: absolute;
left: 20px;
top: 20px;
color: #48302F;
}
.two{
position: absolute;
left: 25px;
top: 20px;
color:rgb(179, 145, 140) ;
}
header a{
position: absolute;
left: 40px;
top: 10px;
text-decoration: none;
color: #B69543;
}
header span{
position: absolute;
left: 568px;
top: 13px;
color: #A8A08E;
}
article a{
text-decoration: none;
}
article div{
width: 30%;
float: left;
}
article .title a{
color: #7FA7BA;
font-weight: bold;
}
article a{
color:#3c7497 ;
background-color:#FDFEFF;
}
article .left{
margin-left:60px;
}
</style>
</head>
<body>
<header>
<i class="iconfont icon-jiantou one"></i>
<i class="iconfont icon-jiantou two"></i>
<a href="">最全的图书、最低的价格尽在拍拍网 点击进入图书频道首页</a>
<span>>></span>
</header>
<article>
<div class="left">
<p class="title"><a href="">幼儿启蒙</a></p>
<p>
<img src="../img/timg5.PNG" alt="" style="width: 137px;">
</p>
<p><a href="">米菲系列:超级经典</a></p>
<p><a href="">兔宝贝成长故事</a></p>
<p><a href="">我的感觉系列</a></p>
</div>
<div class="center">
<p class="title"><a href="">动漫绘本</a></p>
<p><img src="../img/timg6.PNG" alt=""></p>
<p><a href="">国际安徒生大奖绘本</a></p>
<p><a href="">蒲蒲兰系列绘本</a></p>
<p><a href="">天马行空：popo系列</a></p>
</div>
<div class="right">
<p class="title"><a href="">恐怖悬疑</a></p>
<p><img src="../img/timg7.PNG" alt=""> </p>
<p><a href="">超级成长版冒险</a></p>
<p><a href="">小虎队</a></p>
<p><a href="">恐怖系列</a></p>
<p><a href="">魂行道系类</a></p>
</div>
</article>
</body>
</html>
bottom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-color: #F0F0F0;
}
p{
text-align: center;
font-size: 21px;
margin-top: -9px;
line-height: 21px;
}
.top{
color: #383838;
}
.bottom{
color: #0B101D;
}
</style>
</head>
<body>
<p class="top">拍拍网网站运维中心 版权所有</p>
<p class="bottom">copyrightO 2010-2012,all rights reserved</p>
</body>
</html>