Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
Топ:
Теоретическая значимость работы: Описание теоретической значимости (ценности) результатов исследования должно присутствовать во введении...
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
Интересное:
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Дисциплины:
2021-01-31 | 96 |
5.00
из
|
Заказать работу |
|
|
Логотип
При оформлении графического логотипа, слогана и т.п. используется подмена текста изображением:
HTML:
<strong class="logo">
Logo Name
</strong>
CSS:
.logo {
display: block;
width: 100px;
height: 100px;
background: url(logo.gif);
text-indent: -3000px;
overflow: hidden;
}
Если логотип – PNG- изображение (работа с PNG подробнее рассмотрена в «Способы использования PNG для отображения теней») и в то же время ссылка, то надо для IE6 применить хитрость:
HTML:
<a href=”#” class="logo">
Logo Name
</a>
CSS:
a.logo {
display: block;
width: 100px;
height: 100px;
background: url(logo.png);
text-indent: -3000px;
overflow: hidden;
}
* html a.logo{
backgound-position: -100% -100%;
background-repeat: none;
filter: progid:dximagetransform.microsoft.
alphaimageloader(src='images/logo.png',
sizingmethod='crop');
}
Таким образом, в местах прозрачности курсор не будет «проваливаться» и переставать видеть ссылку. Это полезно, если логотип выглядит, как текст.
Меню
Меню оформляется с использованием ul / li:
HTML:
<ul>
<li>
<a href=”#”>List1</a>
</li>
<li>
<a href=”#”>List2</a>
</li>
<li>
<a href=”#”>List3</a>
</li>
</ul>
Подобным образом оформляются и вложенные меню:
HTML:
<ul>
<li><a href="#">List1</a>
<ul>
<li>
<a href="#">List1.1</a>
</li>
<li>
<a href="#">List1.2</a>
</li>
<li>
<a href="#">List1.3</a>
</li>
</ul>
</li>
<li><a href="#">List2</a>
<ul>
<li>
<a href="#">List2.1</a>
</li>
<li>
<a href="#">List2.2</a>
</li>
<li>
<a href="#">List2.3</a>
</li>
</ul>
</li>
<li><a href="#">List3</a>
<ul>
<li>
<a href="#">List3.1</a>
</li>
<li>
<a href="#">List3.2</a>
|
</li>
<li>
<a href="#">List3.3</a>
</li>
</ul>
</li>
</ul>
Для реализации выпадающего меню добавляем id для корневого ul, это нужно для IE. Для остальных браузеров хватит CSS:
HTML:
<ul id="nav">
<li><a href="#">List1</a>
<ul>
<li><a href="#">List1.1</a></li>
<li><a href="#">List1.2</a></li>
<li><a href="#">List1.3</a></li>
</ul>
</li>
<li><a href="#">List2</a>
<ul>
<li><a href="#">List2.1</a></li>
<li><a href="#">List2.2</a></li>
<li><a href="#">List2.3</a></li>
</ul>
</li>
<li><a href="#">List3</a>
<ul>
<li><a href="#">List3.1</a></li>
<li><a href="#">List3.2</a></li>
<li><a href="#">List3.3</a></li>
</ul>
</li>
</ul>
CSS:
#nav li {
border: 1px solid #000;
width:150px;
background:#fff;
list-style:none;
}
#nav li.hover,
#nav li:hover {
position: relative;
}
#nav li.hover ul,
#nav li:hover ul {
display: block;
}
#nav ul {
display: none;
position: absolute;
left: 50%;
top: 50%; /* left и top смещение относительно родительского элемента */
}
JS:
initNav = function() {
var lis = document.getElementById("main-navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++)
{
lis[i].onmouseover = function()
{
this.className += " hover";
}
lis[i].onmouseout = function()
{
this.className = this.className.replace(" hover", "");
}
}
}
if (document.all &&!window.opera && (typeof document.body.style.maxHeight == 'undefined'))
attachEvent("onload", initNav);
Табы
HTML:
<div class="tabset">
<a href="#tab1" class="tab active">Tab1</a>
<a href="#tab2" class="tab">Tab2</a>
<a href="#tab3" class="tab">Tab3</a>
</div>
<div class="tab" id="tab1">Tab1 text</div>
<div class="tab" id="tab2">Tab2 text</div>
<div class="tab" id="tab3">Tab3 text</div>
CSS:
.tabset {float:left;}
a.tab {
border: 1px solid #000;
float: left;
margin: 0 0 -1px;
position: relative;
}
a.active{border-bottom-color: #fff;}
div.tab {
border:1px solid #000;
clear: both;
}
JS:
function initTabs()
{
var sets = document.getElementsByTagName("div");
for (var i = 0; i < sets.length; i++)
{
if (sets[i].className.indexOf("tabset")!= -1)
{
var tabs = [];
|
var links = sets[i].getElementsByTagName("a");
for (var j = 0; j < links.length; j++)
{
if (links[j].className.indexOf("tab")!= -1)
{
tabs.push(links[j]);
links[j].tabs = tabs;
var c = docu.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1));
if (c)
if (links[j].className.indexOf("active")!= -
c.style.display = "block";
else
c.style.display = "none";
links[j].onclick = function ()
{
var c = docu.getElementById(this.href.substr(this.href.indexOf("#") + 1));
if (c)
{
//reset all tabs
for (var i = 0; i < this.tabs.length;
{
document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = e";
this.tabs[i].className =.tabs[i].className.replace("active", "");
}
this.className += " active";
c.style.display = "block";
return false;
}
}
}
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", initTabs, false);
else if (window.attachEvent)
window.attachEvent("onload", initTabs);
Формы
Основняые тэги, используемые при верстке форм указаны в 6.1
При оформлении форм необходимо учитывать, что при прикручивании к движку на сервере тэг form может быть удален из тела документа (в ASP.NET тэг form должен быть один на весь документ). Т.е. делаем так:
HTML:
<form action="#">
<div class="form">
...
</div>
</form>
И теперь все оформление привязываем к div.form.
Привыкнув так оформлять формы, мы убиваем двух зайцев: избавляемся от возможных проблем с клиентским ASP и пишем валидный код под XHTML 1.0 Strict, где элементы форм относительно тэга < form > должны быть завернуты в блочный элемент.
При оформлении форм необходимо использовать определение полей label с привязкой к соответствующему полю ввода:
HTML:
<label for="first-name">First Name</label>
<input type="text" id="firstName"/>
<label for="country">Country</label>
<select id="country">
<option>Afghanistan</option>
<option>Albania</option>
...
</select>
Важно! Для обеспечения правильного отображения информации при отключенном CSS (а это одно из требований accessibility) необходимо располагать тэг label непосредственно перед соответствующим ему элементом формы.
Важно! Параметр name в элементах формы вводить не надо, это сделают программисты в соответствии со своими потребностями.
|
При идущих подряд полях ввода с одним описанием привязку делаем на первое поле:
HTML:
<label for="date">Date</label>
<select id="date">
<option>Year</option>
<option>1972</option>
<option>1973</option>
...
</select>
<select>
<option>Month</option>
<option>1</option>
<option>2</option>
...
</select>
<select>
<option>Month</option>
<option>January</option>
<option>February</option>
...
</select>
Поле ввода типа textarea должно содержать параметры col и row:
HTML:
<textarea cols="20" rows="5"></textarea>
Замечание в принципе col и row можно оставить пустым, но хорошим тоном считается оформить textarea так, что бы и без CSS вид был приличный.
При визуальном оформлении элементов форм можно пользоваться как чистым CSS, так и внешними скриптами, берущими на себя эту задачу (частично, как будет видно далее).
При оформлении средствами CSS надо учитывать, что:
Рассмотрим NiceForms (http://www.badboy.ro/articles/2007-01-30/niceforms/) на данный момент версии 1.0
Стандартный вид (в IE)
Вид с включенным NiceForms (в IE)
Скрипт занимается подстановкой изображений (края, уголки, чекбоксы, флаги и т.п.) к уже оформленным через CSS элементам форм.
Область действия определяется назначением класса niceform на тэг form, т.е. при порезке под ASP определить, какие блоки оформлять, а какие нет – нельзя: оформлены будут или все формы, или ни одна (хотя, конечно, можно отредактировать родной JS и поменять критерии поиска блока, в котором скрипт будет работать). Имена изображений можно менять в «родном» JS.
Ограничения для всех подобных решений – невозможно сделать оформление для полей типа text, textarea, button, file в Safari.
Есть способ оформить поле ввода типа file, но сделать его одинаково корректно работающим во всех браузерах невозможно, поэтому он рассматриваться не будет, и лучше этого не делать вообще.
|
|
|
Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!