Четверг, 2024-03-28, 7:17 PM

Поиск
Меню
Категории раздела
PHP [40]
Cкриптовый язык программирования общего назначения
MySQL [1]
Cвободная система управления базами данных (СУБД)
jQuery [8]
Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
CSS [60]
Cредство описания, оформления внешнего вида веб-страниц
JavaScript [161]
Прототипно-ориентированный скриптовый язык программирования
Веб-дизайн [2]
Проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений
RegExp [1]
Регулярные выражения
SEO [2]
Продвижение и раскрутка сайтов. Заработок в сети.
C/C++ [3]
Компилируемый статически типизированный язык программирования общего назначения
Windows [4]
Программистам под ОС MS Windows
HGE [2]
Игровой движок HGE (Haaf's Game Engine)
Игровой дизайн [8]
Психология дизайна игр
Разработка игр [2]
Общие моменты, относящиеся к геймдеву
wxWidgets [2]
Библиотека инструментов для разработки кроссплатформенных приложений
PureBasic [10]
Кроссплатформенный компилятор и IDE для быстрой разработки
VST [6]
Steinberg's Virtual Studio Technology (VST)
iOS [1]
Mобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple
Пиксельная графика [9]
Pixel art и все, что с ним связано
libGDX [2]
Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем


Блог разработчика

Главная » 2013 » Июнь » 30 » Блоки по горизонтали с закругленными углами внутри блока
11:14 PM
Блоки по горизонтали с закругленными углами внутри блока
Cмотреть пример
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <title>
 Блоки три по горизонтали с закругленными углами внутри блока с закругленными углами через CSS
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style type="text/css">
.zsnazzy {width:740px; margin:0 0 100px 5px;}
 .xsnazzy h1, .zsnazzy h1 {margin:0; font-size:1.2em; padding:0 10px 5px 10px; border-bottom:1px solid #444;}
 .xsnazzy p, .zsnazzy p { margin:0; padding:5px 5px 5px 10px; font-size:12px;}
 .xsnazzy {background: transparent; width:240px; float:left; margin:0 3px; display:inline;}
 .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
 .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
 .xb1, .xb2, .xb3 {height:1px;}
 .xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #444; border-right:1px solid #444;}
 .xb1 {margin:0 5px; background:#444;}
 .xb2 {margin:0 3px; border-width:0 2px;}
 .xb3 {margin:0 2px;}
 .xb4 {height:2px; margin:0 1px;}
 .xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;}
 * html .xboxcontent {height:1px;}
 .color_a {background:#c9ba65; color:#fff;}
 .color_b {background:#d4d8bd; color:#000;}
 .color_c {background:#758279; color:#fff;}
 .color_d {background:#b2ab9b; color:#000;}
 </style>
 </head>
 <body>
 <div class="zsnazzy">
 <div class="xboxcontent">
 <h1 class="color_d">
 The snazzy border container
 </h1><br>
 <p>
 This is the outer snazzy box containing the three snazzy boxes below.
 </p><br>
 <div class="xsnazzy">
 <div class="xboxcontent">
 <h1 class="color_a">
 Blah Blah Title
 </h1>
 <p>
 You are not currently logged in.
 </p>
 <p>
 If you don't have a login you can <a href="#nogo">register here</a>.
 </p>
 <p>
 If you have one, then LOGIN <a href="#nogo">here</a>.
 </p>
 <p>
 If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click <a href="#nogo">here for a demo</a>.
 </p>
 </div>
 </div>
 <div class="xsnazzy">
 <div class="xboxcontent">
 <h1 class="color_b">
 Blah Blah Title
 </h1>
 <p>
 You are not currently logged in.
 </p>
 <p>
 If you don't have a login you can <a href="#nogo">register here</a>.
 </p>
 <p>
 If you have one, then LOGIN <a href="#nogo">here</a>.
 </p>
 <p>
 If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click <a href="#nogo">here for a demo</a>.
 </p>
 </div>
 </div>
 <div class="xsnazzy">
 <div class="xboxcontent">
 <h1 class="color_c">
 Blah Blah Title
 </h1>
 <p>
 You are not currently logged in.
 </p>
 <p>
 If you don't have a login you can <a href="#nogo">register here</a>.
 </p>
 <p>
 If you have one, then LOGIN <a href="#nogo">here</a>.
 </p>
 <p>
 If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click <a href="#nogo">here for a demo</a>.
 </p>
 </div>
 </div><br class="clear">
 <p>
 The end
 </p>
 </div>
 </div>
 </body>
</html>
Категория: CSS | Просмотров: 668 | Добавил: poster | Теги: CSS, пример | Рейтинг: 0.0/0

Поблагодарить автора



Комментарии