frame框架设计网页

来源：互联网发布：有向图自动布局算法编辑：程序博客网时间：2024/05/29 04:41

如何用框架设计网页如图

首先设计一个两列的框架结构的网页 Frame.html

框架的结构

<frameset cols="250, 750" frameborder="yes" border="5px">   <frame src="" name="leftFrame" di=""></frame>   <frame src="" name="rightFrame" di=""></frame></frameset><noframes>    <body></body></noframe>

在leftFrame框架中放入一个网页Left.html

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>公司目录</title>  <style type="text/css">    body{font-family:Arial;font-size:12px;}.container{width:300px;float:left;}ul{list-style-type:none;margin:0px;padding:0px;}li{width:160px;    margin:10px 0 10px 20px;border:dotted 1px black;background-image:url(images/a.png);background-repeat:no-repeat;background-position:right;}  </style> </head> <body>   <div class="container">            <img src="images/Logo.jpg"/>  <ul>    <li>公司简介</li><li>总经理致词</li><li>公司结构</li><li>机器设备</li><li>工作流程</li>        <li>销售网络</li><li>员工家园</li><li>地理位置</li><li>联系我们</li>  </ul>   </div> </body></html>

其中页面上的左侧导航是<ul><li>元素设计

每一个菜单上有一个箭头的修饰是给li元素设置样式

li{width:160px;    margin:10px 0 10px 20px;border:dotted 1px black;background-image:url(images/a.png);background-repeat:no-repeat;background-position:right;}

Frame.html网页的代码

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>摄影公司首页</title> </head>    <frameset cols="250, *" frameborder="yes" border="5px">   <frame src="Left.html" name="leftFrame" id="leftFrame"></frame>   <frame src="" name="rightFrame" id="rightFrame" scrolling="yes" noresize="noresize"></frame></frameset> <body> </body></html>

如果要设计如下这个框架结构

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head>       <frameset rows="30%,*" frameborder="yes" border="8px" bordercolor="red">       <frame name="" id=""></frame>   <frameset cols="20%,*" frameborder="yes" border="8px">      <frame name="" id=""></frame>  <frame name="" id="" scrolling="yes" ></frame>   </frameset>   </frameset> <body>   </body></html>