HTML前端代码问卷星仿写(学习使用)
原创内容,仅供学习交流使用
body {
background: #cccccc url(img/微信图片_20240601195225.jpg) no-repeat fixed center/100%;
position: relative;
}
.box1 {
width: 150px;
height: 50px;
border: 1px solid transparent;
margin-top: 30px;
margin-left: 40px;
}
.box2 {
width: 250px;
height: 50px;
border: 1px solid transparent;
float: right;
margin-right: 30px;
}
.box3 {
width: 550px;
height: 500px;
background-color: aliceblue;
border: 1px solid transparent;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
border-radius: 20px;
}
.box4 {
width: 60px;
height: 30px;
border-radius: 30px;
border: 1px solid aliceblue;
text-align: center;
color: aliceblue;
margin-top: 10px;
}
.box5 {
width: 100px;
height: 30px;
border-radius: 30px;
border: 1px solid aliceblue;
text-align: center;
color: aliceblue;
margin-top: 10px;
margin-left: 15px
}
.box6 {
width: 500px;
height: 60px;
border: 1px solid transparent;
margin-left: 25px;
}
.box7 {
width: 35px;
height: 1px;
background-color: orange;
border: 1px solid orange;
margin-left: 40px;
margin-top: -20px;
}
.box8 {
width: 500px;
height: 40px;
border: 1px solid darkgray;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
}
.box9 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 10px;
text-align: left;
border-radius: 1px;
}
.box10 {
width: 165px;
height: 40px;
border: 1px solid transparent;
text-align: center;
float: right;
color: #cccccc;
}
.box11 {
width: 500px;
height: 40px;
background-color: orange;
border: 1px solid orange;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
color: aliceblue;
}
.box12 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 20px;
text-align: center;
border-radius: 1px;
}
.box13 {
width: 500px;
height: 40px;
border: 1px solid transparent;
margin-right: 25px;
margin-top: 5px;
text-align: center;
border-radius: 1px;
}
.box14 {
width: 300px;
height: 100px;
border: 1px solid transparent;
float: right;
margin-top: 40%;
text-align: left;
}
.box15 {
width: 500px;
height: 100px;
border: 1px solid transparent;
margin-top: 0px;
margin-right: 25px;
box-sizing: border-box;
}
.box16 {
width: 40px;
height: 40px;
margin-top: 0px;
border-radius: 50%;
margin-left: 20px;
margin-right: 80px;
justify-content: center;
align-items: center;
border: 1px solid darkgray;
float: right;
box-sizing: border-box;
}
.spaced-text {
margin-right: 20px;
}
.text-with-lines {
display: inline-block;
position: relative;
padding: 0 10px;
line-height: 1.5;
}
.text-with-lines::before,
.text-with-lines::after {
content: ”;
display: block;
position: absolute;
width: 150px;
height: 1px;
width: 40%;
top: 50%;
background-color: #cccccc;
}
.text-with-lines::before {
left: -40px;
}
.text-with-lines::after {
right: -40px;
}
《登顶武功山》
拍摄于问卷星团队二月徒步之旅
注册
返回首页
账号登录
验证码登录
下次自动登录
忘记用户名/密码?
登 录
立即注册
更多登录方式
企业微信
微信登录
QQ登录
<!– css部分
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #cccccc url(img/你好.jpg) no-repeat center center / cover;
position: relative;
}
.box2 {
position: absolute;
top: 10px;
right: 30px;
width: 350px;
height: 50px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
margin-right: 30px;
}
.box7 {
margin-top: 10px;
}
.box6 p {
margin-bottom: 0ox;
margin-left: 15px;
font-size: 22px;
margin-bottom: 20px;
}
.box8 {
width: 0px;
padding: 0px;
border: 1px solid orange display: inline-block;
margin-bottom: 0px;
border-radius: 1px;
}
.input-field {
/* 设置输入框的样式,使其与盒子保持一致 */
width: 100%;
/* 使输入框宽度与盒子宽度相同 */
padding: 12px;
/* 内边距,可以与盒子不同 */
border: none;
/* 去除输入框的默认边框 */
box-sizing: border-box;
/* 确保padding和border不会增加输入框的总宽度 */
}
.box11 p {
margin-top: 6px;
font-size: 18px;
}
.box14 p {
font-size: 30px;
color: aliceblue;
margin-left: 0px;
}
.box14 h3 {
margin-left: 0rem;
color: aliceblue;
margin-bottom: 0rem;
}
.box16 {
position: relative;
width: 70px;
height: 70px;
}
.box16 img {
width: 100%;
height: auto;
border-radius: 50%;
-o-object-fit: cover;
}
.box16 h6 {
position: relative;
margin-top: 25px;
font-size: 9px;
box-sizing: border-box;
color: darkgrey;
}
.box13 {
color: darkgray;
}
.tight-text {
margin: 0;
padding: 0;
line-height: 2;
font-size: 20px;
font-family: Arial, sans-serif;
color: aliceblue;
} –>