Three rows and three column of highly adaptive DIV layout » Read more…
Three rows and three column of highly adaptive DIV layout
Posted by Yao Yuan on January 27, 2011
0 comments
Commonly used methods and techniques
Posted by Yao Yuan on January 27, 2011
0 comments
CSS layout of the commonly used method
float: none | left | right
Value:
none: default. Objects do not float
left: text flow to the right side of the object
right: text flow to the left of the object
How it works, look at an example of a line of two
xhtml Code:
Example Source Code [www.hutshow.com]
To achieve More div arranged Center
Posted by Yao Yuan on January 27, 2011
0 comments
To achieve More div arranged Center » Read more…
the minimum height (min-height) of the Magical
Posted by Yao Yuan on January 27, 2011
0 comments
BOX minimum height can be set to a minimum height, when its content less often, but also to maintain a certain height BOX, beyond the downward automatically, but so far, only Opera and Mozilla support, IE7 began to also support But IE7 in beta, so the official version posted to the popular may be a relatively long time, unless it is tied to a MS operating system, and how the existing basis (IE6 80-90%), rational, magical minimum height of it?
There are two assumptions BOX, we want its minimum height 150PX. » Read more…
HTML page layout structure of the DIV CSS Getting Started Guide
Posted by Yao Yuan on January 22, 2011
0 comments
You are learning CSS layout? Is not fully grasp the pure CSS layout? There are usually two circumstances prevent you from learning:
The first possibility is that you do not understand the principles of CSS processing page. You consider the effect of the overall performance of your page before, you should first consider the semantic content and structure, and then for the semantics, structure to add CSS. This article will show you how the HTML should be structured.
Another reason is that you are very familiar with the performance of those layer properties (eg: cellpadding,, hspace, align = “left”, etc.) do nothing, do not know what the conversion to the corresponding CSS statement.
When you solve the first problem, to know how the structure of your HTML, I’ll give a list detailing the performance of the original properties of what CSS instead. » Read more…
The eleventh day : the menu without table
Posted by Yao Yuan on January 14, 2011
0 comments
Build up the initial layout, I began to fill the contents inside. The first is defined logo image:
Style sheet: # logo {MARGIN: 0px; padding: 0px; WIDTH: 200px; HEIGHT: 80px;}
Page code: <div id=”logo”> <a title=” WEB2.0 standards step by step tutorial to learn the basis of twelve days! “href=”http://www.hutshow.com/”> <img height =” 80 “alt =” WEB2.0 Standard Course “src =” logo.gif “width =” 200 “/> </ a> </ div>
The code above should now be easier to understand. CSS defines the first layer of a logo, and then call it in the page. It should be noted that, in order to make better use of web pages, web standards to all of us, part of the official content of the picture, add a alt attribute. The alt attribute is used to describe the role of the image (when image is not displayed on the display when the replacement text), so do not just write the name of meaningless images.
Next is to define the menu: » Read more…
the tenth day : adaptive height
Posted by Yao Yuan on January 14, 2011
0 comments
If we want the end of the 3 column layout plus line footer, put the copyright of such information. 3 must be aligned to meet the bottom of the problem. In the table layout, we use a small table big way nested table, you can easily align the three; but with div layout, three independent dispersion, high and low content, it is difficult alignment. In fact, we can nested div, the three into a DIV in to do the bottom of the alignment. Here is the example (box to simulate a white background page):
» Read more…
The ninth day : The first example CSS layout
Posted by Yao Yuan on January 14, 2011
0 comments
Then start to really design the layout. And traditional methods, you must first have in mind the outline of general ideas, and then use photoshop to draw it out. You may see information about web sites mostly very simple standard, as web standards are more concerned about the structure and content, in fact, it is beautiful and there is no fundamental conflict of the page, how you want the design to how to design, using traditional methods to achieve the layout of the table, with DIV can also be achieved. A mature process technology, as DIV and TABLE to the same tools, how to use depends on your imagination.
Note: In practical application process, DIV form in some areas where we as convenient, such as the background color of the definition. But there was nothing beneath, to judge the value that you choose. Well, not wordy, and we began: » Read more…
The eighth day : Getting Started of CSS layout
Posted by Yao Yuan on January 14, 2011
0 comments
CSS layout with the traditional form (table) the biggest difference is the layout: the positioning and are based on the original form, the table space or through the use of colorless and transparent GIF images to control the spacing of the text layout of the forum; and now with layers (div ) to locate, through the layer of margin, padding, border and other property to control the spacing forum.
» Read more…
The Seventh day : Getting Started with CSS
Posted by Yao Yuan on January 14, 2011
0 comments
XHTML coding standards in understanding, we will be CSS layout. First entry first introduce some knowledge of CSS.
If you are already familiar, you can skip this section.
CSS is Cascading Style Sheets (Cascading Style Sheets) abbreviation.
Documents on the web is a simple mechanism for adding style, belonging to the layout of the presentation layer language.
» Read more…
