task/task0001.html at master · windf1sh/task · GitHub

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
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task001</title>
    <link rel="stylesheet" href="styles/task0001.css">
</head>
<body>
    <!--任务1~2-->
    <!--一级标题-->
    <h1>windf1sh</h1>

    <hr>

    <!--无序列表-->
    <ul>
        <li><a href="task0001.html">HomePage</a></li>
        <li><a href="https://weibo.com/3504236811/profile?topnav=1&wvr=6&is_all=1">Blog</a></li>
    </ul>

    <hr>

    <!--二级标题-->
    <h2>我是h2</h2>

    <hr>

    <!--段落-->
    <p>我是段落</p>

    <hr>

    <!--图片-->
    <img src="task0001/img/SlamDunk.JPG" alt="SlamDunk">

    <hr>
    <hr>

    <!--任务6-->
    <!--div居中-->
    <div class="center">
        <div class="center1"></div>
        <hr>
        <div class="center2"></div>
    </div>

    <hr>

    <!--圆角-->
    <div class="container">
        <div class="top"></div>
        <div class="content">
            <p>利用border画出梯形，模拟圆角</p>
        </div>
        <div class="bottom"></div>
    </div>

    <hr>

    <!--左侧固定，右侧自适应-->
    <div class="two1">
        <div class="left1"></div>
        <div class="right1"></div>
    </div>

    <hr>

    <div class="two2">
        <div class="left2"></div>
        <div class="right2"></div>
    </div>

    <hr>

    <!--左右两侧固定，中间自适应-->
    <header>头部</header>
    <div class="wrapper1">
        <div class="middle">中部</div>
        <div class="left">左部</div>
        <div class="right">右部</div>
    </div>
    <footer>脚部</footer>

    <hr>

    <header>头部</header>
    <div class="wrapper2">
        <div class="col main">
            <div class="main-wrap">main</div>
        </div>
        <div class="col sub">sub</div>
        <div class="col extra">extra</div>
    </div>
    <footer>脚部</footer>

    <hr>

    <!--自适应浮动布局-->
    <div class="float-container">
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
        <div class="float-element"></div>
    </div>

</body>
</html>