Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall
Div is currently the hottest way to make Web pages, but for fully handwritten code, many web designers are looking to halt.
In fact, Div is a very simple layout, even simpler than any programming language (although it is not a programming language).
First of all, you should know that when you start to learn div, you have to forget all the previous methods of thinking using DW to draw layout tables (if you used to use a table layout), but this technique is more suitable for those who have just come into contact with the web-making.
Then you know, Div is a high cost development, the speed of course is not you draw a table to come fast, but the benefits are more, I believe that if you can see here, you must have a certain understanding of the benefits of Div.
Finally, you have to know that the tools you use, you might think Dreamweaver is good, yes, it's good, but you have to realize that when you use this technique skillfully, you can write pages in any text editor, even in Notepad, While Dreamweaver just acts as a text editor, all of your work is done in Code view, where I recommend Adobe's newest dreamweaver cs4. Of course, I would try it if CS5 appeared.
Cut to the point, in fact, div the correct statement should be XHTML+CSS, said the reason for the DIV is only to make it more clearly and table layout method to distinguish, not to say that a page does not have a table, but where to use table, you have to realize that table is a table, It's for storing data, not for layout.
Next is the layout of the way of thinking, maybe everyone in contact with the Div, I now recommend the most famous box model, I also looked at the model after suddenly enlightened.
You may say, a lot of English can not understand, but I tell you, I am sorry that three English you must remember, and is the most important three, you can think of such a box as a div, and all the labels with these three attributes.
As you can see, this is a square, and the page is made up of so many big and small squares, and perhaps the following examples will give you a clearer picture of the box.
I borrowed the box of Sina blog here to explain, we may find that, in fact, the border border often only 1px width, who called it a border. In the outer patch margin, it represents the div (box) and div (box) between the distance, while the patch padding is a large box (DIV) and the inside Box (div) Distance (box (div) inside can put boxes (div) OH).
Next we'll imitate the box and make a simple model to copy the following content to Notepad, and the suffix name to HTML.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=http://www.lzrc365.com/index.html>
<head>
<meta http-equiv= "Content-type" content= "HTML; Charset=utf-8 "/>
<title> Box Model Demo </title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
font-size:12px;
}
a{
Color: #5E4830;
}
. box{
width:205px;
border:1px solid #DFD3BD;
margin:10px;
}
. Box. title{
Font-weight:bold;
height:22px;
line-height:22px;
Background-color: #FDECCE;
border:1px solid #fff;
padding:0px 0px 0px 10px;
Color: #665F54;
}
. Box. content{
Color: #5E4830;
PADDING:7PX 10px;
}
. Box. Content li{
Line-height:1.5em;
}
</style>
</head>
<body>
<div class= "box" >
<div class= "title" > Classification </div>
<ul class= "Content" >
<li><a href= "#" > Technical Notes </a> (1) </li>
<li><a href= "#" > Net pick </a> (0) </li>
<li><a href= "#" > Original Literature </a> (1) </li>
</ul>
</div>
<div class= "box" >
<div class= "title" > Visitor </div>
<ul class= "Content" >
<li> No visitors </li>
<li><a href= "#" > Login </a> your avatar appears here. </li>
</ul>
</div>
</body>
</html>
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
