我对Web开发作为一种爱好是全新的。
我为我的投资组合网站创建了一个登录页面,用于将来的项目。不幸的是,它在我的笔记本电脑和手机上看起来与在我的台式机上看起来不同。https://frscott.github.io
看起来浅蓝色容器是响应式的,但不是我的白色文本或png图像。
代码如下:
body {
margin: 0;
}
.background {
background-color: white;
}
.center {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.curved {
position: relatve;
background: #62b1ff;
height: 42vh;
border-bottom-left-radius: 50% 0%;
border-bottom-right-radius: 50% 0%;
}
.heading {
position: relative;
margin-top: 2px;
margin-bottom: 0;
font-family: 'Open Sans', sans-serif;
font-size: 50px;
font-weight: 600;
color: white;
text-align: center;
}
.buttonContainer {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
button {
background-color: gray;
border: 2px solid gray;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
font-size: large;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: white;
color: rgb(53, 53, 53);
}
.a {
color: rgb(53, 53, 53);
}
.a:hover {
background-color: lawngreen;
}
.b {
color: rgb(53, 53, 53);
}
.b:hover {
background-color: rgb(253, 123, 188);
}
.c {
color: rgb(53, 53, 53);
}
.c:hover {
background-color: yellow;
}
.text {
margin-top: 5px;
}
.paragraph {
font-family: 'DM Mono', monospace;
font-size: x-large;
font-weight: 600;
color: rgb(53, 53, 53);
text-align: center;
line-height: 3;
}
.footer {
margin-top: 50px;
font-family: 'DM Mono', monospace;
font-size: x-large;
font-weight: 600;
color: rgb(53, 53, 53);
text-align: center;
}
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&family=Open+Sans:wght@600&family=Squada+One&display=swap" rel="stylesheet">
</head>
慕仙森
相关分类