Skip to content

Commit 18aa419

Browse files
committed
橙子银行 1.0-beta1
1 parent e376d29 commit 18aa419

File tree

7 files changed

+149
-18
lines changed

7 files changed

+149
-18
lines changed

404.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="refresh" content="3;url=/">
7-
<title>橙子爱编程</title>
7+
<title>页面不存在 - 有想法的橙子</title>
88
<link rel="icon" href="favicon.ico">
99
<link rel="stylesheet" href="css/style.css">
1010
<style>
@@ -36,7 +36,7 @@ <h2 style="margin-bottom: 20px;">页面不存在</h2>
3636
</main>
3737

3838
<footer>
39-
<p>Copyright &copy; 2024 橙子爱编程</p>
39+
<p>Copyright &copy; 2024 有想法的橙子</p>
4040
</footer>
4141
</body>
4242

bank/css/product.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.shop {
2+
margin: 0 auto;
3+
display: grid;
4+
grid-template-columns: repeat(3, 200px);
5+
grid-template-rows: repeat(3, 300px);
6+
}
7+
.shop > div {
8+
margin: 10px;
9+
padding: 10px;
10+
/* height: 200px; */
11+
/* background-color: #ccc; */
12+
border-radius: 10px;
13+
border: 1px solid #000;
14+
}

bank/style.css renamed to bank/css/style.css

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
font-family: "Microsoft YaHei", "微软雅黑", "Tahoma", "PingFang", "苹方", "黑体-简","Helvetica", sans-serif;
45
}
56

