This series of tutorials is an entry-level tutorial for beginners, with the simplest knowledge of 1.1-point advanced. Mainly in case-based, very few theories, so more suitable for beginners to grasp quickly. Because I am also learning, inevitably there are some errors or omissions place, I hope you give correct. This tutorial refers to the CSS site layout of the book, here to the author to express their thanks.
To learn div+css, first of all to have a certain amount of HTML and CSS knowledge, if you do not understand, suggest you first to cram this lesson, then to learn this tutorial. Also abandon the traditional form layout thinking mode, as for why, in your study of this tutorial slowly will experience. If you are ready, then start!
Fixed width of a column
The fixed width of a column is the basis of the foundation, so this section is the first section to get started.
We used layout as the ID name for the Div, and for ease of viewing, we used Background-color: #E8F5FE, set the background color of the div to light blue, border:2px solid #A9C9E2, and set the border to Sky blue. The background color and border properties will be explained in a later tutorial.
Because it is a fixed-width layout, we set the Width property width:300px directly, and the height attribute height:200px; Click the "Run this Code" button to view the final effect.
<textarea id="runcode75800"><! 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 fixed width--aa25. cn</title> <style type= "Text/css" > <!--#layout {border:2px solid #A9C9E2; Background-color: #E8F5FE; height:200px; width:300px; --</style> </pead> <body> a fixed-width (AA25) column. CN) </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Here is the specific steps, because this series is an entry-level tutorial, so the use of dreaweaver visual development, so that you do not have to manually write code (but at least to understand the meaning of each sentence), while the tutorial as far as possible to map, so simple and easy to understand. If you know more about CSS, this step can be skipped.
1. Open Dreamweaver (take 8.0 for example), select File--New
, note that choosing a good document type, the XHTML 1.0 Transitional type is recommended, and for more information on document types, refer to:
choosing the right doctype to solve the CSS failure problem
Select the Insert div Tag tool for the toolbar, in the ID box of the dialog box, you can write the name of the ID, then create a new CSS style in the CSS panel, or click the new CSS Style button below, create a success will automatically insert the ID name, click OK to see the div tag has been inserted into the page.
The CSS style settings are as follows:
Note: The section within the Red Line box is the part that needs to be set in this example.
How about a fixed width of a column, that's so simple!
