KuaiLeTianShi/XiYun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传文件至 css

Browse Source
This commit is contained in:
KuaiLeTianShi 2024-08-29 08:51:54 +08:00
parent 2326d89507
commit c2cb661937
2 changed files with 367 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
css/index-style.css Normal file
View File

@ -0,0 +1,202 @@
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
transition: background-color 1s;
}
header {
background-color: #343a40;
color: #ffffff;
text-align: center;
padding: 1em;
transition: padding 1s;
}
nav {
background-color: #343a40;
padding: 1em 0;
text-align: center;
}
nav a {
color: #ffffff;
margin: 0 1em;
text-decoration: none;
font-weight: bold;
transition: color 0.5s;
}
nav a:hover {
color: #669df0;
}
.content {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
padding: 20px;
transition: box-shadow 0.5s, padding 0.5s;
}
section {
padding: 2em;
text-align: center;
transition: padding 1s;
}
h2 {
color: #343a40;
transition: color 1s;
}
p {
color: #495057;
transition: color 1s;
}
footer {
background-color: #343a40;
color: #ffffff;
text-align: center;
padding: 1em;
width: 100%;
margin-top: 20px;
}
.member {
border: 1px solid #dee2e6;
border-radius: 10px;
margin: 20px 0;
padding: 20px;
text-align: left;
transition: border 0.5s, padding 0.5s;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.member img {
border-radius: 50%;
margin-right: 10px;
width: 80px;
height: 80px;
transition: margin-right 0.5s;
}
/* 在上面的样式基础上可以继续添加以下样式 */
#members {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.member {
width: 300px;
margin: 20px;
transition: transform 0.5s;
}
.member:hover {
transform: scale(1.05);
}
/* 在上面的样式基础上可以继续添加以下样式 */
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
max-width: 600px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
grid-column: span 2;
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
ul {
list-style-position: inside;
}
/* 在上面的样式基础上可以继续添加以下样式 */
#portfolio {
text-align: center;
}
/* 在作品展示页面中添加作品的样式 */
/* 在上面的样式基础上可以继续添加以下样式 */
#about {
text-align: center;
}
/* 在关于我们页面中添加关于信息的样式 */
/* 在上面的样式基础上可以继续添加以下样式 */
#home {
text-align: center;
}
#news {
text-align: center;
}
#news article {
margin-bottom: 20px;
}
#news article h3 {
color: #343a40;
}
#news article p {
color: #495057;
}
footer {
background-color: #343a40;
color: #ffffff;
text-align: center;
padding: 1em;
width: 100%;
margin-top: 20px;
}
/* 添加响应式布局 */
@media (max-width: 600px) {
#news article {
text-align: left;
}
}

165
css/style.css Normal file
View File

@ -0,0 +1,165 @@
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
transition: background-color 1s;
}
header {
background-color: #343a40;
color: #ffffff;
text-align: center;
padding: 1em;
transition: padding 1s;
}
nav {
background-color: #343a40;
padding: 1em 0;
text-align: center;
}
nav a {
color: #ffffff;
margin: 0 1em;
text-decoration: none;
font-weight: bold;
transition: color 0.5s;
}
nav a:hover {
color: #28a745;
}
.content {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
padding: 20px;
transition: box-shadow 0.5s, padding 0.5s;
}
section {
padding: 2em;
text-align: center;
transition: padding 1s;
}
h2 {
color: #343a40;
transition: color 1s;
}
p {
color: #495057;
transition: color 1s;
}
footer {
background-color: #343a40;
color: #ffffff;
text-align: center;
padding: 1em;
width: 100%;
margin-top: 20px;
}
.member {
border: 1px solid #dee2e6;
border-radius: 10px;
margin: 20px 0;
padding: 20px;
text-align: left;
transition: border 0.5s, padding 0.5s;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.member img {
border-radius: 50%;
margin-right: 10px;
width: 80px;
height: 80px;
transition: margin-right 0.5s;
}
/* 在上面的样式基础上可以继续添加以下样式 */
#members {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.member {
width: 300px;
margin: 20px;
transition: transform 0.5s;
}
.member:hover {
transform: scale(1.05);
}
/* 在上面的样式基础上可以继续添加以下样式 */
form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
max-width: 600px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
grid-column: span 2;
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
ul {
list-style-position: inside;
}
/* 在上面的样式基础上可以继续添加以下样式 */
#portfolio {
text-align: center;
}
/* 在作品展示页面中添加作品的样式 */
/* 在上面的样式基础上可以继续添加以下样式 */
#about {
text-align: center;
}
/* 在关于我们页面中添加关于信息的样式 */