Эта статья представляет собой структуру, которая настолько проста, что не может быть проще.
Давайте сначала посмотрим на состав страницы этой структуры. Поскольку это чисто ручная программа тестирования, я только что сделал некоторый код в Notepa ++, что очень отрывочно. Но он все еще содержит общий контент в рамках. Хорошо, давайте вернемся к делу, сначала посмотрим на композицию файла.
1.frame.html содержит структуру структуры
2. Link.html содержит планку меню на левой стороне рамы
3. Firstpage.html содержит линию текста на главной странице фреймворта (я ленивый и не делал этого хорошо)
4.secondpage.html аналогична вышеуказанному 3 и используется для тестирования.
Ниже приведен скриншот (не ясно, я делаю это впервые)
Давайте посмотрим на код в frame.htm:
<html>
<голова>
</head>
<Frameset Cols = 159px,*>
<кадр name = a1 src = link.html noresize = yes border = 1px scrolling = auto bordercolor = blue>
<кадр name = a2 src = firstpage.html>
</frameset>
</html>
Разве это не очень просто? В основном он состоит из элемента рамки, а затем установлен атрибуты = 159px,* установлен. Цель этого свойства - разделить страницу на 159px и две другие области. Как показано на картинке выше.
Тогда есть тег кадра. Приведенный выше атрибут Cols имеет несколько значений. Внизу дочерних элементов <Frame> также должны иметь несколько соответствующих значений. Тогда есть некоторые общие атрибуты <Frame>. Включая ширину границы, появляются ли прокрутки стержней, цвет границы и разрешено ли пользователю изменять размер. Какой исходный файл и т. Д.
Затем второй исходный файл указывает на первую страницу в качестве теста.
Далее это link.html:
<стиль типа = текст/css>
<!-
*{Margin: 0; Padding: 0; граница: 0;}
тело {
Семейство шрифта: ариальная, засечка, засечка;
размер шрифта: 12px;
}
#nav {
Ширина: 180px;
высота линии: 24px;
тип списка: нет;
Текст-альбом: слева;
/*Определите высоту линии и цвет фона всего меню UL*/
}
/*=================================================================================
#nav a {
Ширина: 160px;
дисплей: блок;
Лебь накладки: 20px;
/*Ширина (должна), в противном случае LI ниже деформируется*/
}
#nav li {
Фон: #CCC; /*Цвет фона каталога первого уровня*/
Пограничный подвод: #fff 1px твердый; /*Белый край ниже*/
Плавание: осталось;
/*float: слева, не должно быть установлено, но его нельзя отображать обычно в Firefox.
Унаследовав ширину NAV, ограничивая ширину, LI автоматически расширяется вниз*/
}
#nav li a: Hover {
Фон:#CC0000; /*Цвет фона отображается в каталоге первого уровня Onmouseover*/
}
#nav a: ссылка {
Цвет:#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: ссылка {
Цвет:#666; Текстовое декорация: нет;
}
#nav li ul a: посетил {
Цвет:#666; текстовое декорация: нет;
}
#nav li ul a: Hover {
Цвет:#f3f3f3;
Текстовое декорация: нет;
шрифт-вес: нормальный;
Фон:#CC0000;
/* Цвет шрифта и цвет фона вторичного Onmouseover*/
}
/*======================================================================
#nav li: Hover ul {
Слева: Авто;
}
#nav li.sfhover ul {
Слева: Авто;
}
#содержание {
ясно: осталось;
}
#nav ul.collapsed {
дисплей: нет;
}
->
#Parent {
Ширина: 180px;
}
*#Parent {
Ширина: 100%;
}
</style>
<div id = parent>
<ul id = Nav>
<li> <a href =#menu = childmenu1 onclick = domenu ('Childmenu1')> мой веб -сайт </a>
<ul id = childmenu1 class = couplaps>
<li> <a href = firstpage.html target = a2> первая страница </a> </li>
<li> <a href = вторая страница.html target = a2> вторая страница </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu2 onclick = domenu ('Childmenu2')> моя учетная запись </a>
<ul id = childmenu2 class = couplaps>
<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 = couplaps>
<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 =;
функция 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),);
}
}
}
Функция Domenu (Emid)
{
var obj = document.getElementbyid (emid);
obj.classname = (obj.classname.tolowercase () == Расширен? Обручен: расширен);
if ((lastleftid! =) && (emid! = lastleftid)) // Закрыть предыдущее меню
{
document.getElementbyId (lastleftId) .className = Couppalpsed;
}
LACKLEFTID = 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 (меню)
}
}
GetMenuid (); //* Пожалуйста, обратите внимание на заказ этих двух функций, в противном случае getMenuid () не будет иметь никакого влияния в Firefox
Menufix ();
->
</script>
Это на самом деле лениво. Это раскрывающееся меню, сделанное Div+CSS+JS, найденное в Интернете. Если вам интересно, вы можете взглянуть на это самостоятельно. Я чувствую, что могу использовать это сам, и будет нормально знать, как его изменить.
Вот две тестовые страницы. Поскольку даже те, кто знает немного HTML, могут написать их, здесь размещен только код для страницы 1:
<html>
<голова>
<Title> Первая страница </title>
<style>
</style>
</head>
<тело>
<h1> Первая страница </h1>
</body>
</html>
Я предполагаю, что мастер будет рвать, когда увидит это, и он, должно быть, сказал, что это очень мусор, но он просто записывает мелочи, которые он сделал. Ха -ха, прости меня.