留言表单-带图标标题

作者：
发布时间：0000-00-00 00:00:00
浏览次数：261

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>留言表单-带图标标题</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" />
  <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" />
  <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script>
    
    <style>
     body{font-family:"微软雅黑","Microsoft Yahei";overflow-x: hidden;}
        input,textarea{font-family:"微软雅黑","Microsoft Yahei";outline: 0;border:0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .wp{width: 90%;max-width: 1200px;margin: 0 auto;}

.m-form1{
            padding: 50px 0;
            overflow: hidden;
        }
        .m-form1 .row{
            overflow: hidden;
            margin: 0 -1%;
        }
        .m-form1 dl{
            float: left;
            width: 31.33%;
            padding: 0 10px;
            border:1px solid #ddd;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 50px;
            margin: 0 1%;
            margin-bottom: 20px;
        }
        .m-form1 dt{
            float: left;
            position: relative;
            font-size: 16px;
            width: 80px;
            padding-right: 10px;
        }
        .m-form1 dt::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 80px;
            border-right: 1px solid #ddd;
            height: 20px;
            margin-top: -10px;
        }
        .m-form1 dt i{
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            background: rgb(210,50,54);
            border-radius: 50%;
            margin-right: 10px;
        }
        .m-form1 dd{
            overflow: hidden;
        }
        .m-form1 .inp{
            color: #333;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            width: 100%;
            display: block;
        }
        .m-form1 .inp-area{
            height: 220px;
            resize:none;
        }
        .m-form1 .blocks{
            float: none;
            width: auto;
            margin: 0 0 20px;
        }
        .m-form1 .blocks dt{
            float: none;
            width: auto;
            border-bottom: 1px solid #ddd;
            padding-right: 0;
        }
        .m-form1 .btn{
            color: #fff;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            width: 210px;
            height: 50px;
            background: rgb(210,50,54);
            border-radius: 5px;
            display: block;
            margin: 0 auto;
        }
        @media only screen and (max-width: 750px) {
             .m-form1 dl{float: none;width: auto;margin-bottom: 10px;}
            .m-form1 .blocks{margin-bottom: 10px;}
        }
    </style>
</head>
<body>
   <div class="wp">
      <div class="m-form1">
                <form action="">
                <div class="row">
                    <dl>
                        <dt><i class="ico1"></i>姓名</dt>
                        <dd><input type="text" class="inp" /></dd>
                    </dl>
                    <dl>
                        <dt><i class="ico2"></i>邮箱</dt>
                        <dd><input type="text" class="inp" /></dd>
                    </dl>
                    <dl>
                        <dt><i class="ico3"></i>电话</dt>
                        <dd><input type="text" class="inp" /></dd>
                    </dl>
                </div>
                <dl class="blocks">
                    <dt><i class="ico4"></i>留言</dt>
                    <dd><textarea name="" id="" class="inp inp-area">

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