📜  使用 HTML 和 CSS 设计活动网页

📅  最后修改于: 2021-11-10 04:04:47             🧑  作者: Mango

活动网页在推广和预订活动方面起着至关重要的作用。在本文中,我们将构建一个活动页面,它将包含活动的详细信息,例如日期、预订选项和查看更多详细信息按钮。我们将使用 HTML 来提供基本布局,如标题、细节、按钮等,而 CSS 将为我们的布局提供漂亮的设计,如文本装饰、文本颜色、背景颜色、文本对齐、边距、填充、框浮动等。

方法:

  • 我们将首先为左侧内容创建两个 div(它将包含事件的详细信息),右侧将有 3 个包含事件摘要的框(如日期、查看更多按钮等)。
  • 包含设计的左侧部分具有使用

    标签创建的标题和文本。包含 3 个框的右侧部分包含 – 查看使用按钮创建的更多信息,使用 span 标签创建的时间。它还包含标题和段落。

  • 在 CSS 部分,我们将使用 (box-sizing) 为左右部分创建框设计,使用过渡效果给出背景颜色、文本对齐、文本装饰和悬停效果。我们还将为悬停效果提供不同的背景颜色

例子:

HTML


   

    

   

    
        
            
                

                    Events and Shows                 

                

                    With the idea of imparting programming                      knowledge, Mr. Sandeep Jain, an IIT                      Roorkee alumnus started a dream,                      GeeksforGeeks. Whether programming                      excites you or you feel stifled,                      wondering how to prepare for                      interview questions or                     how to ace data structures and                      algorithms, GeeksforGeeks is a                      one-stop solution. With every                      tick of time, we are adding arrows                      in our quiver. From articles on                      various computer science subjects                      to programming problems for practice,                     from basic to premium courses, from                      technologies to entrance examinations,                      we have been building ample content                      with superior quality. In a short                      span, we have built a community of                      1 Million+ Geeks around the world, 20,000+                     Contributors and 500+ Campus Ambassadors                      in various colleges across the nation.                      Our success stories include a lot of                      students who benefitted in their                      placements and landed jobs at tech                      giants. Our vision is to build a gigantic                     network of geeks and we are only a                      fraction of it yet.                 

            
        
            
            
                    
  •                     
                            

                                15
    March                         

                        
                        
                            

                                Where is the event happening?                         

                            

                                  With the idea of imparting programming                              knowledge, Mr. Sandeep Jain, an IIT                              Roorkee alumnus started a dream,                              GeeksforGeeks. Whether programming                              excites you or you feel stifled,                              how to ace data structures and                              algorithms, GeeksforGeeks is a                              one-stop solution.                         

                                View Details                     
                        
                    
  •                     
  •                     
                            

                                27
    May                         

                        
                        
                            

                                Where is the event happening?                         

                            

                                With the idea of imparting programming                              knowledge, Mr. Sandeep Jain, an IIT                              Roorkee alumnus started a dream,                              GeeksforGeeks. Whether programming                              excites you or you feel stifled,                              how to ace data structures and                              algorithms, GeeksforGeeks is a                              one-stop solution.                         

                            View Details                     
                        
                    
  •                     
  •                     
                            

                                12
    August                         

                        
                        
                            

                                Where is the event happening?                         

                            

                                With the idea of imparting programming                              knowledge, Mr. Sandeep Jain, an IIT                              Roorkee alumnus started a dream,                              GeeksforGeeks. Whether programming                              excites you or you feel stifled,                              how to ace data structures and                              algorithms, GeeksforGeeks is a                              one-stop solution.                         

                                View Details                     
                        
                    
  •             
        
    
   


输出: