📜  如何使用 HTML 和 CSS 设计像 Facebook 这样的主页?

📅  最后修改于: 2021-11-08 06:06:44             🧑  作者: Mango

HTML: HTML 代表超文本标记语言。它用于使用标记语言设计网页。 HTML 是超文本和标记语言的结合。超文本定义了网页之间的链接。标记语言用于在定义网页结构的标签内定义文本文档。

CSS:层叠样式表,被亲切地称为 CSS,是一种设计简单的语言,旨在简化使网页呈现的过程。 CSS 允许您将样式应用于网页。更重要的是,CSS 使您能够独立于构成每个网页的 HTML 执行此操作。

以下是构建 Facebook like Homepage 的源代码:

您可以查看Github 链接以下载本文的完整代码。

HTML 部分:文件名为 homepage1.html

HTML


  

    
    
    

  

    
        
            OLD MASTER         
        
                     
        
Profile
        
|
        
Home
    
    
        
            
Profile
            
edit profile
            
News feed
            
Messages
            
Events
            
PAGES
            
Pages feed
            
Like pages
            
Create page
            
Create ad
            
GROUPS
            
New groups
            
Create group
            
APPS
            
Games
            
On this day
            
Games feed
            
FRIENDS
            
Close friends
            
Family
            
INTERESTS
            
Pages and public
            
EVENTS
            
Create event
        
    
    
    
       
    
    
    
        
            update status | add photos/             videos | create photo album             






            
        
        
                     
        
                     
    
    
        image is here
        image is here

        Like Comment Share
        
        Amit Deb          and          5 others          like this         
            Rani Mukharji             with              Arup Pegu              and              15 others.
            4 hrs.         
        
            image is here         
        
                     
    
         
        
            
            
Trending
            


See more             
            
                Suggested Pages             



See all             
            
                People you may know             




See all         
    
  


CSS 部分:文件名为 new.css

从 Github 下载 HTML、CSS 和图像文件并将所有文件保存在一个文件夹中并运行homepage1.html文件。它将显示结果。

输出: