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 basis 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--webjx.com</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 (webjx.com) </div> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
For example, note that selecting a good document type, and choosing the XHTML 1.0 Transitional type, for more information about document types, please refer to the following: Choose the right DOCTYPE to solve the CSS invalidation problem
Select the Insert div Tag Tool on the toolbar, write the ID name #layout in the ID box of the dialog box, and then create a new CSS style in the CSS panel, or click the new CSS Style button below, and automatically insert the ID name when the creation succeeds. Click OK to see that the DIV tag has been inserted into the page (if the div you just inserted is unchecked, you will need to enter the ID name manually when you create the new one in the CSS panel: #layout).
Note: Please enter the ID name you want to define in the selector here
The CSS style settings are as follows:
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
