设计流行企业网站
网站概述
在这一部分，我们描述了即将设计的网站的目的、目标用户和基本功能。这是项目的总体概述，帮助读者理解项目的方向和需求。
文档内容：
- 项目名称： 流行企业网站
- 目标用户： 企业客户、访客
- 主要功能：
- 展示公司简介和服务
- 提供导航链接至不同的服务页面
- 用户登录和账户管理
- 响应式设计，适配各种设备
设计主页
主页是网站的入口，通常包括公司简介、服务介绍、团队展示、客户评价、联系信息等。
主页结构：
- 导航栏
- 顶部大图 (Hero Section)
- 公司简介
- 服务展示
- 团队成员
- 客户评价
- 联系我们
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
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流行企业网站</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">企业网站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">团队</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center" style="background-image: url('banner.jpg'); background-size: cover;">
<div class="container">
<h1 class="display-4">欢迎来到企业网站</h1>
<p class="lead">我们提供最优质的服务</p>
</div>
</div>
<div class="container my-5">
<h2>公司简介</h2>
<p>我们是一家致力于提供优质服务的企业...</p>
</div>
<div class="container my-5">
<h2>我们的服务</h2>
<div class="row">
<div class="col-md-4">
<h3>服务1</h3>
<p>描述服务1的内容...</p>
</div>
<div class="col-md-4">
<h3>服务2</h3>
<p>描述服务2的内容...</p>
</div>
<div class="col-md-4">
<h3>服务3</h3>
<p>描述服务3的内容...</p>
</div>
</div>
</div>
<div class="container my-5">
<h2>我们的团队</h2>
<div class="row">
<div class="col-md-3">
<img src="team1.jpg" class="img-fluid rounded-circle" alt="团队成员1">
<h4>成员1</h4>
<p>职位1</p>
</div>
<div class="col-md-3">
<img src="team2.jpg" class="img-fluid rounded-circle" alt="团队成员2">
<h4>成员2</h4>
<p>职位2</p>
</div>
</div>
</div>
<div class="container my-5">
<h2>客户评价</h2>
<blockquote class="blockquote">
<p class="mb-0">这是我们最满意的服务体验...</p>
<footer class="blockquote-footer">客户1</footer>
</blockquote>
</div>
<div class="container my-5">
<h2>联系我们</h2>
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="输入您的姓名">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="输入您的邮箱">
</div>
<div class="form-group">
<label for="message">信息</label>
<textarea class="form-control" id="message" rows="5" placeholder="输入您的信息"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<footer class="bg-dark text-white text-center py-3">
<p>© 2023 企业网站. 版权所有.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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
|
.jumbotron {
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.navbar-brand {
font-weight: bold;
}
footer {
background-color: #343a40;
}
footer p {
margin: 0;
padding: 10px 0;
}
.img-fluid.rounded-circle {
border: 3px solid #fff;
}
blockquote {
font-size: 1.2em;
border-left: 5px solid #007bff;
padding-left: 10px;
}
|
设计侧边导航栏
侧边导航栏通常用于提供快速访问某些页面或功能的入口，特别是在内容较多的情况下。
侧边导航栏：
- 固定在屏幕的一侧，包含多个链接或功能按钮
- 适配屏幕大小，提供隐藏和显示功能
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
|
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">侧边导航栏 </div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">主页</a>
<a href="#" class="list-group-item list-group-item-action bg-light">关于我们</a>
<a href="#" class="list-group-item list-group-item-action bg-light">服务</a>
<a href="#" class="list-group-item list-group-item-action bg-light">团队</a>
<a href="#" class="list-group-item list-group-item-action bg-light">联系我们</a>
</div>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
</nav>
<div class="container-fluid">
<h1 class="mt-4">侧边导航示例</h1>
<p>这是带有侧边导航栏的页面内容...</p>
</div>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</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
|
#wrapper {
display: flex;
width: 100%;
}
#sidebar-wrapper {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 1000;
background-color: #f8f9fa;
border-right: 1px solid #ddd;
transition: all 0.3s;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
text-align: center;
background-color: #343a40;
color: white;
}
#sidebar-wrapper .list-group {
width: 100%;
padding: 0;
}
#sidebar-wrapper .list-group-item {
padding: 15px 20px;
border: none;
font-size: 1rem;
color: #333;
background-color: #f8f9fa;
}
#sidebar-wrapper .list-group-item:hover {
background-color: #007bff;
color: white;
}
#page-content-wrapper {
flex: 1;
padding: 20px;
margin-left: 250px;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -250px;
}
|
设计登录页
登录页是用户访问个人账户、管理数据的重要入口，通常包括用户名和密码输入框，以及一个提交按钮。
登录页布局：
- 中心对齐的登录表单
- 包含用户名、密码输入框和登录按钮
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
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center my-5">用户登录</h2>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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
|
body {
background-color: #f0f2f5;
}
.container {
margin-top: 100px;
max-width: 500px;
}
h2 {
color: #007bff;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.form-control {
border-radius: 5px;
}
.form-group {
margin-bottom: 20px;
}
|
完整代码
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
210
211
212
213
214
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流行企业网站 - 首页</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="sidebar.css">
<style>
#wrapper {
display: flex;
width: 100%;
}
#sidebar-wrapper {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 1000;
background-color: #f8f9fa;
border-right: 1px solid #ddd;
transition: all 0.3s;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
text-align: center;
background-color: #343a40;
color: white;
}
#sidebar-wrapper .list-group {
width: 100%;
padding: 0;
}
#sidebar-wrapper .list-group-item {
padding: 15px 20px;
border: none;
font-size: 1rem;
color: #333;
background-color: #f8f9fa;
}
#sidebar-wrapper .list-group-item:hover {
background-color: #007bff;
color: white;
}
#page-content-wrapper {
flex: 1;
padding: 20px;
margin-left: 250px;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -250px;
}
</style>
</head>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">侧边导航栏</div>
<div class="list-group list-group-flush">
<a href="index.html" class="list-group-item list-group-item-action bg-light">主页</a>
<a href="#" class="list-group-item list-group-item-action bg-light">关于我们</a>
<a href="#" class="list-group-item list-group-item-action bg-light">服务</a>
<a href="#" class="list-group-item list-group-item-action bg-light">团队</a>
<a href="contact.html" class="list-group-item list-group-item-action bg-light">联系我们</a>
<a href="login.html" class="list-group-item list-group-item-action bg-light">登录</a>
</div>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">企业网站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">团队</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">联系我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">登录</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center" style="background-image: url('banner.jpg'); background-size: cover;">
<div class="container">
<h1 class="display-4">欢迎来到企业网站</h1>
<p class="lead">我们提供最优质的服务</p>
</div>
</div>
<div class="container my-5">
<h2>公司简介</h2>
<p>我们是一家致力于提供优质服务的企业...</p>
</div>
<div class="container my-5">
<h2>我们的服务</h2>
<div class="row">
<div class="col-md-4">
<h3>服务1</h3>
<p>描述服务1的内容...</p>
</div>
<div class="col-md-4">
<h3>服务2</h3>
<p>描述服务2的内容...</p>
</div>
<div class="col-md-4">
<h3>服务3</h3>
<p>描述服务3的内容...</p>
</div>
</div>
</div>
<div class="container my-5">
<h2>我们的团队</h2>
<div class="row">
<div class="col-md-3">
<img src="team1.jpg" class="img-fluid rounded-circle" alt="团队成员1">
<h4>成员1</h4>
<p>职位1</p>
</div>
<div class="col-md-3">
<img src="team2.jpg" class="img-fluid rounded-circle" alt="团队成员2">
<h4>成员2</h4>
<p>职位2</p>
</div>
</div>
</div>
<div class="container my-5">
<h2>客户评价</h2>
<blockquote class="blockquote">
<p class="mb-0">这是我们最满意的服务体验...</p>
<footer class="blockquote-footer">客户1</footer>
</blockquote>
</div>
<div class="container my-5">
<h2>联系我们</h2>
<form action="contact.html">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="输入您的姓名">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" placeholder="输入您的邮箱">
</div>
<div class="form-group">
<label for="message">信息</label>
<textarea class="form-control" id="message" rows="5" placeholder="输入您的信息"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 企业网站. 版权所有.</p>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
|
