div+css实现一个简洁联系表单效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现一个简洁联系表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*, *:before, *:after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body
{
background:
linear-gradient(
limegreen,
transparent
),
linear-gradient(
90deg,
skyblue,
transparent
),
linear-gradient(
-90deg,
coral,
transparent
);
background-blend-mode: screen;
font-size: 16px;
}
body, button, input {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 1.4px;
}
.background {
display: flex;
min-height: 100vh;
}
.container {
flex: 0 1 700px;
margin: auto;
padding: 10px;
}
.screen {
position: relative;
background: #3e3e3e;
border-radius: 15px;
}
.screen:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 20px;
right: 20px;
bottom: 0;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
z-index: -1;
}
.screen-header {
display: flex;
align-items: center;
padding: 10px 20px;
background: #4d4d4f;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.screen-header-left {
margin-right: auto;
}
.screen-header-button {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 3px;
border-radius: 8px;
background: white;
}
.screen-header-button.close {
background: #ed1c6f;
}
.screen-header-button.maximize {
background: #e8e925;
}
.screen-header-button.minimize {
background: #74c54f;
}
.screen-header-right {
display: flex;
}
.screen-header-ellipsis {
width: 3px;
height: 3px;
margin-left: 2px;
border-radius: 8px;
background: #999;
}
.screen-body {
display: flex;
}
.screen-body-item {
flex: 1;
padding: 50px;
}
.screen-body-item.left {
display: flex;
flex-direction: column;
}
.app-title {
display: flex;
flex-direction: column;
position: relative;
color: #ffffff;
font-size: 28px;
}
.app-title:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 25px;
height: 4px;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0