This series of tutorials is an entry-level tutorial for beginners to learn, with the simplest knowledge of 1.1-point advanced. Mainly with examples, few theories, this is more suitable for beginners to grasp quickly. Because I am also learning, it is inevitable that there are some mistakes or omissions places, I hope you give correct corrections. This tutorial refers to the book "the CSS Web site layout", here to thank the author.
To learn div+css, first of all to have some HTML and CSS knowledge, if these you do not know, suggest you go to cram this lesson, then to learn this tutorial. In addition to discard the traditional form of the layout of the thinking mode, as for why, in your study in this tutorial slowly will experience. If you're ready for this, let's get started!
One column fixed width
A column of fixed widths is the foundation of the Foundation, so this section is the first section to get started.
We used layout as the ID name for Div, for easy viewing, we used Background-color: #E8F5FE, set the background color of the div to light blue, border:2px solid #A9C9E2, and set the border blue. The background color and border properties will be explained in a later tutorial.
Because it is a fixed-width layout, we directly set the Width property width:300px; height:200px with the height attribute; Click the "Run this Code" button to view the final effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> a column fixed width--aa25. cn</title> <style type= "Text/css" > <!--#layout {border:2px solid #A9C9E2; Background-color: #E8F5FE; height:200px; width:300px; }--> </style> </pead> <body> <div id= "Layout" > One column fixed width (AA25. CN) </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following specific steps, because this series is an entry-level tutorial, so the use of Dreaweaver visualization development, so that you less to write code (but at least understand the meaning of each sentence), while the tutorial as far as possible with the map, do simple and understandable. If you know more about CSS, you can skip this step.
1, open Dreamweaver (Take 8.0 as an example), select File--New
As shown in the figure, note that choosing a good document type, we recommend that you choose the XHTML 1.0 Transitional type, for more information about document types, please refer to:
Choose the right doctype to solve the problem of CSS invalidation
Select the Insert div Tag tool for the toolbar, in the ID box of the dialog box, you can write the ID name first, and then create a new CSS style in the CSS panel, or click the new CSS Style button below, and then automatically insert the ID name after the success, and click OK to see that the DIV tag has been inserted into the page.
The CSS style settings are as follows:
Note: The part of the Red Line box is the part of this example that needs to be set.
How, a column fixed width, it is so simple!
