zoukankan      html  css  js  c++  java
  • frameset

    刚刚快速帮别人做了一个frameset。以后不想再做了。就copy上来咯。^_^

    frameset.html

    <html>
    <head>
    <title>框架菜单</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <!-- 框架开始 -->
    <frameset rows="218*,239*" cols="*" framespacing="0" frameborder="NO" border="1" >   
        <frame src="top.html" name="topFrame" scrolling="NO" noresize/> 

        <frameset rows="*" cols="250,500,250" framespacing="0" frameborder="NO">
         <frame src="left.html"  name="leftFrame" scrolling="NO" noresize/>           
      <frame src="main.html"  name="mainFrame" scrolling="no" noresize/> <!-- scrolling 框架滚动条显示 yes/no (可视化助理) -->
      <frame src="right.html" name="rightFrame" scrolling="no" noresize="noresize" />
        </frameset>
    </frameset>

    <!-- 框架结束 -->

    <noframes>
    <body class="html">
    </body>
    </noframes>
    </html>

    left.html

    <link href="style.css" rel="stylesheet" type="text/css">
    <body leftmargin="0" topmargin="0" class="body">
    <table align="right" border="1" width="150" height="600" class="left">
    <div id="left">
    <h1 class="h1" class="p,pre, h1">左边的菜单</h1>
    <p class="p">菜单固定的宽</p>
    <pre class="pre"><a href="example.html" target="mainFrame" class="a">select1</a></pre>
    <pre class="pre"><a href="test.html" target="mainFrame" class="a">select2</a></pre>
    <pre class="pre"><a href="1.html" target="mainFrame" class="a">select3</a></pre>
    <pre class="pre"><a href="main.html" target="mainFrame" class="a">select4</a></pre>
    </div>
    </body>

    main.html

    <link href="style.css" rel="stylesheet" type="text/css">
    <body leftmargin="0" topmargin="0" rightmargin="0">
    <table align="center" border="1">
    <!-- div main-->
    <div id="main" class="content">
    <h1 class="h1">中间</h1>
    <p class="h1">
    </p>
    <pre class="pre"></pre>
    </div>
    </table>
    </body>

     

    right.html
    <link href="style.css" rel="stylesheet" type="text/css">
    <body leftmargin="0" topmargin="0" rightmargin="0" class="right">
    <table align="left" border="1" width="150" height="600">
    <div id="right" class="right">
    <h1 class="h1">右边</h1>
    <pre class="pre"></pre>
    <p class="p">
    <img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/>
    <img src="css.gif" alt="css" width="80" height="15" border="0"/><br />
    </p>
    </div>
    <br clear="all" />
    </div>
    </table>
    </body>

    top.html
    <link href="style.css" rel="stylesheet" type="text/css">

    <table width="850" height="150"  border="1" align="center" class="head">
    <div id="top"><a class="a">上面</a></div>
    </table>

     

    style.css

    @charset "utf-8";
    /* CSS Document */

    <!-- css -->
    <style type="text/css" media="screen"><!--
    /*  body 中的标签元素css定义 */

    /* html模版定义 */
    html {
    padding:0px;
    margin:0px;
    }

    body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;
    text-align:center;
    margin:0px;
    padding:0px;
    }

    p,pre, h1 {
    margin:0px 10px 10px 10px;
    }

    h1 {
    font-size:14px;
    padding-top:10px;
    text-transform:uppercase;
    color: #564b47;
    background-color: transparent;
    }

    a {
    color: #ff66cc;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }

    pre {
    color: #564b47;
    font-size: 11px;
    background-color:transparent;
    font-family: Courier, Monaco, Monospace;
    }

    /*  布局层次修饰  */

    #box {
    750px;
    margin: 0px auto;
    padding:0px;
    text-align:left;
    }

    #left {
    175px;
    padding:0px;
    float:left;
    background-color:#ff99cc;
    }

    #content {
    400px;
    padding:0px;
    float:left;
    background-color:#fff;
    overflow: auto;
    }

    #right {
    175px;
    padding:0px;
    float:left;
    background-color:#ff99cc;
    }

    #head {
    background-color:transparent;
    }

    #head h1 {
    font-size: 11px;
    text-transform:uppercase;
    text-align: right;
    color: #564b47;
    background-color: #90897a;
    padding:5px 15px;
    margin:0px
    }

    #head p {
    padding:10px;
    margin:0px;
    }
    --></style>
    <!-- css定义结束 -->

    引用css style

    直接class="未引用...",引用...,再class="你要的形式名称,自己去找"。

  • 相关阅读:
    《Qt学习系列笔记》--章节索引
    Qt-绘制图表
    Qt-可视化数据库操作
    Qt-数据库操作SQLite
    古人说的最好,临渊羡鱼,不如退而结网, 这是个勇气问题.
    阿里云产品之数据中台架构
    使用HSDB查看类变量的内存布局(5)
    文件流
    类文件介绍
    类的连接之重写(1)
  • 原文地址:https://www.cnblogs.com/xinxindiandeng/p/1281235.html
Copyright © 2011-2022 走看看