招聘网中的简历模板

案例概述

案例结构

简历主页：包含工作经历、专业技能、教育经历、综合概述等部分。
联系页：提供联系信息表单。
相册页：展示个人相册。

设计效果

使用 Bootstrap 框架构建响应式简历模板，简洁、专业。

设计准备

包含 Bootstrap 和 jQuery 库。

设计左侧信息栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--左侧信息栏-->
<div class="col-sm-12 col-md-3 left">
    <div class="row justify-content-between">
        <div class="col-6 col-sm-5 col-md-12 p-4">
            <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                    class="img-fluid p-2 border">
            <h3 class="text-white text-center">白鹭</h3>
            <h5 class="text-center">求职意向:网站开发</h5>
        </div>
        <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
            <h4>出生年月</h4>
            <p>1995年10月10号</p>
            <h4>联系电话</h4>
            <p>12343212345</p>
            <h4>电子邮箱</h4>
            <p>abcd1234@qq.com</p>
            <h4>联系地址</h4>
            <p>北京市朝阳区</p>
        </div>
    </div>
</div>

设计导航条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--导航栏-->
<div class="my-4">
    <ul class="clearfix">
        <li class="float-sm-left">
            <i class="fa fa-user-circle-o fa-2x">
                <a href="index.html" class="ml-2">个人履历</a>
            </i>
        </li>
        <li class="float-sm-left mx-sm-5">
            <i class="fa fa-envelope-o fa-2x">
                <a href="contact.html" class="ml-2">请给我发邮件</a>
            </i>
        </li>
        <li class="float-sm-left">
            <i class="fa fa-home fa-2x">
                <a href="photo.html" class="ml-2">照片</a>
            </i>
        </li>
    </ul>
</div>

设计主页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body class="container">
    <div class="row"></div>
    <!--左侧信息栏-->
    <div class="col-sm-12 col-md-3 left"></div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--导航栏-->
        <div class="my-4">
        <!--工作经历-->
        <h5 class="color1">工作经历</h5>
        <div class="px-5 py-2">
        <!--专业技能-->
        <h5 class="color2">专业技能</h5>
        <div class="px-5 py-2">
        <!--教育经历-->
        <h5 class="color3">教育经历</h5>
        <div class="px-5 py-2">
        <!--综合概述-->
        <h5 class="color4">综合概述</h5>
        <div class="px-5 py-2">
    </div>
</body>

工作经历

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
<!--工作经历-->
<h5 class="color1">工作经历</h5>
<div class="px-5 py-2">
    <table class="table">
        <thead class="table-success">
        <tr>
            <th scope="col">#</th>
            <th scope="col">时间</th>
            <th scope="col">单位</th>
            <th scope="col">职位</th>
        </tr>
        </thead>
        <tbody class="table-info">
        <tr>
            <th>1</th>
            <td>2018/8-2019/10</td>
            <td>八面恒通网络公司</td>
            <td>软件测试工程师</td>
        </tr>
        <tr>
            <th>2</th>
            <td>2019/11-2020/10</td>
            <td>千古网络科技公司</td>
            <td>软件工程师</td>
        </tr>
        <tr>
            <th>3</th>
            <td>2020/12-至今</td>
            <td>冰原网络科技公司</td>
            <td>前端工程师</td>
        </tr>
        </tbody>
    </table>
</div>

专业技能

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
<!--专业技能-->
<h5 class="color2">专业技能</h5>
<div class="px-5 py-2">
    <!--嵌套格栅-->
    <div class="row">
        <div class="col-6">
            <!--使用卡片组件-->
            <div class="card border-primary text-primary">
                <div class="card-header border-primary">擅长的技能</div>
                <div class="card-body">
                    <p class="card-text">
                        HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card border-success text-success">
                <div class="card-header border-success">熟悉的技能</div>
                <div class="card-body">
                    <p class="card-text">C语言、C++、C#、Java、Oracle、Python</p>
                </div>
            </div>
        </div>
    </div>
</div>

教育经历

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
<!--教育经历-->
<h5 class="color3">教育经历</h5>
<div class="px-5 py-2">
    <ul class="list-group">
        <li class="list-group-item list-group-item-warning">
            <div class="row">
                <div class="col-4">时间</div>
                <div class="col-4">学校</div>
                <div class="col-4">专业</div>
            </div>
        </li>
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div class="col-4">2013/6-2017/6</div>
                <div class="col-4">新疆大学</div>
                <div class="col-4">计算机科学与技术</div>
            </div>
        </li>
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div class="col-4">2017/8-2018/6</div>
                <div class="col-4">软件开发公司</div>
                <div class="col-4">web前端工程师</div>
            </div>
        </li>
    </ul>
