CSS Tabs

by Mike Pol

HTML

<div class="back">
    <div id="tab3" class="abs tabs block">
        <p class="abs">
            &lt;div <span style="color: #444">id="tab3"</span>&gt;
            <br />...
            <br />&lt;/div&gt;
        </p>
    </div>
    <div id="tab2" class="abs tabs block">
        <p class="abs">
            &lt;div <span style="color: #444">id="tab2"</span>&gt;
            <br />...
            <br />&lt;/div&gt;
        </p>
    </div>
    <div id="tab1" class="abs tabs block">
        <p class="abs">
            &lt;div <span style="color: #444">id="tab1"</span>&gt;
            <br />...
            <br />&lt;/div&gt;
        </p>
    </div>
    <div id="three" class="abs block">
        <a href="#one">#one</a>
        <a href="#two">#two</a>
        <b>#three</b>
        <p class="abs" style="font-size: 24px; top: 32px; left: 34px; color: #ccc">
            &lt;div id="three"&gt;
        </p>
        <p class="abs" style="font-size: 24px; top: 200px; left: 34px; color: #ccc">
            &lt;div id="three"&gt;
        </p>
        <ul class="circle abs">
            <a href="#tab1"><li></li></a>
            <a href="#tab2"><li></li></a>
            <a href="#tab3"><li></li></a>
        </ul>
        <ul class="abs">
            <a href="#tab1"><li>3.1</li></a>
            <a href="#tab2"><li>3.2</li></a>
            <a href="#tab3"><li>3.3</li></a>
        </ul>
    </div>
    <div id="two" class="abs block">
        <a href="#one">#one</a>
        <b><a href="#two">#two</a></b>
        <a href="#tab1">#three</a>
        <p class="abs">
            &lt;div <span style="color: #444">id="two"</span>&gt;
            <br />...
            <br />&lt;/div&gt;
        </p>
    </div>
    <div id="one" class="abs block">
        <b><a href="#one">#one</a></b>
        <a href="#two">#two</a>
        <a href="#tab1">#three</a>
        <p class="abs">
            &lt;div <span style="color: #444">id="one"</span>&gt;
            <br />...
            <br />&lt;/div&gt;
  ...

CSS

.back {
  width: 600px;
  height: 360px;
  background: #ccc;
}
.abs {
  position: absolute;
}
.block {
  top: 26px;
  left: 50px;
  right: 40px;
  bottom: 20px;
  display: none;
}
ul.circle {
  list-style-type:none;
  top: 284px;
  left: 98px;
}
ul {
  list-style-type:none;
  top: 273px;
  left: 114px;
}
li {
  font-size: 24px;
  display: inline;
  padding-right: 36px;
}
ul.circle li {
  border-radius: 30px;
  background-color: #fff;
  border: 2px solid #222;
  font-size: 28px;
  padding-right: 56px;
  padding-top: 24px;
  margin-right: 10px;
  display: inline;
}
a {
  text-decoration: none;
  color: #222;
  margin-right: 20px;
}
a:hover {
  color: #000;
}
a:visited {
  font-weight: bold;
}
.tabs {
  background: #ededed;
  font-family: monostace;
  top: 58px;
  width: 520px;
  height: 270px;
}
.tabs p {
  top: 16px;
  font-family: monostace;
}
p {
  font-size: 44px;
  font-family: monostace;
  top: 48px;
  left: 70px;
  color: #aaa;
  line-height: 44px;
}
#one {
  display: block;
}
div:target {
  display: block;
}
div[id*=tab]:target {
  display: block;
}
div[id*=tab]:target ~ #three {
  display: block;
}
div[id*=t]:target ~ #one {
  display: none;
}