WebLearn/example/HomePage/index.html at master · BoilTask/WebLearn · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        header{
            /* background-color: aqua; */

            width: 100%;
            left: 0;
            top: 0;
            background-color: cyan;
            position: fixed;
            z-index: 1;
        }
        #nav-bar{
            width: 1000px;
            margin: 0 auto;
            /* background-color: cyan; */
        }

        #nav-list{
            margin: 0;
            list-style: none;
            padding: 0;
        }

        #nav-list li{
            display: inline-block;
        }

        #nav-list a{
            display: inline-block;
            padding: 10px 20px;
            text-decoration: none;
        }

        #nav-list a:hover{
            background-color: yellow;
        }

        #banner{
            height: 300px;
            background-color: bisque;
            font-size: 100px;
            text-align: center;
            margin-top: 40px;
            line-height: 300px;
        }

        main{
            width: 1000px;
            margin: 0 auto;
        }

        p{
            text-indent: 2em;
        }

        .pic-item{
            width: 1000px;
        }

        h2{
            padding-top: 40px;
        }

        #classmate-photo{
            height: 400px;
            background-image: url(19.jpg);
            background-size: 100% 100%;

            position: relative;
        }

        #classmate-photo img{
            border-radius: 50%;
            position: absolute;
        }

        #my{
            width: 150px;
            height: 150px;
            left: 30px;
            top: 30px;
        }

        #xjp{
            width: 200px;
            height: 200px;
            left: 400px;
            top: 180px;
        }

        #trump{
            width: 130px;
            height: 130px;
            right: 40px;
            top: 50px;
        }


    </style>
</head>
<body>
    <header>
        <nav id="nav-bar">
            <ul id="nav-list">
                <li><a href="#home">我的家乡</a></li>
                <li><a href="#school">我的学校</a></li>
                <li><a href="#classmate">我的同学</a></li>
            </ul>
        </nav>
    </header>

    <div id="banner">banner</div>

    <main>
        <h2 id="home">我的家乡</h2>
        <p>《赵鹏：再低音一次精选》曾几何时，赵鹏以其首张个人发烧大碟“男声低音炮”而一炮打响，一炮走红，在HIFI乐坛引发巨大轰动，发烧友粉丝不计其数。原来以中低音出色的他，现今音色更为松劲、圆润，独具一格的演唱特色更为成熟自然，他的歌唱动情沉实而不虚浮，激情张扬而不造作，歌声总是那么自然流畅，经历多个春秋与舞台的磨练，明显有了长足的进步。</p>
        <p>《赵鹏：再低音一次精选》曾几何时，赵鹏以其首张个人发烧大碟“男声低音炮”而一炮打响，一炮走红，在HIFI乐坛引发巨大轰动，发烧友粉丝不计其数。原来以中低音出色的他，现今音色更为松劲、圆润，独具一格的演唱特色更为成熟自然，他的歌唱动情沉实而不虚浮，激情张扬而不造作，歌声总是那么自然流畅，经历多个春秋与舞台的磨练，明显有了长足的进步。</p>
        <img class="pic-item" src="19.jpg" alt="">
        <hr>
        <h2 id="school">我的学校</h2>
        <p>《赵鹏：再低音一次精选》曾几何时，赵鹏以其首张个人发烧大碟“男声低音炮”而一炮打响，一炮走红，在HIFI乐坛引发巨大轰动，发烧友粉丝不计其数。原来以中低音出色的他，现今音色更为松劲、圆润，独具一格的演唱特色更为成熟自然，他的歌唱动情沉实而不虚浮，激情张扬而不造作，歌声总是那么自然流畅，经历多个春秋与舞台的磨练，明显有了长足的进步。</p>
        <p>《赵鹏：再低音一次精选》曾几何时，赵鹏以其首张个人发烧大碟“男声低音炮”而一炮打响，一炮走红，在HIFI乐坛引发巨大轰动，发烧友粉丝不计其数。原来以中低音出色的他，现今音色更为松劲、圆润，独具一格的演唱特色更为成熟自然，他的歌唱动情沉实而不虚浮，激情张扬而不造作，歌声总是那么自然流畅，经历多个春秋与舞台的磨练，明显有了长足的进步。</p>
        <img class="pic-item" src="19.jpg" alt="">
        <hr>
        <h2 id="classmate">我的同学</h2>
        <p>《赵鹏：再低音一次精选》曾几何时，赵鹏以其首张个人发烧大碟“男声低音炮”而一炮打响，一炮走红，在HIFI乐坛引发巨大轰动，发烧友粉丝不计其数。原来以中低音出色的他，现今音色更为松劲、圆润，独具一格的演唱特色更为成熟自然，他的歌唱动情沉实而不虚浮，激情张扬而不造作，歌声总是那么自然流畅，经历多个春秋与舞台的磨练，明显有了长足的进步。</p>
        <div id="classmate-photo">
            <img src="my.jpg" id="my">
            <img src="xjp.jpg" id="xjp">
            <img src="trump.jpg" id="trump">
        </div>

    </main>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


</body>
</html>