div Web Page Layout tutorial (1): Float Properties Introduction

Source: Internet
Author: User

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Everybody good, I am the Mao Zi, starts from today Mao Chai and Everybody Studies div page layout.

Since July 2008, Mao Chai resigned from the original job, and Ofseo brother together "network entrepreneurship." In that six months time to learn a lot of things, including div web design, SEO-related knowledge, a single page to do Google AdSense, play ripe dedecms and other major CMS and forum system ...

Through a few months of study and groping, Mao Chai also has a lot of experience, also by doing a single page to earn a little Internet fee, originally very want to learn from their own experience also want to give network rookie share sharing, so and I like the Internet rookie can master some of the basic technology network, so that everyone's station can quickly develop. But Mao Chai too lazy, do not like to write things, some time ago also busy, so although there is this mind, but has not started, this period of time Mao Chai looking for work phase, so idle time more, want to write something and share with everyone. In fact, there is another reason we may not believe that the fur touch the computer for so long, do the site has at least 100, but the typing speed is super slow, so far will not be blind, but not five this advanced typing method, so write something for me is a vast project.

Well, gossip first, start our div tutorial.

On this tutorial, I mainly talk about Div page layout, so the most basic HTML and CSS basics I will not say, if not at all can go to see the basic tutorial.

How to use div to achieve page layout:

The DIV as a container, the content on the Web page is contained in a container inside, we can use the same as table (table) as a div, can be like table set table to set Div. For friends who are familiar with using table layouts, you can use div at the beginning of your study by using a table idea.

For the horizontal arrangement of the Div friends are very easy to understand, here to say the vertical arrangement of div problem.

Let's take a look at an example:

  

There are two columns of page, if you use the traditional table structure to layout the code as follows:

<head>
<title> Untitled Document </title>
</head>
<body>
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td> Container One </td>
</tr>
</table>

<table width= "100%" border= "1" cellspacing= "0" cellpadding= "0" >
<tr>

<TD width= "50%" > Container two </td>

<TD width= "50%" > Container three </td>
</tr>
</table>
</body>
</html>

So how does this effect work with Div? Let's look at the code:
<head>
<title> Untitled Document </title>
</head>
<style>
. div1{width:100%}
. div2{Float:left width:50%}
. div3{Float:right width:50%}

</style>
<body>
<div class= "Div1" > Container </div>
<div class= "Div2" > Container two </div>
<div class= "Div3" > Container three </div>
</body>
</html>

Let's take a look at it. Here's a div of the most important CSS property float.

Syntax:

Float:none | Left | Right

Value:

None:? The default value. object does not float

Left:? Text flows to the right of the object

Right:? Text flows to the left of the object

Description:

The value of this property indicates whether and how the object floats.

Objects that follow the floating object move to the position of the floating object. The floating object moves left or right until it encounters a border (border, padding, outer patch (margin or another block object (Block-level).

Example:

div {Clear:left}

img {float:right}

So we're going to set up two parallel containers, just set the float property to the two containers, set the Float:left on the left and the container on the right to set the float:rigeht. In particular, it is necessary to note that the total width of two parallel containers cannot exceed the parent container, or it may not display a juxtaposition, but a container will appear below one.

Speaking of friends here, two containers can be arranged in this way, so how about three or more parallel containers? Because the Float property has only three values Float:none | Left | Right, that is, can only float to the left or to the right-hand side, so to set up a number of parallel containers can be used for reference to the same idea. We can set up two side-by-side large containers, and then in each large container and then set up two parallel small containers, and so on, as long as you want, you can set n a parallel container.

Let's look at the following example:

  


The brief code is as follows:
<head>
<title> Untitled Document </title>
</head>
<style>
. div1{width:100%}
. div2{Float:left width:50%}
. div3{Float:right width:50%}
. div4{Float:left width:50%}
. div5{Float:right width:50%}

</style>
<body> <div class= "Div1" > Container one </div>
<div class= "Div2" >
<div class= "DIV4" > Container four </div>
<div class= "DIV5" > Container five </div>
</div>
<div class= "Div3" > Container three </div>
</body>
</html>

You can see that there are a lot of similarities between the thought of Div and table, but the code is much simpler, and the actual page loading speed is much faster than the table structure.

OK, the first lecture is here, please continue to pay attention to the next lecture.

Author: Mao Zi

Source: http://www.dianpu818.com/maozai/post/3.html

Original articles, reproduced please retain the source.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.