Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем
Блог разработчика
Главная » 2013 » Июнь » 30 » Блоки по горизонтали с закругленными углами внутри блока
11:14 PM
Блоки по горизонтали с закругленными углами внутри блока
<!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>