css实现在线留言联系我们表单效果代码-html代码-BFW代码库

css实现在线留言联系我们表单效果代码

代码语言：html

代码描述：css实现在线留言联系我们表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>联系我们</title>
        <meta name="description" content="Neat">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
        <style>
            html, body{
        min-height: 100%;
}
*{
        margin:0;
        padding:0;
        font-size: 14px;
}
ul{
        list-style:none;
}
.hide{
    display: none;
}
.lf{
        float: left;
}
.lr{
        float: right;
}
.red, .red a,.red a h5, .red a p{
    color:#FF0000 !important;
}
html{
        /* background: #f0efef; */
}
a {
    text-decoration: none;
    color: inherit;
}

.main-group{
        width:100vw;
        height:100vh;
        min-width: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to right, #39bcf2 0%,#39bcf2 50%,#18354a 50%,#18354a 100%);
}

.box-group{
        width:1000px;
        height:430px;
        position: relative;
}
.box-group .left-group{
        width:320px;
        height:360px;
        background: #18354a;
        position: absolute;
        left:0;
        top:35px;
        color: #fff;
        z-index: 1;
        box-sizing: border-box;
        padding:40px;
}
.box-group .left-group .title{
        font-size: 16px;
        font-weight: bold;
}
.box-group .left-group .icon-group{
        margin-top:33px;
}
.box-group .left-group .icon-group li{
        margin-top:26px;
        display: flex;
        align-items: center;
}
.box-group .left-group .icon-group li img{
        width:25px;
        height: 25px;
        margin-right:10px;
}


.box-group .right-group{
        width: 870px;
        box-sizing: border-box;
        padding:45px 40px 20px 230px;
        height:100%;
        background: #fff;
        position: absolute;
        right:0;
}
.box-group .right-group .title{
        color: #18354a;
        font-size:20px;
        font-weight: bold;
}
.box-group .right-group .form-group{
        position: relative;
        display: flex;
        justify-content:space-between;
        flex-wrap: wrap;
        padding-top:30px;
}
.box-group .right-group .form-group .input-group{
        position: relative;
        margin:0 0 35px 0;
}
.box-group .right-group .form-group .input-group.w50{
        width: 47%;
}
.box-group .right-group .form-group .input-group.w100{
        width: 100%;
}
.box-group .right-group .form-group .input-group input,
.box-g.........完整代码请登录后点击上方下载按钮下载查看