这是页面效果
第一次运用框架，还不是很熟练，总体效果有一些，由于时间有限，因此左边选择栏没有对右侧使用到浮动框架，浮动框架将在下一个博客介绍到。
本次共有五个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>