📌  相关文章
📜  使用 HTML 和 CSS 设计联系我们页面

📅  最后修改于: 2021-10-29 03:58:11             🧑  作者: Mango

对于不了解 HTML 和 CSS 的人来说，创建一个有吸引力的页面似乎很困难。如果有人不知道使用 CSS，那么他们将无法使页面看起来更好或更具吸引力。因此，本文的主要重点将放在 CSS 的实现上。

创建结构：在本节中，我们将使用

  • 和
    等标签创建一个简单的网页结构。所以这将帮助我们创建一个简单的网页，我们可以通过运行以下代码来检查它：

    HTML
    

 

    Contact Us page

 

    
    
    
        
    
            
    
 
                
                
    Contact Us
    
 
 
 
                
                
    
                    You can Contact Us if you face any problem
                
    
 
 
                
                
    
                
    
                    Click on the below options to Contact us
                
    
 
 
            
    
        
    
    
    
 
    
    
 
        
        
    
            Options to Contact
        
    
 
        
    
            
    
 
                
                
                
                
    
 
                
                
    
                    People can fill up the form
                    and send us the problem
                
    
 
 
            
    
 
            
    
 
                
                
                
                
    
 
                
                
    
                    Use this Email to send us
                    about the problem faced
                
    
 
 
            
    
 
            
    
 
                
                
                
                
    
 
                
                
    
                    Toll Free Number:+1800 200 300 400
                
    
 
 
            
    
        
    
    
    
     
    
    
        
    
            Copyright @-All rights are reserved
        
    
 
 
    
    

 

    CSS

    CSS 设计：我们将使用 CSS 来设计简单的界面页面。这里创建这个页面的有趣部分是使用相同的导航栏背景和网页背景。同样在页脚中，我们将通过使用我们用于为网页和导航栏提供背景图像的类来使用相同的背景。网页的另一个有趣之处是导航栏固定在一个位置，因此当用户滚动网页时，他们会发现导航栏固定在一个位置。

    CSS代码：

    CSS

    结合以上两段代码，使用 HTML 和 CSS 制作联系我们页面。

    输出：

    支持的浏览器运行代码：

    • 谷歌浏览器
    • 微软边缘
    • 火狐
    • 歌剧
    • 苹果浏览器