zoukankan      html  css  js  c++  java
  • DIV+CSS实现FRAMESET效果

    一、Main.htm页面代码及其样式代码:

    1.Main.htm页面代码
    2.frame.css样式代码
    #framecontentTop
    {
    position
    : absolute;
    top
    : 0;
    left
    : 0;
    height
    : 100px;
    width
    : 100%;
    overflow
    : hidden;
    vertical-align
    : middle;
    background-color
    : #D2E6FA;
    }

    #framecontentLeft
    {
    position
    : fixed;
    top
    : 100px;
    left
    : 0;
    height
    : 100%;
    width
    : 150px;
    overflow
    : hidden;
    vertical-align
    : top;
    background-color
    : #D2E6FA;
    }

    #maincontent
    {
    position
    : fixed;
    left
    : 150px;/*Set left value to WidthOfLeftFrameDiv*/
    top
    : 100px;/*Set top value to HeightOfTopFrameDiv*/
    right
    : 0;
    bottom
    : 0;
    overflow
    : auto;
    background
    : #fff;
    border-top
    : solid 2px #70cbea;
    border-left
    : solid 2px #70cbea;
    }
    * html body
    {
    padding
    : 100px 0 0 150px;/*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }
    * html #maincontent
    {
    height
    : 100%;
    width
    : 100%;
    }
    * html #framecontentTop
    {
    width
    : 100%;
    }
    3.menu.css样式代码
    .menus
    {
    }
    .menu ul
    {
    padding
    : 0;
    margin
    : 0;
    list-style-type
    : none;
    width
    : 100%;
    }
    .menu li
    {
    position
    : relative;
    background
    : #d4d8bd;
    height
    : 26px;
    }
    .menu a, .menu a:visited
    {
    display
    : block;
    text-decoration
    : none;
    height
    : 25px;
    line-height
    : 25px;
    width
    : 149px;
    color
    : #000;
    text-indent
    : 5px;
    border
    : 1px solid #fff;
    border-width
    : 0 1px 1px 0;
    }
    .menu a:hover
    {
    color
    : #fff;
    background
    : #949e7c;
    }

    二、CategoryList.htm页面代码(根据自己需要输入):

    代码
    <!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>
    <title>类别列表</title>
    </head>
    <body>
    <div>
    <table>
    <tr>
    <td>类别</td>
    <td>类别</td>
    <td>类别</td>
    <tr>
    <tr>
    <td>类别</td>
    <td>类别</td>
    <td>类别</td>
    <tr>
    <tr>
    <td>类别</td>
    <td>类别</td>
    <td>类别</td>
    <tr>
    </table>
    </div>
    </body>
    </html>

    三、ProductList.htm页面代码(根据自己需要输入):

    代码

    四、效果图:

    (图一)

    (图二)

  • 相关阅读:
    【leetcode】Pascal's Triangle
    [bxd学习java基本点]10.set元素不重复,取元素顺序会变的。TreeSet取值时,是安顺序来的。
    cocos2dx 学习点滴(4) cocos2dx 架构和引擎目录
    VC 2008编译libxml22.7.6
    程序猿的九重天
    使用批处理文件设置环境变量
    删除指定目录下除开指定文件外所有文件的批处理命令
    关于永动机的思考
    程序员的九阳真经
    上帝的归上帝,程序的归程序 (卓有成效的程序员)
  • 原文地址:https://www.cnblogs.com/weihengblogs/p/2740904.html
Copyright © 2011-2022 走看看