52833.iepjt.513b3c29-8baa-463c-b877-f5ac9f4e1997

表格布局

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!-- content to be placed inside <body>…</body> -->
<article class="tabs">
	<section id="tab3" class="group-tabs">
		<h2>
		<a href="#tab3">Blog</a>
		</h2>
		<div>
			<p>Gastropub Truffaut keytar, leggings pork belly food truck fingerstache wayfarers hashtag twee Tumblr vegan seitan. Fashion axe plaid DIY Helvetica single-origin coffee fap flannel. Biodiesel paleo drinking vinegar ugh, quinoa readymade distillery lo-fi dreamcatcher umami fanny pack kogi flannel swag. Chillwave keffiyeh fanny pack Tumblr, Pinterest Vice Williamsburg DIY kitsch small batch raw denim next level salvia. Kale chips gentrify organic roof party. Cornhole PBR pop-up, Blue Bottle master cleanse Pitchfork Cosby sweater whatever. Leggings hashtag retro messenger bag post-ironic, wolf PBR&B biodiesel fingerstache Godard disrupt shabby chic plaid.</p>
		</div>
	</section>
	<section id="tab2" class="group-tabs">
		<h2>
			<a href="#tab2">Gastro</a>
		</h2>
		<div>
			<p>Hoodie Neutra Tonx wayfarers, typewriter iPhone before they sold out narwhal. Church-key locavore you probably haven't heard of them post-ironic, Terry Richardson readymade authentic Marfa Vice sustainable McSweeney's mustache skateboard beard. Keytar chillwave brunch art party, locavore hoodie messenger bag freegan. Yr polaroid tote bag, ethnic selvage typewriter deep v. Salvia organic Pitchfork, slow-carb fanny pack direct trade you probably haven't heard of them food truck twee master cleanse Helvetica Tonx. Blog Brooklyn Odd Future, Tumblr Truffaut polaroid hashtag scenester Marfa Williamsburg Carles Etsy. Roof party pop-up narwhal, butcher kogi Blue Bottle keytar Wes Anderson Vice Carles cardigan shabby chic before they sold out banh mi yr.</p>
		</div>
	</section>
	<section id="tab1" class="group-tabs">
		<h2>
			<a href="#tab1">Banksy</a>
		</h2>
		<div>
			<p>Art party food truck High Life bicycle rights, ennui vegan Banksy cornhole. Sartorial umami fixie, swag actually food truck Etsy. Pork belly Neutra chambray +1, cardigan fanny pack flexitarian. Pitchfork American Apparel Helvetica jean shorts letterpress. Try-hard beard gentrify, keytar single-origin coffee quinoa drinking vinegar vinyl. Terry Richardson disrupt Tonx, PBR&B bitters beard Schlitz four loko. Ugh meh yr Banksy, hashtag Etsy keffiyeh tote bag pug iPhone sustainable stumptown.</p>
		</div>
	</section>
</article>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

/**css3 Tabs
 */
html {
background: aliceblue;
background: linear-gradient(45deg, #FFF, #afd);
min-height: 100%;
}
 
body {
margin: 180px 0 0 0;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
text-shadow: 0 0.0847em b;
text-rendering: optimizelegibility;
-webkit-font-smoothing: subpixel-antialiased;font: 18px/1.2em Georgia;
}
 
a {
color: #FFF;
text-decoration: none;
}
 
.tabs {
position: relative;
min-height: 10em;
z-index: 0;
margin: 0 auto;
width:23em;
}
 
.group-tabs {
position:absolute;
background-color:#0aa;
width: 22.9em;
height: 380px;
border-radius: 0 0 10px 10px;
 
}
 
.group-tabs div p{
position:relative;
top: -60px;
box-sizing: border-box;
padding: 0 2em ;
background-color: #0aa;
max-height: 300px;
overflow: auto;
}
 
.group-tabs h2 {
background-color:#FFF;
width:5em;
line-height: 2em;
position:relative;
text-align: center;
z-index: 2;
top:-2.9em;
border-radius: 10px 10px 0 0;
}
 
.group-tabs h2 a{
background-color: #fc0;
display:block;
width: 100%;
border-radius: 10px 10px 0 0;
}
 
.group-tabs h2 a:hover{
background-color:#0aa;
}
.group-tabs:first-child h2 {
left: 10.2em;
}
 
.group-tabs:nth-child(2) h2 {
left: 5.1em;
}
 
.group-tabs:last-child h2 a{
background-color:#0aa;
}
 
.group-tabs:target h2 a{
background-color:#0aa;
}
 
.group-tabs:target ~ .group-tabs:last-child h2 a{
background:rgba(255, 204, 0, 1);
}
.one-tab:target ~ .one-tab:last-child h2 {
background: #DDd;
border: 0;
left: -1em;
}
 
.group-tabs:target, .group-tabs:last-child > div{
background-color:#0aa;
z-index: 1;
}
 
.group-tabs h2 a{
transition: all 500ms ease-out;
}