📜  HTML 布局布局技术

📅  最后修改于: 2020-11-02 02:59:12             🧑  作者: Mango

HTML布局技术

在设计网站时,创建布局是最重要的事情,因为这将确保您的网站看起来井井有条,内容易于理解。有多种技术和可用于创建布局的框架,但是在这里我们将学习简单的技术。您可以使用以下方法创建多列布局:

  • HTML表格(尽量不要使用)
  • CSS float属性
  • CSS框架
  • CSS Flexbox
  • 使用div布局

HTML表格(不推荐)

基于HTML表的布局是创建布局的最简单方法之一,因为表仅使用基于行和基于列的格式,但是不建议将HTML表用于页面布局。的

以下是使用HTML表创建简单网页布局的示例。

例:



 
    
 

     
       

javaTpoint Table-layout

Write your content Here

This is your side bar

©Copyright javaTpoint.com

注意:此示例仅用于显示如何使用表格创建布局,但是不建议使用表格布局。

CSS框架

CSS提供了许多框架,例如W3.CSS,Bootstrap等,以快速创建布局。使用CSS框架,您可以轻松创建具有响应性和吸引力的Web布局。您只需要为这些框架添加链接,就可以使用框架中所有可用的属性。

CSS浮动

您可以使用CSS float属性创建整个Web布局。

优点:非常容易学习和使用。您只需了解float和clear属性如何工作。

缺点:浮动元素与文档流相关,可能会损害灵活性。

例:








Tutorials Gallery

HTML

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for beginners and professionals.

TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?

Copyright © javatpoint.com

CSS Flexbox

Flexbox是CSS3中的新布局模式。

优点:它确保页面布局必须适应不同的屏幕尺寸和不同的显示设备。

缺点:在IE10及更低版本中不起作用。

例:








City Gallery

HTML

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for beginners and professionals.

TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?

Resize this page to see what happens!

Copyright © javatpoint.com

使用div布局




    Webpage using div
    


javaTpoint Div Layout

Write your content here

This is side

帮助他人,请分享

了解最新教程

制备

趋势技术

科技/ MCA