相册类博客项目
案例概述
案例结构
- 首页：展示相册内容，用户可以浏览照片并点击查看详情。
- 分类页：按类别展示相册内容。
- 博客：展示博客文章。
- 联系页：提供联系表单，用户可以填写并提交。
设计效果
使用 Bootstrap 框架构建响应式页面。
相册图片通过 Swipebox 插件实现灯箱效果。
设计准备
包含 Bootstrap 和 jQuery 库。
使用 Swipebox 插件实现灯箱效果。
设计导航栏
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
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="index.html" class="navbar-brand"><img
src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
width="45" alt=""></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="index.html" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="class.html" class="nav-link">分类</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">博客</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">联系</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-inline mr-sm-2" placeholder="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
|
设计相册展示
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
|
<div class="container">
<div id="div1">
<ul id="ul1" class="py-3">
<li>
<a href="http://pic1.win4000.com/wallpaper/3/587084e3946ee.jpg" class="swipebox"
title="2028年">
<img src="http://pic1.win4000.com/wallpaper/3/587084e3946ee.jpg" alt="image"
class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/c/54783c8bb636f.jpg" class="swipebox"
title="2028年">
<img src="http://pic1.win4000.com/wallpaper/c/54783c8bb636f.jpg" alt="image"
class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/a/53d719b21844a.jpg" class="swipebox"
title="2028年">
<img src="http://pic1.win4000.com/wallpaper/a/53d719b21844a.jpg" alt="image"
class="img-fluid">
</a>
</li>
<li>
<a href="http://img9.51tietu.net/pic/2019-091209/necofec0sfxnecofec0sfx.jpg"
class="swipebox" title="2028年">
<img src="http://img9.51tietu.net/pic/2019-091209/necofec0sfxnecofec0sfx.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://img1.imgtn.bdimg.com/it/u=1432138035,2461939066&fm=26&gp=0.jpg"
class="swipebox" title="2028年">
<img src="http://img1.imgtn.bdimg.com/it/u=1432138035,2461939066&fm=26&gp=0.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/7/582e739e9fdb0.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/7/582e739e9fdb0.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/9/541aa7314350b.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/9/541aa7314350b.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/3/541aaa017fdca.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/3/541aaa017fdca.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/8/52db3eb024aac.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/8/52db3eb024aac.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/2018-07-17/5b4ddcd2e2618.jpg?down"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/2018-07-17/5b4ddcd2e2618.jpg?down"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/f/52980c674ea98.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/f/52980c674ea98.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/2/529bf93c4debe.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/2/529bf93c4debe.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://pic1.win4000.com/wallpaper/2018-11-03/5bdd0a810f35a.jpg"
class="swipebox" title="2028年">
<img src="http://pic1.win4000.com/wallpaper/2018-11-03/5bdd0a810f35a.jpg"
alt="image" class="img-fluid">
</a>
</li>
<li>
<a href="http://img9.51tietu.net/pic/2019-090807/vnc5m2oqibtvnc5m2oqibt.jpg"
class="swipebox" title="2028年">
<img src="http://img9.51tietu.net/pic/2019-090807/vnc5m2oqibtvnc5m2oqibt.jpg"
alt="image" class="img-fluid">
</a>
</li>
</ul>
<div class="btn-box text-center mb-2">
<a href="javascript:void(0);" id="btn1" class="mr-5"><i class="fa fa-hand-o-left fa-2x"></i></a>
<a href="javascript:void(0);" id="btn2" class=""><i class="fa fa-hand-o-right fa-2x"></i></a>
</div>
</div>
</div
|
添加Swipebox 灯箱插件
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
| <!--swipebox插件-->
<script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
<script src="swipebox-master/src/js/jquery.swipebox.js"></script>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var speed = 2;
oUl.innerHTML += oUl.innerHTML;
var oLi = document.getElementsByTagName('li');
oUl.style.width = oLi.length * 160 + 'px';
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
function move() {
if (oUl.offsetLeft < -(oUl.offsetWidth / 2)) {
oUl.style.left = 0;
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
oBtn1.addEventListener('click', function () {
speed = -2;
}, false);
oBtn2.addEventListener('click', function () {
speed = 2;
}, false);
var timer = setInterval(move, 30)
};
jQuery(function ($) {
$('.swipebox').swipebox({
useCss: true,
useSVG: true,
initialIndexOnArray: 0,
hideCloseButtonOnMobile: false,
removeBarsOnMobile: true,
hideBarsDelay: 3000,
loopAtEnd: false,
});
});
</script>
|
分类页
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
| <!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>
<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="./swipebox-master/src/css/swipebox.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="index.html" class="navbar-brand"><img
src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
width="45" alt=""></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="index.html" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="class.html" class="nav-link">分类</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">博客</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">联系</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-inline mr-sm-2" placeholder="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<div class="container">
<div class="menu bg-dark">
<ul class="nav nav-pills my-4 p-2" id="myTab">
<li>
<a href="#pills-home" class="ab" data-toggle="pill">2020年</a>
</li>
<li>
<a href="#pills-profile" data-toggle="pill">2019年</a>
</li>
<li>
<a href="#pills-contact" data-toggle="pill">2018年</a>
</li>
<li>
<a href="javascript:void(0);">更多</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="pills-home">
<div class="row list">
<div class="col-4">
<a href="http://pic1.win4000.com/wallpaper/4/53a2af0995d64.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/4/53a2af0995d64.jpg" alt="image" class="img-fluid">
</a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/0/5913fef6d84f5.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/0/5913fef6d84f5.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
<img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg" class="swipebox" title="2020年">
<img src="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg"
alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" class="swipebox" title="2020年">
<img src="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" alt="image" class="img-fluid"></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile">
<div class="row list">
<div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
<img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/7/56e10fb2b70a1.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg" class="swipebox" title="2020年">
<img src="http://i1.sinaimg.cn/gm/j/i/2009-02-19/U1850P115T41D160871F757DT20090219144901.jpg"
alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/6/58df4ea00fdee.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" class="swipebox" title="2020年">
<img src="http://img01.3dmgame.com/uploads/allimg/140815/153_140815145803_3.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" class="swipebox" title="2020年">
<img src="http://pic1.win4000.com/wallpaper/7/56a9d2656071b.jpg" alt="image" class="img-fluid"></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-contact">
<div class="row list">
<div class="col-4"><a href="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" class="swipebox" title="2020年">
<img src="http://img.3dmgame.com/uploads/allimg/130515/153_130515144056_1.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="https://n.sinaimg.cn/sports/2_img/dfic/a7a65bdb/213/w2048h1365/20221027/9897-eb89f2eb73cdcd759962de7779f71867.jpg" class="swipebox" title="2020年">
<img src="https://n.sinaimg.cn/sports/2_img/dfic/a7a65bdb/213/w2048h1365/20221027/9897-eb89f2eb73cdcd759962de7779f71867.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="https://n.sinaimg.cn/news/1_img/upload/72ef1310/150/w2048h1302/20240819/64d2-1b6383d20923474d2819dae360b5b86c.jpg" class="swipebox" title="2020年">
<img src="https://n.sinaimg.cn/news/1_img/upload/72ef1310/150/w2048h1302/20240819/64d2-1b6383d20923474d2819dae360b5b86c.jpg"
alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="https://n.sinaimg.cn/news/1_img/upload/72ef1310/213/w2048h1365/20240819/8747-d6868a51c2bee3641b48783c6ee74745.jpg" class="swipebox" title="2020年">
<img src="https://n.sinaimg.cn/news/1_img/upload/72ef1310/213/w2048h1365/20240819/8747-d6868a51c2bee3641b48783c6ee74745.jpg" alt="image" class="img-fluid"></a>
</div>
<div class="col-4"><a href="https://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20200907/0486-iytwsca6539018.jpg" class="swipebox" title="2020年">
<img src="https://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20200907/0486-iytwsca6539018.jpg" alt="image"
class="img-fluid"></a>
</div>
<div class="col-4"><a href="https://n.sinaimg.cn/ent/4_img/upload/7f7f490d/242/w608h434/20230925/21ee-2406a71eda5614161efeb2a25e7449fb.jpg" class="swipebox" title="2020年">
<img src="https://n.sinaimg.cn/ent/4_img/upload/7f7f490d/242/w608h434/20230925/21ee-2406a71eda5614161efeb2a25e7449fb.jpg" alt="image" class="img-fluid"></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
<script src="swipebox-master/src/js/jquery.swipebox.js"></script>
<script>
jQuery(function ($) {
$('.swipebox').swipebox({
useCSS:true,
useSVG:true,
initialIndexOnArray:0,
hideCloseButtonOnMobile:false,
removeBarsOnMobile:true,
hideBarsDelay:3000,
loopAtEnd:false,
});
});
</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
88
89
90
91
92
93
94
95
96
97
| <!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>
<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">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="index.html" class="navbar-brand"><img
src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
width="45" alt=""></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="index.html" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="class.html" class="nav-link">分类</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">博客</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">联系</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-inline mr-sm-2" placeholder="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<div class="border row bg-white m-0 px-3 pt-4 pb-5 blog-border">
<div class="col-8">
<div>
<h4>
<i class="fa fa-smile-o mr-2"></i>
<span>我的足迹</span>
</h4>
<hr>
<div class="mb-3">
<i class="fa fa-user-o"></i><span class="ml-1 mr-2">欢欢</span>
<i class="fa fa-clock-o"></i><span class="ml-1 mr-2">15天前</span>
<a href="javascript:void(0);" class="ml-1 mr-2"><i class="fa fa-commenting-o">156条</i></a>
</div>
<img src="http://img0.imgtn.bdimg.com/it/u=1101084170,1274803972&fm=26&gp=0.jpg" alt=""
class="img-fluid mb-3">
</div>
<p class="retract">
一个人旅行，一台相机足以、不理会繁杂的琐事，自由自在地，去体验一个城市、一段故事、留下一片欢笑。
</p>
</div>
<div class="col-4">
<h4 class="shadow mb-4">
<span class="mx-2">推荐旅游胜地</span><i class="fa fa-bicycle"></i>
</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item border-top-0">
<i class="fa fa-hand-o-right mr-3"></i>神秘奇幻、佳景荟萃的九寨沟
</li>
<li class="list-group-item">
<i class="fa fa-hand-o-right mr-3"></i>奇伟俏丽、灵秀多姿的黄山
</li>
<li class="list-group-item">
<i class="fa fa-hand-o-right mr-3"></i>青山碧水、银滩巨浪的三亚
</li>
<li class="list-group-item">
<i class="fa fa-hand-o-right mr-3"></i>山青、水秀、洞奇、石美的桂林山水
</li>
<li class="list-group-item">
<i class="fa fa-hand-o-right mr-3"></i>山水秀丽、景色宜人的杭州西湖
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <!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>
<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">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="index.html" class="navbar-brand"><img
src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4031816500,2465166800&fm=26&gp=0.jpg"
width="45" alt=""></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="index.html" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="class.html" class="nav-link">分类</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">博客</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">联系</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" class="form-inline mr-sm-2" placeholder="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<div class="row border bg-white m-0 px-3 pt-4 pb-5 blog-border">
<div class="col-12 col-lg-8 pb-5">
<h4>
<i class="fa fa-volume-control-phone mr-2"></i>
<span>你的联系方式</span>
</h4>
<hr>
<form>
<div class="form-group">
<input type="text" class="form-control w-75" placeholder="姓名" data-toggle="popover" data-placement="right" data-content="请输入你的姓名">
</div>
<div class="form-group">
<input type="email" class="form-control w-75" placeholder="邮箱" data-toggle="popover" data-placement="right" data-content="请输入你的邮箱">
</div>
<div class="form-group">
<input type="tel" class="form-control w-75" placeholder="手机号" data-toggle="popover" data-placement="right" data-content="请输入你的手机号">
</div>
<div class="form-group">
<textarea class="form-control w-75" rows="5" placeholder="留言板" data-toggle="popover" data-placement="right" data-content="留言板"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<div class="col-12 col-lg-4">
<h4 class="shadow mb-4">
<i class="fa fa-phone-square mx-2"></i>
<span>联系我们</span>
</h4>
<div class="alert alert-primary">
<i class="fa fa-qq mr-3"></i>
<span>867940410</span>
</div>
<div class="alert alert-info">
<i class="fa fa-weixin mr-3"></i>
<span>刘飞</span>
</div>
<div class="alert alert-success">
<i class="fa fa-mobile fa-2x mr-3"></i>
<span>12345678912</span>
</div>
<div class="alert alert-danger">
<i class="fa fa-map-maker fa-2x mr-3"></i>
<span>北京千古摄影工作室</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</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
| html{
background-color: lavender;
}
#div1{
width: 100%;
height: 300px;
margin: 150px auto;
position: relative;
overflow: hidden;
border: 2px solid white;
background-color: white;
}
#div1 ul{
height: 240px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
list-style: none;
background-color: white;
}
#div1 ul li{
float: left;
width: 360px;
list-style: none;
margin-left: 1.1rem;
}
.btn-box{
position: relative;
left: 0;
top: 255px;
}
#div1 ul li img{
width: 360px;
}
.menu{
width: 275px;
border-radius: 10px;
}
#myTab{
list-style: none;
}
#myTab li{
float: left;
margin-left: 15px;
}
#myTab li a{
color: #919191;
}
.ab{
color: #00A862!important;
}
.list{
min-width: 600px;
}
.list div{
margin-bottom: 20px;
}
.blog-border{
border-radius: 10px;
}
.retract{
text-indent: 2rem;
}
.shadow{
line-height: 48px;
padding: 0 10px;
margin-bottom: 20px;
border-top: 2px solid #d7d7d7;
border-bottom: 2px solid #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
|