</div>

综合概述

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
<!--综合概述-->
<h5 class="color4">综合概述</h5>
<div class="px-5 py-2">
    <div id="accordion">
        <div class="card">
            <div class="card-header">
                <a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">
                            1、英语等级证书：大学四、六级证书（CET4,CET6）。
                        </li>
                        <li class="list-group-item list-group-item-info">
                            2、计算机证书：全国计算机二级及三级和四级。
                        </li>
                        <li class="list-group-item list-group-item-info">
                            3、学校证书包括：奖学金证书、三好学生、优秀毕业生、优秀班干部。
                        </li>
                        <li class="list-group-item list-group-item-info">
                            4、财务类证书：注册会计师。
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力。有良好的分析，解决问题的思维。诚实、稳重、勤奋、积极上进，
                    拥有丰富的大中型企业管理经验，有较强的团队管理能力，良好的沟通协调组织能力，敏锐的洞察力，自信是我的魅力。
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
                        <li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
                        <li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
                        <li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
                        <li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

设计联系页

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">

</head>
<body class="container">
<div class="row">
    <!--    左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                     class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4>
                <p>1995年10月10号</p>
                <h4>联系电话</h4>
                <p>12343212345</p>
                <h4>电子邮箱</h4>
                <p>abcd1234@qq.com</p>
                <h4>联系地址</h4>
                <p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--        导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x">
                        <a href="index.html" class="ml-2">个人履历</a>
                    </i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x">
                        <a href="contact.html" class="ml-2">请给我发邮件</a>
                    </i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x">
                        <a href="photo.html" class="ml-2">照片</a>
                    </i>
                </li>
            </ul>
        </div>
        <!--        联系我-->
        <h5 class="color1">联系我</h5>
        <div class="px-5 py-5">
            <div class="pr-5">
                <div class="form-group">
                    <input type="text" class="form-control form-control-lg" placeholder="收件人">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control form-control-lg" placeholder="收件人邮箱">
                </div>
                <div class="form-group">
                    <textarea rows="6" class="form-control form-control-lg" placeholder="发送的内容"></textarea>
                    <button type="submit" class="btn btn-lg btn-primary">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
    <!--    左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                     class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4>
                <p>1995年10月10号</p>
                <h4>联系电话</h4>
                <p>12343212345</p>
                <h4>电子邮箱</h4>
                <p>abcd1234@qq.com</p>
                <h4>联系地址</h4>
                <p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--        导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x">
                        <a href="index.html" class="ml-2">个人履历</a>
                    </i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x">
                        <a href="contact.html" class="ml-2">请给我发邮件</a>
                    </i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x">
                        <a href="photo.html" class="ml-2">照片</a>
                    </i>
                </li>
            </ul>
        </div>
<!--        生活照-->
        <h5 class="color1">生活照</h5>
        <div class="px-5 py-5 photo">
            <div class="card-columns">
                <div class="card bg-primary p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923294088&di=c781b4b47548a8c48332baf9b568b9db&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fb%2F62%2Ff0de1477973.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-dark p-3">
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3415915083,1709426510&fm=15&gp=0.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-info p-3">
                    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3744498486,1368806164&fm=15&gp=0.jpg" class="card-img-top" alt="">
                </div>
                <div class="card bg-success p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923294087&di=f9c62d249f6d07788a7646108539b666&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F08%2F20161208132804_2JGBW.thumb.700_0.jpeg" class="card-img-top" alt="">
                </div>
                <div class="card bg-danger p-3">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592923345009&di=521adb0e65a96df02a15489ed595f836&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2249283653%2C1480830410%26fm%3D214%26gp%3D0.jpg" class="card-img-top" alt="">
                </div>
            </div>
        </div>
    </div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

