Wulin.com (www.vevb.com) Введение статьи: Навыки производства веб -страницы: XHTML, CSS и JS.
Подробности 1 ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………1. Когда текст и изображение находятся на одной строке, текст должен быть выровнен с нижней частью картинки, и его необходимо записать так:
<li> Помните пароль <img src = align = bottom style = margin-bottom: -4px/> </li>
2. Когда текст и изображение находятся на одной строке, текст и картинка должны быть центрированы и написаны так:
<li> Помните пароль <img src = static/img/xyx.jpg align = middle/> </li>
3. Изменить редактор, открытый в меню исходного кода IE View
Откройте редактор реестра и введите Regedit в начале
Найдите следующее местоположение: HKEY_LOCAL_MACHINESOFTWAREMICROSOFT Internet ExplorErview SourceeditoredItor Имя изменить данные по умолчанию на D: Program FilesEditorEmeditor.exe
Переключитесь на IE, чтобы просмотреть исходный код, и вы можете увидеть эффект.
Если элемент имени Editoreditor имени просмотра не имеет его, вы можете создать его самостоятельно.
4. автоматически максимизируйте окно и добавьте между <body> и </body>:
<Сценарий языка = javascript>
setTimeout ('top.moveto (0,0)', 5000);
setTimeout ('top.resizeto (screen.availwidth, screen.availheight)', 5000);
< /script>
5. window.Opener - это родительская форма формы, открытой с помощью Window.open.
Например, в родительской форме Parentform, Pass window.open (subform.html), затем в windows subform.html.opener
Это означает Parentform, вы можете установить значение родительской формы или вызвать метод JS таким образом.
1, window.opener.test (); --- Вызов метода test () в родительской форме;
2. Если window.Opener существует, установите значение Fockbox в ParentForm.
if (window.opener &&! window.opener.closed)
{
window.opener.document.parentform.stockbox.value = symbol;
}
6. Как освежить страницу
Как обновить страницу в JavaScript:
1 ИСТОРИЯ.go (0)
2 location.reload ()
3 местоположение = местоположение
4 место. Assign (место)
5 Document.execcommand ('refresh')
6 window.navigate (место)
7 location.replace (место)
8 Document.url = location.href
Как автоматически обновить страницу:
1. Автоматическое обновление страницы: добавить <meta http-equiv = rewarresh content = 20> в область <головы>
2. Автоматический прыжок страницы: добавить <meta http-equiv = colresh Content = 20; url = http: //www.webjx.com> в область <head>
3.JS автоматически обновлять страницу
<сценарий языка = javascript>
Функция myRefresh ()
{
window.location.reload ();
}
setTimeout ('myRefresh ()', 1000); // указать обновление один раз в 1 секунду
< /script>
4.JS обновления
а) освежить страницу, содержащую раму для
<сценарий языка = javascript>
parent.location.reload ();
< /script>
б) детское окно обновляет родительское окно
<сценарий языка = javascript>
self.opener.location.reload ();
< /script>
(или <a href = javascript: opener.location.reload ()> обновить </a>)
в) обновить страницу другого кадра
<сценарий языка = javascript>
parent.another frameid.location.reload ();
< /script>
7. Если вы использовали Hacks CSS, вы должны знать, что именование с помощью подчеркиваний - это взлом. Если вы используете _style, он может сделать большинство браузеров за пределами, то есть игнорировать определение этого стиля, поэтому используя _ в качестве сепаратора, когда именование не стандартизировано. При выполнении проверки CSS появится сообщение об ошибке.
8. IE метод написания условной аннотации
<!-[если! IE]> это можно распознать, кроме как <! [endif]->
<!-[IE]> все IEs идентифицируются <! [Endif]->
<!-[IE IE 5.0]> Только IE 5.0 может распознать <! [endif]->
9. Метод написания взлома CSS
Первый тип:
.div {
Фон: оранжевый;
*Фон: зеленый! Важно;
*Фон: синий;
}
Второй тип:
.div {
Маржа: 10px;
*Маржа: 15px;
_margin: 15px;
}
Третий тип:
#div {color: #333; }
*+html #div {color: #999; }
* html #div {color: #666; }
Подробности 2 ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. IE6 и следующие не распознают: псевдокласс: Hover вне тега. В Firefox, IE7, эффект может быть достигнут правильно. Решение:
#show li.s1 {border: 1px solid #ff9900; Фон:#454242;}
#show li.s2 {border: 1px solid #d9d8d8; Фон:#312E2E;}
<li> </li>
2. Установите Haslayout для элементов
Многие проблемы IE6 (или IE7) могут быть решены путем установки значения Haslayout. Самый простой способ установить значение Haslayout для элемента - это добавить высоту или ширину CSS (конечно, также можно использовать Zoom, но это не является частью CSS). Например, установите на высоту: 1%. Если родительский элемент не устанавливает высоту, физическая высота элемента не изменится, но он уже имеет свойство Haslayout.
3. персонажи появляются неоднократно в IE6
Убедитесь, что дисплей: inline устанавливается на плавающий элемент;
Используйте маржу вправо: -3px в плавающих элементах;
4. Приоритет стиля
1. Встроенный стиль [1.0.0.0]
2. Селектор ID [0,1,0,0]
3. класс, атрибут, псевдо-класс селектор [0.0.1.0]
4. Теги элементов, псевдоэлементный селектор [0.0.0.1]
5. Метод написания CSS вертикально центрированный один элемент
#Exm {
позиция: абсолютно;
Слева: 50%;
Верх: 50%;
z-index: 1;
Ширина: 200px;
высота: 100px;
Мяглевая маржа: -100PX;
маржинальная версия: -52px;
}
6. Зум: нормальный | число
Устанавливает или извлекает коэффициент масштабирования объекта. Установка или изменение этого значения свойства для объекта, который был отображается, приведет к тому, что содержание, окружающее объект, снова течь. Хотя это свойство не является наследственным, оно влияет на все дочерние объекты объекта (дети).
7. Когда изображение и текст расположены рядом, текст изображения должен быть центрирован вертикально:
1> Установите высоту линии: на высоту изображения или высоту родительского элемента изображения.
2> затем установите вертикальный аровка: середина в CSS картинки;
8. Когда элемент LI содержит элемент IMG, заготовка появляется под IE6
Решение 1
Сделайте LI плавать и установить IMG на элемент на уровне блока
Решение 2
Установите UL Font-Size: 0;
Решение 3
Установить вертикальный аровка IMG: внизу;
Решение 4
Установите маржинальный перевод IMG: -5px;
Подробности 3 ………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. Стили гиперссылки, которые посещали, щелкну
Решение: изменить порядок атрибутов CSS: LVHA
2. Непрерывные длинные поля под FF не могут быть автоматически обернуты
Решение: Word-wrap: слов слов; переполнение: скрыто;
3. Высота родительского контейнера не может быть адаптирована в рамках FF
Решение: очистите плавание детских элементов
4. Ниже изображение генерируется пробел под т.е.
Решение: Определите IMG как дисплей: блок или вертикальный выравнивание как верхний/нижний/средний/текстовый-пух
Определите размер шрифта родительского контейнера на ноль, размер шрифта: 0
5. Существует 3PX-зазор между плавающим элементом под IE6 и его смежным некалирующим элементом.
Решение: прилегающие не плавающие элементы также установлены на плавание;
Плавающие элементы определены по сравнению с IE6_MARGIN-Right: -3px;
6. Содержание LI отображается в эллипсисе после того, как он слишком долго.
Решение: Белое пространство: Nowrap; (Текст не обертывает) Текст-переполнение: ellipsis; -О-текст-переполнение: ellipsis; переполнение: скрыто;
7. Текст не может быть центрирован вертикально
Решение: высота линии и высота контейнера равны высоте линии = высота;
8. Поле ввода текста не может быть выровнен с соседним текстом.
Решение: Установите поле ввода текста Вертикальная-Средняя;
9. IE установите стиль прокрутки
Решение:
тело{
Прокручивание-лиф-цвета:#f6f6f6;
Scrollbar-Highlight-Color: #fff;
Scrollbar-Shadow-Color: #Eeeeeee;
Scrollbar-3dlight-Color: #eeeeeee;
Прокручивание-растратолоковое цвета:#000;
Scrollbar-Track-Color: #ffff;
Scrollbar-Darkshadow-Color: #fff;
}
10. IE6 не может определить контейнеры с высотой 1PX
Решение: переполнение: скрыто
Увеличение: 0,8
Линия-высота: 1px
Подробности 4 ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. Пусть слой будет отображаться на вспышке
Решение: установить прозрачный <param name = wmode value = pronsparent /> или <param name = wmode value = opaque /> для Flash
2. Сделайте слой вертикально центрированный в браузере
Решение: Используйте процент абсолютного позиционирования, с отрицательными значениями внешних патчей.
позиция: абсолютно;
Верх: 50%;
Слева: 50%;
Маржа: -100PX Auto Auto -100px;
Ширина: 200px;
Высота: 200px;
3. Добавить в фавориты
Решение: <script type = text/javascript>
// <! [CDATA [
функция bookmark () {
var title = document.title
var url = document.location.href
if (window.sidebar) window.sidebar.addpanel (title, url,);
else if (window.opera && window.print) {
var mbm = document.create_r_relement_x ('a');
mbm.setattribute ('rel', 'боковая панель');
mbm.setattribute ('href', url);
mbm.setattribute ('title', title);
mbm.click ();}
иначе if (document.all) window.external.addfavorite (url, title);
}
//]]>
< /script>
<a href = javaScript: bookmark ()> добавить в фавориты </a>
Подробности 5 ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. Как написать общие списки новостей:
<ul class = list>
<li> <pan> 6 июня 2006 г. </span> <a href =#> Название новостей 01 </a> </li>
<li> <pan> 6 июня 2006 г. </span> <a href =#> Название новостей 02 </a> </li>
<li> <pan> 6 июня 2006 г. </span> <a href =#> Название новостей 03 </a> </li>
<li> <pan> 6 июня 2006 г. </span> <a href =#> Название новостей 04 </a> </li>
< /ul>
2.Ie реализует фоновый градиент страницы (FF и Chrome не поддерживают)
Сверху вниз:
Body {Filter: Progid: dximageTransform.microsoft.gradient (gradientType = 0, startColorStr =#ffffff, endColorStr =#000000);}
Вверху слева вниз справа:
Фильтр: альфа (стиль = 1, непрозрачность = 25, finishopacity = 100, startx = 50, finishx = 100, starty = 50, finiessy = 100); фоновый цвет: SkyBlue;}
Слева направо
Body {Filter: Progid: dximagetransform.microsoft.gradient (gradientType = 1, startColorStr =#ffffff, endColorStr =#000000);}
Сверху вниз
style = filter: progid: dximagetransform.microsoft.gradient (gradientType = 0, startColorStr = Blue, EndColorStr = White);
3. Стиль падения достигает множества эффектов и может быть гибко используется
#outer a {border: 1px solid #069;}
#outer A: Hover {Border: 1px пунктир #c00;}
4. Бардер: нет; разница от границы: 0
Теоретические различия в эффективности:
граница: 0; Установите границу на 0 пикселей. Хотя он невидим на странице, согласно значению границы по умолчанию, браузер по-прежнему производит пограничную ширину/границу, то есть значение памяти было занято. граница: нет; Установите границу ни на один, то есть не существует действия рендеринга, когда браузер нет, то есть значение памяти не будет использоваться.
Различия в совместимости:
Разница в совместимости предназначена только для браузеров IE6, IE7, кнопки тега, ввода, и это произойдет в темах XP Win, Win7 и Vista. Когда граница нет, кажется, что неверная граница для IE6/7 все еще существует. Когда граница 0, она кажется более эффективной, чем ничего. Все браузеры последовательно скрывают границу.
Как сделать границу: нет; Полностью совместим? Просто добавьте атрибуты фона в тот же селектор
5.CSS реализует многоцелевой контурный макет, положительный внутренний край и отрицательный внешний край
Примените стили к каждому столбцу, который должен достичь контура: .e {padding-bottom: 32767px; Margin-Bottom: -32767px;}
6.position: относительно; особое использование? ? ? ?
* {Margin: 0; Padding: 0; Font: Norral 12px/25px Songti;}
Body {founale:#f8f8f8;}
ul {list-style: нет;
li {float: слева;
a {color: #ffff; Float: слева;
A: Hover {Color:#000; фон: url (***.
Подробности 6 ………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. Innertext: содержание от начальной позиции в конечную позицию, не включает Tag innerhtml
Outerhtml: содержит innerhtml и теги
<div id = test> <pan> test1 </span> test2 </div>
test.innertext: test1 test2
test.innerhtml: <pan> test1 </span> test2
test.outerhtml: <div id = test> <pan> test1 </span> test2 </div>
2. Number (): когда любая строка, содержащая ненуковые символы, используется в качестве параметра, результат-NAN
parseint (): преобразовать строку в число как можно меньше слева направо, пока не остановится, когда встречается незнак
isnan (): вернуть true, когда параметр не является числом;
3. A = 23,50ABC
typeof (a) = строка
parsefloat (a) = 23,5
Parseint (A) = 23
Номер (a) = nan
4. Имена переменных JS содержат номера, подчеркнутые знаками доллара, и не могут начинаться с номеров
5. getelementsbytagname_r () необходимо получить после загрузки документа
6. Nodetype: 12 типов, 1 представляет собой узел элемента и 3 представляет текстовый узел
nodename: представляет имя узла. Если это текстовый узел, это означает #Text
Nodevalue: представляет значение узла
Например: Получите узел if (obj.nodename.tolowercase () == 'li') {}
Измените текстовое содержание P Document.getElementsBytagname_r ('p') [0] .firstchild.nodevalue = '' '
7. родительский узел для детского узла
Childnodes: список всех дочерних узлов первого уровня в элементе, за исключением более глубоких детских узлов
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
Haschildnodes () определяет, есть ли элемент детей и возвращает логическое значение
7. Детский узел к родительскому узлу
var parentelm = mylinkitem.parentnode;
while (parentelm, classname! = 'syna' && parentelm! = 'document.body')
parentelm = parentelm.parentnode
8. Изменить свойства элемента
1) Получить или установить в форме свойств объекта
var mainimage = document.getElementbyIdx_x ('vav'). getElementsbytagname ['img'] [0];
mainimage.src = '';
Очистка.;
2) Использовать методы getattribute () и setattribute ()
Подробности 7 …………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1. Преобразовать числа в форму, в которой x Decimal Places функционирует круглую (базовую, точность)
{var m = math.pow (10, precision);
var a = math.round (base*m)/m;
вернуть А;
}
var n = 3,942487;
Круглый (n, 3) = 3,942
Круглый (n, 0) = 3
2. Создать ограниченные случайные числа
Функция randombetween (мин, макс)
{return min+math.floor (math.random ()*(max-min+1))}}}
3. Преобразовать числа в строки
var a = 10;
a = string (a);/a = a.toString ();
4. Кодирование URL
var a =? P = E;
var b = Escape (a);
var c = (b);
5. Измените тип элементов в документе
P ---> div
Сначала создайте элемент div, затем скопируйте детский узел P в Div и, наконец, замените P на Div
6. Сколько параметров требуется для функции
Функция add (n1, n2) {}
вернуть num = add.length;
7. Сколько параметров передается в функции
функция добавить (n1, n2) {
вернуть Arguments.length;}
Подробности 8 ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………………
1). дисплей: встроенный блок; Как следует из названия, это форма блока в линии, и ширина высоты может быть установлена.
.Element-class {
дисплей: -moz-inline-stack; // только код Firefox
дисплей: встроенный блок; // некоторые стандартные браузеры
Увеличение: 1; // т.е. только
*дисплей: inline; // только т.е. знать этот код (хак CSS)
}
2) .clean плавание
.clearfix: After {Visibility: Hidden; Display: Block; Font-Size: 0; Content :; clear: оба; высота: 0;}
.clearfix {Zoom: 1;}
3). Добавить пользовательский значок в адресную строку
Во-первых, нам нужно предварительно готовить файл значка с размером 16*16 пикселей. Расширение файла ICO и загрузите его в соответствующий каталог. Добавьте следующий код между исходным файлом HTML <Head> </head>: <Link rel = Имя значка href = Адрес изображения (обратите внимание, что он соответствует каталогу только сейчас)>. Конечно, если пользователь просматривает, используя IE5 или выше, это еще проще. Просто загрузите изображение в корневой каталог веб -сайта, и она может быть автоматически распознана!
4). При настройке дисплея: пустой контейнер блока в IE6 на меньшую высоту, такой как <p Style = высота: 1px;> </p>, вы обнаружите, что его высота не может быть меньше определенного значения. Решение: установить переполнение: скрыто.
5). Текст обрезается с эллипсисом
div {ширина: 200px; высота: 100px; переполнение: скрыто; текстовое переполнение: ellipsis; белое пространство: nowrap;}