CSS实现留言板效果

留言板将用于我们的许多项目。该设计的目的是收集目标用户的信息，以便我们能够及时链接用户，解决用户的问题，然后实现其功能和价值。

因此，今天我们练习一个简单留言表单的实现，具体效果，可以看下面的截图：

在今天的小练习中，我们没有使用任何复杂的图片材料，只是使用了一些简单的材料ICON图标，这些图标都来自阿里巴巴矢量图库，如有必要，可自行下载获取，ICON图标地址：https://www.iconfont.cn/我不会在这里上传这些ICON图标素材。

接下来，让我们来看看代码实现过程。建议初学者多练习。也许你认为你在做重复的事情，但我们只能在学习之前这样做。

HTML代码：

                
      
        
          
            
联系方式            
              
                                地球-世界-中国-上海-闵行区-东川路              
              
                                13127757553@163.com              
              
                                13127757553              
            
          
          
            
            
            
            
            
          
        
        
          
留言联系          
            
                            昵称            
            
                            姓名            
            
                            邮箱地址            
            
                            联系电话            
            
                            如果您有任何问题，请留言。我会尽快回复你            
            
                          
          
        
      
    
  

CSS代码：

*{     
        margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins' ,sans-serif;}section{     
        position: relative;  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #112d42;}section::before{     
        content: '';  position: absolute;  top: 0;  left: 0;  width: 50%; height: 100%; background: #00a6bc;}section .container{ 
         position: relative; min-width: 1100px; min-height: 550px; display: flex; z-index: 1000;}section .container .contactinfo{ 
         position: absolute; top: 40px; width: 350px; height: calc(100% - 80px); background: #0f3959; z-index: 1; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);}section .container .contactinfo h2{ 
         color: #fff; font-size: 24px; font-weight: 500;}section .container .contactinfo .info{ 
         position: relative; margin: 20px 0;}section .container .contactinfo .info li{ 
         position: relative; list-style: none; display: flex; margin: 20px 0; cursor: pointer; align-items: flex-start;}section .container .contactinfo .info li span:nth-child(1){ 
         width: 30px; min-width: 30px;}section .container .contactinfo .info li span:nth-child(1) img{ 
         max-width: 100%; filter: invert(1); opacity: 0.5;} section .container .contactinfo .info li span:nth-child(2){ 
         color: #fff; margin-left: 10px; font-weight: 300; opacity: 0.5;}section .container .contactinfo .info li:hover span:nth-child(1) img,section .container .contactinfo .info li:hover span:nth-child(2){ 
         opacity: 1;}section .container .contactinfo .sci{ 
         position: relative; display: flex;}section .container .contactinfo .sci li{ 
         list-style: none; margin-right: 15px;}section .container .contactinfo .sci li a{ 
         text-decoration: none;}section .container .contactinfo .sci li a img{ 
         filter: invert(1); opacity: 0.5;}section .container .contactinfo .sci li:hover a img{ 
         opacity: 1;}section .container .contactForm{ 
         position: absolute; padding: 70px 50px; background: #fff; margin-left: 150px; padding-left: 250px; width: calc(100% - 150px); height: 100%; box-shadow: 0 50px 50px rgba(0,0,0,0.5);}section .container .contactForm h2{ 
         color: #0f3959; font-size: 24px; font-weight: 500;}section .container .contactForm .formBox{ 
         position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 30px;}section .container .contactForm .formBox .inputBox{ 
         position: relative; margin: 0 0 35px 0;}section .container .contactForm .formBox .inputBox.w50{ 
         width: 47%;}section .container .contactForm .formBox .inputBox.w100{ 
         width: 100%;}section .container .contactForm .formBox .inputBox input,section .container .contactForm .formBox .inputBox textarea{ 
         width: 100% !important; padding: 5px 0; resize: none; font-size: 18px; font-weight: 300; color: #333; border: none; border-bottom: 1px solid #777; outline: none;}section .container .contactForm .formBox .inputBox textarea{ 
         min-height: 120px;}section .container .contactForm .formBox .inputBox span{ 
         position: absolute; left: 0; padding: 5px 0; font-size: 18px; font-weight: 300; color: #333; transition: 0.3s; pointer-events: none;}section .container .contactForm .formBox .inputBox input:focus ~ span,section .container .contactForm .formBox .inputBox textarea:focus ~ span,section .container .contactForm .formBox .inputBox input:valid ~ span,section .container .contactForm .formBox .inputBox textarea:valid ~ span{ 
         transform: translateY(-20px); font-size: 12px; font-weight: 400; letter-spacing: 1px; color: #ff568c;}section .container .contactForm .formBox .inputBox input[type="submit"]{ 
         position: relative; cursor: pointer; background: #0f3959; color: #fff; border: none; max-width: 150px; padding: 12px;}section .container .contactForm .formBox .inputBox input[type="submit"]:hover{ 
         background: #ff568c;}