Re: Тест разных элементов
Вт Дек 05, 2017 1:40 pm
Этот кубик не существует
Re: Тест разных элементов
Вт Дек 05, 2017 11:46 am
<div class=ImgField> <img class="image first" src="https://pp.userapi.com/c840421/v840421903/2baed/a0JqNNpoQv8.jpg"/> <img class="image second" src="https://pp.userapi.com/c841234/v841234903/43d9a/vbnzOwNh_ms.jpg"/> </div> |
Re: Тест разных элементов
Вт Дек 05, 2017 11:43 am
<div class=ImgField>
<img class="image first" src="https://pp.userapi.com/c840421/v840421903/2baed/a0JqNNpoQv8.jpg"/>
<img class="image second" src="https://pp.userapi.com/c841234/v841234903/43d9a/vbnzOwNh_ms.jpg"/>
</div>
<img class="image first" src="https://pp.userapi.com/c840421/v840421903/2baed/a0JqNNpoQv8.jpg"/>
<img class="image second" src="https://pp.userapi.com/c841234/v841234903/43d9a/vbnzOwNh_ms.jpg"/>
</div>
Re: Тест разных элементов
Вт Дек 05, 2017 3:54 am
- Код:
<ul class="vertmenu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#top">Пункт 2 ></a>
<ul>
<li><a href="#">подпункт 2.1</a></li>
<li><a href="#">подпункт 2.2</a></li>
<li><a href="#">подпункт 2.3</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
<style type="text/css">
/* настройки основного блока */
ul.vertmenu {
margin: 1px !important;
padding: 0 !important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display: inline-block;
background-color: #3d3e40; /* цвет фон меню */
width: 190px; /* ширина меню */
}
ul.vertmenu li {
list-style: none;
position: relative;
}
ul.vertmenu li a {
padding: 10px 12px 12px;
color: #fff; /* цвет ссылок пунктов */
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #c4c4c4; /* разделительная линия между пунктами */
}
ul.vertmenu li a:hover {
background-color: #b00000; /* цвет фона пунктов и подпунктов при наведении */
}
ul.vertmenu li:first-child a {
border-top: none;
}
ul.vertmenu li:first-child a:hover {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
ul.vertmenu li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
/* Выпадающее подменю */
ul.vertmenu li ul {
display: none;
}
ul.vertmenu li:hover ul {
display: block;
position: absolute;
left: 190px;
top: 1px;
padding-left: 0 !important;
margin: 0 !important;
background-color: #28282a; /* цвет фона подпункта */
width: 150px !important; /* ширина подпунктов */
z-index: 10000;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
ul.vertmenu li:hover ul li:first-child a:hover {
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
ul.vertmenu li:hover ul li:last-child a:hover {
border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
}
</style>
<ul class="vertmenu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#top">Пункт 2 ></a>
<ul>
<li><a href="#">подпункт 2.1</a></li>
<li><a href="#">подпункт 2.2</a></li>
<li><a href="#">подпункт 2.3</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
<style type="text/css">
/* настройки основного блока */
ul.vertmenu {
margin: 1px !important;
padding: 0 !important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display: inline-block;
background-color: #3d3e40; /* цвет фон меню */
width: 190px; /* ширина меню */
}
ul.vertmenu li {
list-style: none;
position: relative;
}
ul.vertmenu li a {
padding: 10px 12px 12px;
color: #fff; /* цвет ссылок пунктов */
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #c4c4c4; /* разделительная линия между пунктами */
}
ul.vertmenu li a:hover {
background-color: #b00000; /* цвет фона пунктов и подпунктов при наведении */
}
ul.vertmenu li:first-child a {
border-top: none;
}
ul.vertmenu li:first-child a:hover {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
ul.vertmenu li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
/* Выпадающее подменю */
ul.vertmenu li ul {
display: none;
}
ul.vertmenu li:hover ul {
display: block;
position: absolute;
left: 190px;
top: 1px;
padding-left: 0 !important;
margin: 0 !important;
background-color: #28282a; /* цвет фона подпункта */
width: 150px !important; /* ширина подпунктов */
z-index: 10000;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
ul.vertmenu li:hover ul li:first-child a:hover {
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
ul.vertmenu li:hover ul li:last-child a:hover {
border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
}
</style>
Re: Тест разных элементов
Вт Дек 05, 2017 3:53 am
<ul class="vertmenu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#top">Пункт 2 ></a>
<ul>
<li><a href="#">подпункт 2.1</a></li>
<li><a href="#">подпункт 2.2</a></li>
<li><a href="#">подпункт 2.3</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
<style type="text/css">
/* настройки основного блока */
ul.vertmenu {
margin: 1px !important;
padding: 0 !important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display: inline-block;
background-color: #3d3e40; /* цвет фон меню */
width: 190px; /* ширина меню */
}
ul.vertmenu li {
list-style: none;
position: relative;
}
ul.vertmenu li a {
padding: 10px 12px 12px;
color: #fff; /* цвет ссылок пунктов */
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #c4c4c4; /* разделительная линия между пунктами */
}
ul.vertmenu li a:hover {
background-color: #b00000; /* цвет фона пунктов и подпунктов при наведении */
}
ul.vertmenu li:first-child a {
border-top: none;
}
ul.vertmenu li:first-child a:hover {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
ul.vertmenu li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
/* Выпадающее подменю */
ul.vertmenu li ul {
display: none;
}
ul.vertmenu li:hover ul {
display: block;
position: absolute;
left: 190px;
top: 1px;
padding-left: 0 !important;
margin: 0 !important;
background-color: #28282a; /* цвет фона подпункта */
width: 150px !important; /* ширина подпунктов */
z-index: 10000;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
ul.vertmenu li:hover ul li:first-child a:hover {
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
ul.vertmenu li:hover ul li:last-child a:hover {
border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
}
</style>
<li><a href="#">Пункт 1</a></li>
<li><a href="#top">Пункт 2 ></a>
<ul>
<li><a href="#">подпункт 2.1</a></li>
<li><a href="#">подпункт 2.2</a></li>
<li><a href="#">подпункт 2.3</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
<style type="text/css">
/* настройки основного блока */
ul.vertmenu {
margin: 1px !important;
padding: 0 !important;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display: inline-block;
background-color: #3d3e40; /* цвет фон меню */
width: 190px; /* ширина меню */
}
ul.vertmenu li {
list-style: none;
position: relative;
}
ul.vertmenu li a {
padding: 10px 12px 12px;
color: #fff; /* цвет ссылок пунктов */
font-size: 13px;
font-weight: bold;
font-family: Arial;
text-decoration: none;
display: block;
border-top: 1px solid #c4c4c4; /* разделительная линия между пунктами */
}
ul.vertmenu li a:hover {
background-color: #b00000; /* цвет фона пунктов и подпунктов при наведении */
}
ul.vertmenu li:first-child a {
border-top: none;
}
ul.vertmenu li:first-child a:hover {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
ul.vertmenu li:last-child a:hover {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
/* Выпадающее подменю */
ul.vertmenu li ul {
display: none;
}
ul.vertmenu li:hover ul {
display: block;
position: absolute;
left: 190px;
top: 1px;
padding-left: 0 !important;
margin: 0 !important;
background-color: #28282a; /* цвет фона подпункта */
width: 150px !important; /* ширина подпунктов */
z-index: 10000;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
ul.vertmenu li:hover ul li:first-child a:hover {
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
ul.vertmenu li:hover ul li:last-child a:hover {
border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
}
</style>
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|