Div CSS layout introductory tutorial_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 12:32:05
Original
1512 people have browsed it
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.
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
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;}
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.
#menu {padding:20px 20px 0 0} /*利用padding:20px 20px 0 0来固定菜单位置*/ #menu ul {float:right;list-style:none;margin:0px;} /*添加了float:right使得菜单位于页面右侧*/ #menu ul li {float:left;margin:0 10px}
The above code can realize the banner in the design sketch. Add the following style to css.css:
#banner { background:url(banner.jpg) 0 30px no -repeat; /*Add background image*/ width:730px; /*Set the width of the layer*/ margin:auto; /*Center the layer*/ height:240px; /*Setting Height*/ border-bottom:5px solid #EFEFEF; /*Draw a light gray solid line*/ clear:both /*Clear floats*/ }
It is very easy to pass the border It is easy to draw a solid line, and the network resources occupied by image downloading are reduced, making the page loading speed faster.
Another thing to note is clear:both, which means clearing all floats on the left and right. We will also use this attribute in the next layout: clear:left/right. Clear:both is added here because the previous ul and li elements were set to float. If they are not cleared, it will affect the setting of the banner layer position.
The above is the main part of the page. We add the following styles in css.css:
#pagebody { width:730px; /*Set width*/ margin: 8px auto; /*center*/ } #sidebar { width:160px; /*set width*/ text-align:left; /*text left aligned*/ float:left; /*float left*/ clear:left; /*floats are not allowed on the left side*/ overflow:hidden; /*the part beyond the width is hidden*/ } #mainbody { width:570px; text-align:left; float:right; /*Float right*/ clear:right; /*No floats allowed on the right side*/ overflow:hidden }
In order to see the effect, it is recommended to add the following code to #sidebar and #mainbody. You can delete this code after the preview is completed:
border :1px solid #E00; height:200px
Save the preview effect and you can see that these two layers float perfectly, meeting our layout requirements, and the actual width of the two layers should be 160 2 (border) 570 2=734px, which has exceeded the width of the parent layer. Due to clear, the two layers will not be misaligned. This will prevent the page we layout from having too long content (such as pictures) causing misalignment.
The overflow:hidden added later can automatically hide parts of the content that are too long (such as pictures). Usually we will see that when some web pages are loaded, the layout is stretched because the images are too large, and the layout does not return to normal until the page is downloaded. This problem can be solved by adding overflow:hidden.
If used properly, every attribute in CSS can solve many problems. Maybe they have nothing to do with the page you are laying out, but you must know the role of these attributes. When you encounter problems , you can try to use these properties to solve the problem.
/*Basic information*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} a:link ,a:visited {font-size:12px;text-decoration:none;} a:hover{}
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
