この記事では、簡単にすることができないほど簡単なフレームワークを紹介します。
まず、このフレームワークのページ構成を見てみましょう。それは純粋に手動テストプログラムであるため、私はNotepa ++でいくつかのコードを作成しました。これは非常に大ざっぱです。ただし、フレームセットに一般的なコンテンツが含まれています。さて、ポイントに戻りましょう。まず、ファイルの構成を見てみましょう。
1.Frame.htmlには、フレームワークの構造が含まれています
2.link.htmlには、フレームの左側にメニューバーが含まれています
3.firstpage.htmlには、フレームワークのメインページにテキストの行が含まれています（私は怠け者で、うまくいきませんでした）
4.SecondPage.htmlは上記の3に似ており、テストに使用されます。
以下はスクリーンショットです（明確ではありません、私は初めてこれをやっています）
frame.htmのコードを見てみましょう：
<html>
<head>
</head>
<フレームセットcols = 159px、*>
<フレーム名= a1 src = link.html noresize = yes border = 1px scrolling = auto bordercolor = blue>
<フレーム名= a2 src = firstpage.html>
</frameset>
</html>
とてもシンプルではありませんか？主にフレームセット要素で構成され、次に属性cols = 159px、*が設定されます。このプロパティの目的は、ページを159pxと他の2つのエリアに分割することです。上の写真に示されているように。
次に、フレームタグがあります。上記のcols属性にはいくつかの値があります。以下の<frame>子要素には、いくつかの対応する値も必要です。次に、<frame>の一般的な属性がいくつかあります。ボーダーの幅、スクロールバーが表示されるかどうか、境界線の色、ユーザーがサイズを変更できるかどうかを含みます。ソースファイルなど
次に、2番目のソースファイルがテストとしてFirstPageを指します。
次はlink.htmlです：
<style type = text/css>
<！ -
*{マージン：0;パディング：0;境界：0;}
体 {
フォントファミリー：arial、serif、serif;
フォントサイズ：12px;
}
#nav {
幅：180px;
ラインハイト：24px;
リストスタイルタイプ：なし;
テキストアライグ：左;
/*ULメニュー全体の線の高さと背景色を定義します*/
}
/*=================================================
#nav a {
幅：160px;
表示：ブロック;
パディング左：20px;
/*幅（必須）、それ以外の場合、下のliは変形します*/
}
#nav li {
背景：#ccc; /*第1レベルのディレクトリの背景色*/
境界線：#fff 1px solid; /*下の白い端*/
フロート：左;
/*float：左、設定しないでください。ただし、通常はFirefoxで表示できません。
NAVの幅を継承し、幅を制限すると、LIは自動的に下方に伸びます*/
}
#nav li A：Hover {
背景：＃cc0000; /*最初のレベルのディレクトリで表示される背景色OnMouseOver*/
}
#nav a：link {
色：＃666;テキスト装置：なし;
}
#Nav A：訪問{
色：＃666;テキストデコレーション：なし;
}
#nav a：hover {
色：#fff;テキストデコレーション：なし; font-weight：bold;
}
/*======================================================
#nav li ul {
リストスタイル：なし;
テキストアライグ：左;
}
#nav li ul li {
背景：#ebebeb; /*セカンダリディレクトリの背景色*/
}
#nav li ul a {
パディング左：10px;
幅：160px;
/*パディング - 左セカンダリディレクトリ漢字は右に移動しますが、幅はリセットする必要があります=（合計幅パディング左）*/
}
/*以下は、セカンダリディレクトリのリンクスタイルです*/
#nav li ul a：link {
色：＃666;テキスト装置：なし;
}
#nav li ul a：訪問{
色：＃666;テキストデコレーション：なし;
}
#nav li ul a：hover {
色：＃F3F3F3;
テキスト装置：なし;
font-weight：正常;
背景：＃cc0000;
/*セカンダリオンマウスオーバーのフォントの色と背景色*/
}
/*======================================
#nav li：Hoverul {
左：auto;
}
#nav li.sfhover ul {
左：auto;
}
＃コンテンツ {
クリア：左;
}
#nav ul.collapsed {
表示：なし;
}
- >
＃親{
幅：180px;
}
*＃親{
幅：100％;
}
</style>
<div id = parent>
<ul id = nav>
<li> <a href =＃menu = childmenu1 onclick = domenu（ 'childmenu1'）>私のウェブサイト</a>
<ul id = childmenu1 class = collapsed>
<li> <a href = firstpage.htmlターゲット= a2>最初のページ</a> </li>
<li> <a href = secondpage.htmlターゲット= a2> 2番目のページ</a> </li>
</ul>
</li>
<li> <a href =＃menu = childmenu2 onclick = domenu（ 'childmenu2'）> myアカウント</a>
<ul id = childmenu2 class = collapsed>
<a href =＃> pay </a> </li>
<li> <a href =＃>管理</a> </li>
<li> <a href =＃>オンライン支払い</a> </li>
<li> <a href =＃>登録送金</a> </li>
<li> <a href =＃>オンラインで発見</a> </li>
<li> <a href =＃>履歴アカウント</a> </li>
</ul>
</li>
<li> <a href =＃menu = childmenu3 onclick = domenu（ 'childmenu3'）>ウェブサイト管理</a>
<ul id = childmenu3 class = collapsed>
<li> <a href =＃> login </a> </li>
<a href =＃>ロール管理</a> </li>
<li> <a href =＃>ユーザー管理</a> </li>
</ul>
</li>
</ul>
</div>
<script type = text/javascript>
<！ -
var lastleftid =;
function menufix（）{
var obj = document.getElementById（nav）.getElementsByTagname（li）;
for（var i = 0; i <obj.length; i ++）{
obj [i] .onmouseover = function（）{
this.classname + =（this.classname.length> 0？：） + sfhover;
}
obj [i] .onmousedown = function（）{
this.classname + =（this.classname.length> 0？：） + sfhover;
}
obj [i] .onmouseup = function（）{
this.classname + =（this.classname.length> 0？：） + sfhover;
}
obj [i] .onmouseout = function（）{
this.classname = this.classname.replace（new regexp（（？|^）sfhover // b）、）;
}
}
}
function domenu（emid）
{
var obj = document.getElementbyid（emid）;
obj.classname =（obj.classname.tolowercase（）== expanded？collapsed：Expanded）;
if（（lastleftid！=）&&（emid！= lastleftid））//前のメニューを閉じます
{
document.getElementByID（lastLeftID）.className = collapsed;
}
lastleftid = emid;
}
関数getMenuid（）
{
var menuid =;
var _paramstr = new String（window.location.href）;
var _sharppos = _paramstr.indexof（＃）;
if（_sharppos> = 0 && _sharppos <_paramstr.length -1）
{
_paramstr = _paramstr.substring（_sharppos + 1、_paramstr.length）;
}
それ以外
{
_paramstr =;
}
if（_paramstr.length> 0）
{
var _paramarr = _paramstr.split（＆）;
if（_paramarr.length> 0）
{
var _paramkeyval = _paramarr [0] .split（=）;
if（_paramkeyval.length> 0）
{
menuid = _paramkeyval [1];
}
}
}
if（menuid！=）
{
domenu（menuid）
}
}
getMenuid（）; //*これら2つの機能の順序に注意してください。
menufix（）;
- >
</script>
これは実際には怠zyです。これは、インターネット上で見つかったDiv+CSS+JSによって作成されたドロップダウンメニューです。興味があれば、自分でそれを見ることができます。自分で使用できると感じており、変更する方法を知っても大丈夫です。
ここに2つのテストページがあります。 HTMLの少しを知っている人でさえ、それらを書き出すことができるので、1ページのコードのみがここに投稿されています。
<html>
<head>
<title>最初のページ</title>
<style>
</style>
</head>
<body>
<h1>最初のページ</h1>
</body>
</html>
マスターはこれを見たときに嘔吐すると思います、そして、彼はそれが非常にゴミだと言ったに違いありませんが、彼は自分が作ったささいなことを記録するだけです。ハハ、許してください。