67
a {
@@ -42,12 +43,45 @@ header nav ul {
4243
float: right;
4344
}
4445

46+
header nav .menu_bar {
47+
display: inline;
48+
float: right;
49+
}
50+
51+
.menu_bar li ul{
52+
width: 100px;
53+
margin-left: -60px;
54+
background-color: #fff;
55+
display: none;
56+
position: absolute;
57+
border-radius: 10px;
58+
border: #ccc 1px solid;
59+
}
4560

61+
.menu_bar li:hover ul{
62+
display: block;
63+
}
4664

4765
header nav a:hover {
4866
color: #333;
4967
}
5068

69+
.menu_bar ul li {
70+
width: 80px;
71+
}
72+
73+
.menu_bar li ul li:hover {
74+
background-color: #ddd;
75+
}
76+
77+
.menu_bar li ul li:first-child {
78+
border-radius: 10px 10px 0 0;
79+
}
80+
81+
.menu_bar li ul li:last-child {
82+
border-radius: 0 0 10px 10px;
83+
}
84+
5185
main {
5286
max-width: 1000px;
5387
padding: 10px;
@@ -63,7 +97,12 @@ main {
6397
margin: 10px;
6498
}
6599

66-
.box h3 {
100+
.box h1,
101+
.box h2,
102+
.box h3,
103+
.box h4,
104+
.box h5,
105+
.box h6 {
67106
margin: 10px;
68107
}
69108

@@ -83,7 +122,6 @@ footer * {
83122
font-size: 12px;
84123
}
85124

86-
87125
.container {
88126
padding: 5px;
89127
display: flex;
@@ -98,7 +136,7 @@ footer * {
98136

99137
.item {
100138
border-radius: 10px;
101-
min-width: 400px;
139+
min-width: 400px;
102140
height: 300px;
103141
background-color: #114514;
104142
margin-right: 10px;
@@ -109,12 +147,26 @@ footer * {
109147
color: #fff;
110148
}
111149

112-
.item:last-child {
113-
margin-right: 0;
114-
}
115-
116150
.button {
117151
float: right;
118152
color: coral !important;
119153
margin: 10px 20px;
120154
}
155+
156+
@media screen and (max-width: 500px) {
157+
.item {
158+
min-width: 100%;
159+
}
160+
}
161+
162+
@media screen and (max-width: 640px) {
163+
header nav .navigation_bar {
164+
display: none;
165+
}
166+
}
167+
168+
@media screen and (min-width: 641px) {
169+
header nav .menu_bar {
170+
display: none;
171+
}
172+
}

bank/icon.svg

Lines changed: 0 additions & 4 deletions
This file was deleted.

bank/index.html

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,39 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>橙子银行</title>
99
<link rel="icon" href="../favicon.ico">
10-
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="css/style.css">
1111
</head>
1212

1313
<body>
1414
<header>
1515
<nav>
1616
<a href="./"><img src="../img/logo.svg" alt="有想法的橙子" height="100%"></a>
17-
<ul>
17+
18+
<ul class="navigation_bar">
1819
<li><a href="./">首页</a></li>
19-
<li><a href="#">产品</a></li>
20+
<li><a href="product.html">产品</a></li>
2021
<li><a href="#">关于我们</a></li>
2122
<li><a href="#">新闻中心</a></li>
2223
<li><a href="#">帮助中心</a></li>
2324
</ul>
2425

26+
<ul class="menu_bar">
27+
<li><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M10 12.5C10 11.6703 10.6703 11 11.5 11L29.5 11C30.3297 11 31 11.6703 31 12.5C31 13.3297 30.3297 14 29.5 14L11.5 14C10.6703 14 10 13.3297 10 12.5ZM10 20C10 19.1703 10.6703 18.5 11.5 18.5L29.5 18.5C30.3297 18.5 31 19.1703 31 20C31 20.8297 30.3297 21.5 29.5 21.5L11.5 21.5C10.6703 21.5 10 20.8297 10 20ZM31 27.5C31 28.3297 30.3297 29 29.5 29L11.5 29C10.6703 29 10 28.3297 10 27.5C10 26.6703 10.6703 26 11.5 26L29.5 26C30.3297 26 31 26.6703 31 27.5Z" fill="#1D2129" ></path></svg>
28+
<ul>
29+
<li><a href="./">首页</a></li>
30+
<li><a href="product.html">产品</a></li>
31+
<li><a href="#">关于我们</a></li>
32+
<li><a href="#">新闻中心</a></li>
33+
<li><a href="#">帮助中心</a></li>
34+
</ul>
35+
</li>
36+
</ul>
2537
</nav>
2638
</header>
2739

2840
<main>
29-
<div class="box">
30-
<h3>橙子银行</h3>
41+
<div class="box" style="background-color:#fff;">
42+
<h1 style="margin-bottom: 20px;">橙子银行</h1>
3143
<p>为您提供安全、便捷的金融服务</p>
3244
</div>
3345
<div class="box">

bank/product.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>产品 - 橙子银行</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
<link rel="stylesheet" href="css/product.css">
9+
</head>
10+
<body>
11+
12+
<header>
13+
<nav>
14+
<a href="./"><img src="../img/logo.svg" alt="有想法的橙子" height="100%"></a>
15+
16+
<ul class="navigation_bar">
17+
<li><a href="./">首页</a></li>
18+
<li><a href="product.html">产品</a></li>
19+
<li><a href="#">关于我们</a></li>
20+
<li><a href="#">新闻中心</a></li>
21+
<li><a href="#">帮助中心</a></li>
22+
</ul>
23+
24+
<ul class="menu_bar">
25+
<li><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M10 12.5C10 11.6703 10.6703 11 11.5 11L29.5 11C30.3297 11 31 11.6703 31 12.5C31 13.3297 30.3297 14 29.5 14L11.5 14C10.6703 14 10 13.3297 10 12.5ZM10 20C10 19.1703 10.6703 18.5 11.5 18.5L29.5 18.5C30.3297 18.5 31 19.1703 31 20C31 20.8297 30.3297 21.5 29.5 21.5L11.5 21.5C10.6703 21.5 10 20.8297 10 20ZM31 27.5C31 28.3297 30.3297 29 29.5 29L11.5 29C10.6703 29 10 28.3297 10 27.5C10 26.6703 10.6703 26 11.5 26L29.5 26C30.3297 26 31 26.6703 31 27.5Z" fill="#1D2129" ></path></svg>
26+
<ul>
27+
<li><a href="./">首页</a></li>
28+
<li><a href="product.html">产品</a></li>
29+
<li><a href="#">关于我们</a></li>
30+
<li><a href="#">新闻中心</a></li>
31+
<li><a href="#">帮助中心</a></li>
32+
</ul>
33+
</li>
34+
</ul>
35+
</nav>
36+
</header>
37+
38+
<main>
39+
<div class="shop">
40+
<div>1</div>
41+
<div>2</div>
42+
<div>3</div>
43+
<div>4</div>
44+
<div>5</div>
45+
<div>6</div>
46+
<div>7</div>
47+
<div>8</div>
48+
<div>9</div>
49+
</div>
50+
</main>
51+
52+
<footer>
53+
<p>&copy; 2024 有想法的橙子</p>
54+
</footer>
55+
</body>
56+
</html>

css/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
font-family: "Microsoft YaHei", "微软雅黑", "Tahoma", "PingFang", "苹方", "黑体-简","Helvetica", sans-serif;
45
}
56

67
a {

0 commit comments

Comments
 (0)