html:
<table class="table"><tr><td>content</td></tr></table>
css:
.table{
border:none;
margin:0;
padding:0;
width:auto;
}
.table td{
border:1px solid #cccccc;
border-collapse:collapse;
padding:4px;
vertical-align:top;
}
четверг, января 24, 2008
Оформляем таблицу средствами css
Таблица тянется по ширине в зависимости от наполнения.
html:
css:
html:
css:
Скрипт - вертикально раскрывающееся меню
Скрипт - вертикально раскрывающееся меню, по клику на элемент меню другие сворачиваются
Содержимое файла script.js:
В head вашего html линкуем созданный файл скрипта:
В body закрываем все открымые элементы подменю
А вот и само меню:
Содержимое файла script.js:
var id_menu = new Array('sub_menu_1','sub_menu_2');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}В head вашего html линкуем созданный файл скрипта:
<script language="JavaScript" type="text/javascript" src="scripts/script.js"></script>
В body закрываем все открымые элементы подменю
<body onload="allclose()">
А вот и само меню:
<ul class="leftmenu">
<li><a href="#" onClick="openMenu('sub_menu_1');return(false)">Законодательство</a>
<ul id="sub_menu_1" >
<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="#" onClick="openMenu('sub_menu_2');return(false)" >Структуры и ведомства</a>
<ul id="sub_menu_2" >
<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>
</ul>
Предварительная загрузка изображений средствами css (Preload Images with CSS)
Этот метод позволяет избежать использования javascript для предварительной загрузки изображений.
Метод достаточно прост и эффективен и состоит из двух частей css и html код.
CSS:
HTML:
Как это работает?
Браузер загружает preloadedImages css как фоновые изображения не отображая их, но помещает их в кэш браузера, что позволяет в последствии быстро обращаться в предварительно загруженным изображениям.
Метод достаточно прост и эффективен и состоит из двух частей css и html код.
CSS:
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}HTML:
<div id="preloadedImages"></div>
Как это работает?
Браузер загружает preloadedImages css как фоновые изображения не отображая их, но помещает их в кэш браузера, что позволяет в последствии быстро обращаться в предварительно загруженным изображениям.
Подписаться на:
Комментарии (Atom)