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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