完整代码

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
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字体图标文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
    <!--    左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="userPhoto"
                     class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4>
                <p>1995年10月10号</p>
                <h4>联系电话</h4>
                <p>12343212345</p>
                <h4>电子邮箱</h4>
                <p>abcd1234@qq.com</p>
                <h4>联系地址</h4>
                <p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 right p-0">
        <!--        导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x">
                        <a href="index.html" class="ml-2">个人履历</a>
                    </i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x">
                        <a href="contact.html" class="ml-2">请给我发邮件</a>
                    </i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x">
                        <a href="photo.html" class="ml-2">照片</a>
                    </i>
                </li>
            </ul>
        </div>
        <!--        工作经历-->
        <h5 class="color1">工作经历</h5>
        <div class="px-5 py-2">
            <table class="table">
                <thead class="table-success">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">时间</th>
                    <th scope="col">单位</th>
                    <th scope="col">职位</th>
                </tr>
                </thead>
                <tbody class="table-info">
                <tr>
                    <th>1</th>
                    <td>2018/8-2019/10</td>
                    <td>八面恒通网络公司</td>
                    <td>软件测试工程师</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>2019/11-2020/10</td>
                    <td>千古网络科技公司</td>
                    <td>软件工程师</td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>2020/12-至今</td>
                    <td>冰原网络科技公司</td>
                    <td>前端工程师</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--        专业技能-->
        <h5 class="color2">专业技能</h5>
        <div class="px-5 py-2">
            <!--            嵌套格栅-->
            <div class="row">
                <div class="col-6">
                    <!--                    使用卡片组件-->
                    <div class="card border-primary text-primary">
                        <div class="card-header border-primary">擅长的技能</div>
                        <div class="card-body">
                            <p class="card-text">
                                HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-success text-success">
                        <div class="card-header border-success">熟悉的技能</div>
                        <div class="card-body">
                            <p class="card-text">C语言、C++、C#、Java、Oracle、Python</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        教育经历-->
        <h5 class="color3">教育经历</h5>
        <div class="px-5 py-2">
            <ul class="list-group">
                <li class="list-group-item list-group-item-warning">
                    <div class="row">
                        <div class="col-4">时间</div>
                        <div class="col-4">学校</div>
                        <div class="col-4">专业</div>
                    </div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row">
                        <div class="col-4">2013/6-2017/6</div>
                        <div class="col-4">新疆大学</div>
                        <div class="col-4">计算机科学与技术</div>
                    </div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row">
                        <div class="col-4">2017/8-2018/6</div>
                        <div class="col-4">软件开发公司</div>
                        <div class="col-4">web前端工程师</div>
                    </div>
                </li>
            </ul>
        </div>
        <!--        综合概述-->
        <h5 class="color4">综合概述</h5>
        <div class="px-5 py-2">
            <div id="accordion">
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a>
                    </div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">
                                    1、英语等级证书：大学四、六级证书（CET4,CET6）。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    2、计算机证书：全国计算机二级及三级和四级。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    3、学校证书包括：奖学金证书、三好学生、优秀毕业生、优秀班干部。
                                </li>
                                <li class="list-group-item list-group-item-info">
                                    4、财务类证书：注册会计师。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力。有良好的分析，解决问题的思维。诚实、稳重、勤奋、积极上进，
                            拥有丰富的大中型企业管理经验，有较强的团队管理能力，良好的沟通协调组织能力，敏锐的洞察力，自信是我的魅力。
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
                                <li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
                                <li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
                                <li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
                                <li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

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
html{
    min-width: 400px;
}
.left{
    background: #4BCFE9;
    top: 0;
}
.right{
    margin-bottom: 120px;
}
@media (max-width: 768px){
/*    使用媒体查询定义字体大小*/
/*    当屏幕尺寸小于768px时，页面的根字体大小为14px*/
    html{
        font-size: 14px;
    }
}

@media (min-width: 768px) {
/*    当屏幕尺寸大于768px时，页面的根字体大小为15px*/
    html{
        font-size: 15px;
    }
    .left{
        position: fixed;
        bottom: 0;
        left: 0;
    }
    .right{
        margin-left: 25%;
    }
}
ul{
    list-style: none;
}
i{
    color: #6ecadc;
}
.color1{
    background: #00aa88;
    width: 110px;
    border-radius: 5px;
    text-align: center;
}
.color2{
    background: #2f6f9f;
    width: 110px;
    border-radius: 5px;
    text-align: center;
}
.color3{
    background: #5bc0de;
    width: 110px;
    border-radius: 5px;
    text-align: center;
}
.color4{
    background: #6f42c1;
    width: 110px;
    border-radius: 5px;
    text-align: center;
}