Div CSS layout introductory tutorial_html/css_WEB-ITnose

Div CSS layout introductory tutorial

In web page production, there are many terms, such as: CSS, HTML, DHTML, XHTML, etc. . In the following article we will use some basic knowledge about HTML. Before you study this introductory tutorial, please make sure that you already have a certain basic knowledge of HTML. Let’s start using DIV CSS step by step to design web page layout.

The first step in all designs is to conceive. Once the concept is complete, generally speaking, you need to use photo processing software such as PhotoShop or FireWorks (hereinafter referred to as PS or FW) to simply draw the interface layout to be produced. , the following is the interface layout diagram I conceived.

Next, we need to plan the layout of the page based on the conceptual diagram. After carefully analyzing the diagram, we can easily find that the picture is roughly divided into the following parts:

1. The top part, which includes LOGO, MENU and a Banner picture;
2. The content part can be divided into sidebar and main content;
3. The bottom part, including some copyright information.
With the above analysis, we can easily lay out our design layer as shown below:

Based on the above picture, I drew an actual page layout diagram , explain the nesting relationship of the layers, so that it will be easier to understand.

The DIV structure is as follows:
　│body {}　/*This is an HTML element, I won’t explain the details*/
　└#Container {}　/*Page Layer container*/
　　├#Header {}　/*Page header*/
　　├#PageBody {}　/*Page body*/
　　│　├#Sidebar {}　/*Sidebar*/
Start writing HTML code and CSS.

业界动态

Technical Documentation

技术文档

艺术设计

Art Design

摄影摄像

Photography

计算机技术

资源下载

Computer Technology

	个人专栏
Resource download CG绘画		专题

Personal column

经典论坛

网页制作 | 图形图像 | 多媒体制作 | 网络编程 | ·网站建设

CG painting

您的位置：　首页 > 技术文档 > 网站建设 > Div CSS布局入门教程

有中国特色的“曲线域名”

回到列表

条件注释理论及实践

Topic

Classic Forum

　Div CSS布局入门教程

作者：aultoale　时间： 2006-06-10　文档类型：原创　来自：蓝色理想
 

第 1 页 页面布局与规划
第 2 页 写入整体层结构与CSS
第 3 页 页面顶部制作之一
第 4 页 页面顶部制作之二
第 5 页 页面制作-用好border和clear
 

Web page production | graphics | multimedia production | network programming | ·Website construction Your location: Homepage> Technical Documentation> Website Construction> Div CSS Layout Introductory Tutorial "Curve domain name" with Chinese characteristics Back to list Theory and practice of conditional comments 　Div CSS layout introductory tutorial Author: aultoale Time: 2006-06-10 Document type: Original from: Blue Ideal Page 1 Page layout and planning Page 2 writing the overall layer structure and CSS 3 page top production part one Page 4 page top production part two Page 5 page production - make good use of border and clear

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

下面，我们在

标签对中写入DIV的基本结构，代码如下：

[color=#aaaaaa][/color]
　　

[color=#aaaaaa][/color]
　　

　　

[color=#aaaaaa][/color]
　　　　

[color=#aaaaaa][/color]
　　　　

　　　　

[color=#aaaaaa][/color]
　　　　

　　

　　

[color=#aaaaaa][/color]
　　

In order to make it easier to read the code in the future, we should add relevant comments. Next, open the css.css file and write the CSS information. The code is as follows:

/ *Basic information*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*Page layer container*/
#container { width:100%}

/*Page header*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/* Page body*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*Page bottom*/
#Footer {width:800px; margin:0 auto;height:50px;background:#00FFFF}

Save the above file and open it with a browser. At this time we can already see the basic structure. This is the page frame.

Instructions on the above CSS (for details, please refer to the CSS2.0 Chinese manual, available for download online):

1. Please develop good comment habits, this is very important;

2. Body is an HTML element. All content on the page should be written within this tag pair, so I won’t say more;

3. Explain the meaning of some commonly used CSS codes. :

font:12px Tahoma;
Abbreviations are used here, the complete code should be: font-size:12px; font-family:Tahoma; indicating that the font size is 12 pixels and the font is in Tahoma format;

margin:0px;
also uses abbreviations, the complete version should be:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left :0px
or
margin:0px 0px 0px 0px

The order is top/right/bottom/left, you can also write it as margin:0 (abbreviation);
The above style description body The top, right, bottom and left margins of some pairs are 0 pixels. If you use auto, the margins will be automatically adjusted.

There are also the following writing methods:
margin:0px auto;
indicates the top and bottom margins. is 0px, and the left and right are automatically adjusted;
The padding attribute we will use in the future has many similarities with margin. Their parameters are the same.
It’s just that they have different meanings. Margin is the external distance. , and padding is the internal distance.

text-align:center
Text alignment can be set to left, right, or center. Here I set it to center alignment.

background:#FFF
Set the background color to white. The abbreviation is used for the color here. The complete version should be background:#FFFFFF.
background can be used to fill the specified layer with background color and background image. We will use the following format in the future:
background:#ccc url('bg.gif') top left no-repeat;
Representation: Use #CCC (grayscale color) to fill the entire layer, use bg.gif as the background image,
top left
indicates that the image is located at the upper left end of the current layer, no-repeat indicates that only the image size is displayed without Fill the entire layer.
top/right/bottom/left/center
is used to position the background image, indicating top/right/bottom/left/center respectively; you can also use
background:url('bg.gif') 20px 100px;
means that the X coordinate is 20 pixels and the Y coordinate is 100 pixels.
repeat/no-repeat/repeat-x/repeat-y
respectively means filling the entire layer/no Fill / Fill along the X axis / Fill along the Y axis.

height / width / color
represents height (px), width (px), and font color (HTML color system table) respectively.

4. How to center the page?

After saving the code, you can see that the entire page is displayed in the center. So what is the reason why the page is displayed in the center?
is because we used the following attributes in #container:
margin:0 auto;
According to the previous instructions, you can know that the top and bottom margins are 0, and the left and right margins are automatic, so this layer will Automatically centered.
If you want the page to be on the left, just cancel the auto value, because it is displayed on the left by default.
With margin:auto we can easily center the layer automatically.

5. Here I only introduce these commonly used CSS properties. For others, please refer to the CSS2.0 Chinese manual.

 

褰