您的位置：首页 > Web前端 > HTML

HTML Layouts

2013-11-05 16:24 183 查看


更新：最后一个CSS浮动，讲得很好。


CSS 定位

CSS 定位概述
CSS
相对定位
CSS
绝对定位
CSS
浮动

在学校里面的时候，就看过这个，虽然不是很喜欢，但是会还是会点的。

温故而知新，

div的例子很好，float 这个属性，用的很好。HTML Layouts

再结合CSS Float和CSS Positioning，学习就更加系统了。

附录：


HTML Layouts

« Previous
Next
Chapter »

Web page layout is very important to make your website look good.

Design your webpage layout very carefully.



Try it Yourself - Examples

Web page layout using <div> elements

How to add layout using <div> elements.

Web page layout using <table> elements

How to add layout using <table> elements.


Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!


HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:


Example

<!DOCTYPE html>

<html>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © W3Schools.com</div>

</div>

</body>

</html>

Try
it yourself »

The HTML code above will produce the following result:


Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here
Copyright © W3Schools.com


HTML Layouts - Using Tables

A simple way of creating layouts is by using the HTML <table> tag.

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:


Example

<!DOCTYPE html>

<html>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1>Main Title of Web Page</h1>

</td>

</tr>

<tr>

<td style="background-color:#FFD700;width:100px;">

<b>Menu</b><br>

HTML<br>

CSS<br>

JavaScript

</td>

<td style="background-color:#EEEEEE;height:200px;width:400px;">

Content goes here</td>

</tr>

<tr>

<td colspan="2" style="background-color:#FFA500;text-align:center;">

Copyright © W3Schools.com</td>

</tr>

</table>

</body>

</html>

Try
it yourself »

The HTML code above will produce the following result:


Main Title of Web Page

Menu

HTML

CSS

JavaScript		Content goes here
Copyright © W3Schools.com


HTML Layout - Useful Tips

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study
our CSS tutorial.

Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).


HTML Layout Tags

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航