-
Notifications
You must be signed in to change notification settings - Fork 3
/
practice2.html
42 lines (41 loc) · 1.6 KB
/
practice2.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习2</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.square {width: 170px; height: 170px;}
.item {line-height: 50px; text-align: center; vertical-align: middle; display: inline-block; width: 60px; height: 60px; border: 5px solid blue; color: green; position: relative; z-index: 1;}
/* .item > span {} */
.col-2, .col-3 {margin-left: -5px;}
.row-2, .row-3 {margin-top: -5px;}
.item:hover {border: 5px solid red; z-index: 2;}
.wrap {width: 250px; height: 80px; background: lightblue; border-bottom: 5px solid red; padding-left: 10px; padding-bottom: 5px;}
.out {width: 100%; height: 100%; display: table;}
.out > a {display: table-cell; color: black; text-decoration: none; vertical-align: bottom; font-size: 12px; transition: font-size 4s;}
.out > a:hover {font-size: 50px;}
</style>
</head>
<body>
<h1>Test 1</h1>
<div class="square">
<div class="item row-1 col-1">1</div
><div class="item row-1 col-2">2</div
><div class="item row-1 col-3">3</div
><div class="item row-2 col-1">4</div
><div class="item row-2 col-2">5</div
><div class="item row-2 col-3">6</div
><div class="item row-3 col-1">7</div
><div class="item row-3 col-2">8</div
><div class="item row-3 col-3">9</div>
</div>
<div style="margin-top: 100px;"></div>
<h1>Test 2</h1>
<div class="wrap">
<div class="out">
<a href="#" title="订阅博客">订阅博客</span>
</div>
</div>
</body>
</html>