Home >Web Front-end >CSS Tutorial >How to use CSS for web page layout

How to use CSS for web page layout

巴扎黑Original: 2017-03-30 15:20:152702browse

Day 1: What kind of DOCTYPE to choose

Preface

Hi everyone! This series of articles is written based on Ajie's own process of creating the w3cn.org site. Ajie has never produced a website that truly complies with web standards before. Now I am making reference to foreign materials and recording my thoughts and experiences in the process. I hope it will be helpful to everyone. Okay, let's get started.

The first day

Start making a site that meets standards. The first thing to do is to declare the DOCTYPE that meets your needs.

Look at the original code of the homepage of this site, you can see that the first line is:

Open some sites that meet standards, such as the famous web design software developer Macromedia and the personal design master Zeldman website, you will find the same code. The code for other standards-compliant sites (such as k10k.net) is as follows:

So what do these codes mean? Does it have to be placed?

What is DOCTYPE

We call the above codes a DOCTYPE statement. DOCTYPE is the abbreviation of document type and is used to indicate what version of XHTML or HTML you are using.

The DTD (such as xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the rules of the document. The browser will interpret the identity of your page based on the DTD you define and display it. come out.

To build a standards-compliant web page, the DOCTYPE declaration is an essential and critical component; unless your XHTML determines a correct DOCTYPE, neither your logo nor your CSS will take effect.

XHTML 1.0 provides three DTD declarations to choose from:

Transitional (Transitional): A DTD with very loose requirements, which allows you to continue to use the HTML4.01 identifier (but must comply with xhtml writing method). The complete code is as follows:

Strict: For strict DTD, you cannot use any presentation layer identifiers and attributes, such as
. The complete code is as follows:

Frameset: A DTD specifically designed for frame pages. If your page contains a frame, you need to use this DTD. The complete code is as follows:

WHAT DOCTYPE DO WE CHOOSE

The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards, Transitional DTD (XHTML 1.0 Transitional) is currently the ideal choice (including this site, which also uses transitional DTD). Because this DTD also allows us to use presentation layer identifiers, elements and attributes, it is also easier to pass W3C code verification.

Note: The "identification and attributes of the presentation layer" mentioned above refer to those tags used purely to control performance, such as tables for typesetting, background color identification, etc. In XHTML, tags are used to represent structures, not to achieve presentation. The purpose of our transition is to ultimately separate data and presentation.

For example: a mannequin changes clothes. The model is like data, and the clothes are the form of expression. The model and the clothes are separated, so you can change clothes at will. In the original HTML4, data and presentation were mixed together, and it was very difficult to change the presentation form at once. Haha, it's a bit abstract. This concept needs to be gradually understood during the application process.

Supplement

The DOCTYPE declaration must be placed at the top of every XHTML document, above all code and markup.

For more details, please visit the W3C website

Day 2: What is a namespace

After the DOCTYPE is declared, the next code is:

Usually our HTML4.0 code is just , what is "xmlns" here?

This "xmlns" is the abbreviation of XHTML namespace, which is called the "namespace" statement. What is the role of namespace? Ajie's own understanding is:

Since xml allows you to define your own logo, the logo you define may be the same as the logo defined by others, but have different meanings. Errors can easily occur when files are exchanged or shared. To avoid this error, XML uses namespace declarations, which allow you to identify your identity through a URL pointing to it. For example:

Both Xiao Wang and Xiao Li have defined a identifier. If Xiao Wang's name space is "http://www.xiaowang.com" and Xiao Li's name space is "http ://www.xiaoli.com", then when the two documents exchange data, the identifier will not be confused because it belongs to a different name space.

A more popular explanation is: a namespace is to mark a document to tell others who this document belongs to. It's just that this "who" is replaced by a website address.

XHTML is a markup language that transitions from HTML to XML. It needs to comply with XML document rules, so it also needs to define a namespace. And because XHTML1.0 cannot customize the logo, its namespace is the same, which is "http://www.w3.org/1999/xhtml". It doesn't matter if you don't quite understand it yet, at this stage we just need to copy the code. The lang="gb2312" after

specifies that your document should be in Simplified Chinese.

Day 3: Define the language encoding

The third step is to define your language encoding, similar to this:

In order to be correctly interpreted by browsers and pass W3C code verification, all XHTML documents must declare the encoding language they use. We generally use gb2312 (Simplified Chinese). When making multi-language pages, we may also use Unicode, ISO-8859-1, etc., which can be defined according to your needs.

Usually this definition is enough. However, it should be added that XML documents do not define language encoding in this way. XML is defined as follows:

You can see similar statements in the first line of code on the homepage of Macromedia.com. This is also the definition method recommended by W3C. So why don't we just adopt this approach? The reason is that some browsers have incomplete support for standards and cannot correctly understand such definition methods, such as IE6/windows. Therefore, under the current transition plan, we still recommend using the meta method. Of course, you can write both ways.

Looking at the source code of this website, you will find that there is one more sentence where the language encoding is defined:

This is written for older browsers to ensure that various browsers can interpret the page correctly.

Note: At the end of the above declaration statement, you see a slash "/", which is different from our previous HTML4.0 code writing. The reason is that XHTML syntax rules require that all tags must have a beginning and an end. For example, and ,

and

, etc., for unpaired identifiers, it is required to add a space at the end of the identifier, followed by a "/". For example,
is written as
, and is written as . The reason for adding spaces is to prevent the browser from not recognizing the codes together.

Day 4: Calling style sheets

Use web standards to design websites. The transition method is mainly to use XHTML+CSS. CSS style sheets are essential. This requires all web designers to be proficient in CSS. If you have not used it before, start learning now. To create a website that complies with web standards, you cannot design beautiful pages without knowing CSS.

In fact, all aspects of performance need to be implemented with CSS. We used to use table for positioning and layout, but now we have to use p for positioning and layout. This is a change in the way of thinking, which is a bit uncomfortable at first. Haha, there will be resistance to any change. In order to enjoy the "benefits" brought by standards, it is worthwhile to give up some old traditional practices.

Externally calling style sheets

In the past, we usually used two methods to use style sheets:

Inline method on the page: that is, inserting the style sheet into the page Write it directly in the head area of the page code. Similar to this:

External calling method: Write the style sheet in a separate .css file, and then call it with code similar to the following in the head area of the page.

In a design that complies with web standards , we use the external calling method, and the benefits are self-evident. You can change the style of the page without modifying the page, only modifying the .css file. If all pages call the same style sheet file, then changing one style sheet file can change the styles of all files.

Double-table method to call the style sheet

Look at the original code of some standards-compliant sites. You may see that there are the following two sentences where the style sheet is called:

Why do you have to write it twice?

In fact, under normal circumstances, it is enough to use the external link method (that is, the first sentence). The double table call I use here is just an example. The "@import" command is used to enter the style sheet. The "@import" command is invalid in Netscape 4.0 browsers. In other words, when you want certain effects to be hidden in the Netscape 4.0 browser and displayed in 4.0 or above or other browsers, you can use the "@import" command method to call the style sheet.

Day 5: Other settings in the head area

These tips mainly focus on meta tag settings. In fact, they have little to do with complying with web standards. Just pay attention to adding them at the end. Just "/" to close the tag, but since this is an introductory tutorial, let's write it in more detail.

Favorites icon

If you add this site to your favorites, you can see that the IE icon before the favorites URL becomes a special icon for this site. To achieve this effect is very simple, first make a 16x16 icon, name it favicon.ico, and place it in the root directory. Then embed the following code into the head area:

< ;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Content prepared for search engines

The code is as follows, just replace it with the content of your own site:

Allow search robots to search all links in the site. If you want certain pages not to be searched, it is recommended to use the robots.txt method

Set site author information

< meta name="author" content="ajie@netease.com,阿杰" />

Set site copyright information

Brief introduction of the site (recommended)

Keywords of the site (recommended)

Let’s introduce this much first. Supplementary explanation, the previous 5 sections were all about the code of the head area, and the actual page content has not been mentioned at all. Haha, don’t worry, in fact, the head area is very important. You can know the designer by looking at the head code of a page. Is it professional enough?

Day 6: XHTML code specifications

Before starting formal content production, we must first understand the code specifications of web standards. Understanding these specifications can help you avoid detours and pass code verification as soon as possible.

1. All tags must have a corresponding closing tag

In the past, in HTML, you could open many tags, such as

and < ;li> instead of necessarily writing the corresponding

and to close them. But this is not legal in XHTML. XHTML requires a strict structure and all tags must be closed. If it is a separate unpaired tag, add a "/" at the end of the tag to close it. For example:

2. The names of all tag elements and attributes must be in lowercase

Unlike HTML, XHTML is case-sensitive, and < ;TITLE> is a different label. XHTML requires that all tag and attribute names must be lowercase. For example: <BODY> must be written as <body>. Mixed case is also not recognized. Usually the attribute name "onMouseOver" automatically generated by Dreamweaver must also be changed to "onmouseover". 3. All XML tags must be nested reasonably Also because XHTML requires a strict structure, all nesting must be in order. Previously we Code written like this: /b> must be modified to: /p> That is to say, the nesting layer by layer must be strictly symmetrical. 4. All attributes must be enclosed in quotation marks "" In HTML, you do not need to add quotation marks to attribute values, but in XHTML, they Must be quoted. For example: <height=80> must be changed to: <height="80"> In special cases, you need to use double quotes in the attribute value, you can use " , single quotes can use ', for example: <alt="say'hello'"> 5. Use encoding to represent all < and & special symbols Any less than sign (<), which is not part of the label, must be encoded as & l t; Any greater than sign (>), which is not part of the label, must be encoded as > Any ampersand (&) that is not part of an entity must be encoded as & a m p; Note: There are no spaces between the above characters ##. #6. Assign a value to all attributes XHTML stipulates that all attributes must have a value, and if there is no value, it will repeat itself. For example: <td nowrap> < input type="checkbox" name="shirt" value="medium" checked> must be modified to: <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> 7. Do not use "--" in the comment content "--" can only occur at the beginning and end of XHTML comments end, that is, they are no longer valid in the content. For example, the following code is invalid:  Replace the internal dotted lines with equal signs or spaces <!--This is a comment============This is a comment- -> Some of the above specifications may seem strange, but they are all aimed at making our code have a unified and unique standard to facilitate future data reuse . <h2>Day 7: Introduction to CSS</h2> After understanding the XHTML code specifications, we will proceed with CSS layout. First, let’s introduce some introductory knowledge of CSS. If you are already familiar with it, you can skip this section and go directly to the next section. CSS is the abbreviation of Cascading Style Sheets. It is a simple mechanism for adding styles to web documents and belongs to the layout language of the presentation layer. 1. Basic syntax specifications Analysis of a typical CSS statement: p {COLOR:#FF0000;BACKGROUND:#FFFFFF} We call "p" "selectors", indicating that we want to define a style for "p"; The style declaration is written in a pair of curly brackets "{}"; COLOR and BACKGROUND are called "property", and different properties are separated by semicolons ";"; "#FF0000" and "#FFFFFF" are the values of the properties (value ). 2. Color value Color value can be written in RGB value, for example: color: rgb(255,0,0), or hexadecimal Write, like the example above color:#FF0000. If the hexadecimal values are repeated in pairs they can be abbreviated with the same effect. For example: #FF0000 can be written as #F00. However, it cannot be abbreviated if it does not repeat. For example, #FC1A1B must be filled with six digits. 3. Define font Web standards recommend the following font definition method: body { font-family: "Lucida Grande", Verdana, Lucida , Arial, Helvetica, Song Dynasty, sans-serif; } The fonts are selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be designated Lucida Grande. If not, it is designated as Verdana font, if there is no Verdana, it is designated as Lucida font, and so on,; Lucida Grande font is suitable for Mac OS X; Verdana font is suitable for all Windows system; Lucida is suitable for UNIX users "宋体" is suitable for simplified Chinese users; If none of the listed fonts can be used, the default sans-serif The font can guarantee the call; 4. Group selector When several elements have the same style attributes, they can call a statement together, and the elements are separated by commas. : p, td, li { font-size : 12px; } 5. Derived selector You can use derived selectors to define child elements in an element Style, for example: li strong { font-style: italic; font-weight: normal;} is to define an italic but not bold style for the sub-element strong under li. 6.id selector CSS layout is mainly implemented using the layer "p", and the style of p is defined through the "id selector". For example, we first define a layer and then define it in the style sheet like this: #menubar { MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} where "menubar" is the id name you define. Note the "#" sign in front. The id selector also supports derivation, for example: #menubar p { text-align : right; margin-top : 10px; } This method is mainly used Definition layers and those that are more complex and have multiple derived elements. 7. Category selector Use a dot at the beginning to indicate the category selector definition in CSS, for example: .14px {color : # f60 ;font-size:14px ;} In the page, use the class="category name" method to call: 14px size font This method is relatively simple and flexible, and can be created and deleted at any time according to page needs. 8. Define the link style Four pseudo-classes are used in CSS to define the link style, namely: a:link, a:visited, a: hover and a : active, for example: a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text -decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text -decoration : none ;color : #F90 ;} The above statements respectively define the styles of "links, visited links, when the mouse is over, and when the mouse is clicked". Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA". Haha, I feel a little dizzy after reading so much. In fact, there are many more grammatical specifications for CSS. Here are just some commonly used ones. After all, we are taking it step by step and it is impossible to become fat in one bite:) <h2>Day 8: Introduction to CSS Layout</h2> The biggest difference between CSS layout and traditional table layout is that the original positioning uses tables, through the spacing of the tables or using colorless and transparent GIF images To control the spacing of the text layout sections; now the layer (p) is used for positioning, and the spacing of the sections is controlled through the margin, padding, border and other attributes of the layer. 1. Define p Analyze a typical definition of p example: #sample{ MARGIN: 10px 10px 10px 10px; PADDING :20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: # CCC 2px solid; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150 %; WIDTH:60%; } The description is as follows: The name of the layer is sample, and this style can be called by using on the page. MARGIN refers to the blank space left outside the border of the layer, used for page margins or to create a gap with other layers. "10px 10px 10px 10px" respectively represents the four margins of "top, right, bottom and left" (clockwise direction). If they are all the same, they can be abbreviated to "MARGIN: 10px;". If the margin is zero, write "MARGIN: 0px;". Note: When the value is zero, except for the RGB color value 0% which must be followed by a percent sign, in other cases the unit "px" does not need to be followed. MARGIN is a transparent element and cannot define a color. PADDING refers to the space between the border of the layer and the content of the layer. Like margin, specify the distance from the top, right, bottom and left borders to the content respectively. If they are all the same, they can be abbreviated to "PADDING:0px". To specify the left side individually, you can write "PADDING-LEFT: 0px;". PADDING is a transparent element and cannot define color. BORDER refers to the border of the layer. "BORDER-RIGHT: #CCC 2px solid;" defines the right border color of the layer as "#CCC", the width as "2px", and the style as "solid" straight line. If you want a dotted line style, you can use "dotted". BACKGROUND is the background that defines the layer. It is defined in two levels. First define the image background and use "url(../images/bg_logo.gif)" to specify the background image path; secondly define the background color "#FEFEFE". "no-repeat" means that the background image does not need to be repeated. If you need to repeat it horizontally, use "repeat-x", to repeat it vertically, use "repeat-y", and to repeat it to cover the entire background, use "repeat". The following "right bottom;" means that the background image starts from the lower right corner. If there is no background image, you can only define the background color BACKGROUND: #FEFEFE COLOR is used to define the font color, which has been introduced in the previous section. TEXT-ALIGN is used to define the arrangement of content in the layer, center is in the middle, left is in the left, and right is in the right. LINE-HEIGHT defines the line height. 150% means that the height is 150% of the standard height. It can also be written as: LINE-HEIGHT:1.5 or LINE-HEIGHT:1.5em, which have the same meaning. WIDTH is the width of the defined layer, which can be a fixed value, such as 500px, or a percentage, like "60%" here. It should be noted that this width only refers to the width of your content, and does not include margin, border and padding. However, it is not defined this way in some browsers, so you need to try more. The following is the actual performance of this layer: <img src="http://www.csswebs.org/images/arrow.gif" alt="How to use CSS for web page layout" > Demo page We can see that the border is 2px gray, and the background image is not in the lower right Repeat, the distance between the content and the left border is 20px, the content is centered, and everything is as expected. Hoho, although it doesn’t look good, it is the most basic. If you master it, you will have learned half of the CSS layout technology. That's it, it's not difficult! (What is the other half? The other half is the positioning between layers. I will explain it step by step later.) 2. CSS2 box model Since 1996 With the launch of CSS1 in 2016, the W3C organization recommended that all objects on the web page be placed in a box. Designers can control the properties of this box by creating definitions. These objects include paragraphs, lists, titles, and pictures. and layer. The box model mainly defines four areas: content, padding, border and margin. The sample layer we talked about above is a typical box. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember. <img src="http://www.csswebs.org/articles/Archiver/images/cssbox3d.gif" alt="How to use CSS for web page layout" > 3. Use background processing for all auxiliary images Use XHTML+CSS layout, there is a technology that you are not used to at first , it should be said that the way of thinking is different from the traditional table layout, that is: all auxiliary pictures are realized with background. Similar to this: BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; Although it is possible to insert <img> directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the <img> element, while others are similar to logos, title pictures, and list prefixes. Images must be displayed using background or other CSS methods. There are two reasons for this: <img src="http://www.csswebs.org/images/arrow.gif" alt="How to use CSS for web page layout" > Completely separate performance from structure (refer to reading another article: "Understanding Performance "Separated from the structure"), using CSS to control all appearance and performance for easy revision. <img src="http://www.csswebs.org/images/arrow.gif" alt="How to use CSS for web page layout" > Make the page more usable and more friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud. <h2>Day 9: First CSS Layout Example</h2> The next step is to actually design the layout. As with the traditional method, you first have to have a rough outline idea in your mind, and then draw it out in photoshop. You may see that most websites related to web standards are very simple, because web standards pay more attention to structure and content. In fact, it has no fundamental conflict with the beauty of web pages. You can design it however you want. The layout is implemented using the traditional table method. p can also be implemented. Technology has a maturation process. Think of p as the same tool as TABLE. How to use it depends on your imagination. Note: In actual application, p is indeed not as convenient as a table in some places, such as the definition of background color. But everything has gains and losses, and the choice depends on your value judgment. Okay, no more wordy, let’s start: <h2>1. Determine the layout </h2> w3cn’s initial design sketch is as follows: <img src="http://www.csswebs.org/articles/Archiver/images/copy_w3cnhome.gif" alt="How to use CSS for web page layout" > If you use the table design method, it is usually a three-row layout <img src="http://www.csswebs.org/articles/Archiver/images/layout_table.gif" alt="How to use CSS for web page layout" > . If using p, I would consider using three columns for layout, like this <img src="http://www.csswebs.org/articles/Archiver/images/layout_css1.gif" alt="How to use CSS for web page layout" > . <h2>2. Define the body style </h2> First define the body style of the entire page, the code is as follows: body { MARGIN: 0px; PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom; FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体', '新宋体',arial,verdana,sans-serif; COLOR: #666; FONT-SIZE:12px; LINE-HEIGHT:150%; } The above code The function was explained in detail in the previous day's tutorial, so everyone should understand it at a glance. The border margin is defined as 0; the background color is #FEFEFE, the background image is bg_logo.gif, the image is located in the lower right corner of the page, and does not repeat; the font size is defined as 12px; the font color is #666; the line height is 150%. <h2>3. Define the main p</h2> When I used CSS layout for the first time, I decided to use a fixed-width three-column layout (simpler than the adaptive resolution design, hoho, don’t say I’m lazy, implement a simple one first , increase your confidence! ). Define the width of the left, middle and right to be 200:300:280 respectively, which are defined in CSS as follows: /*Define the left column style of the page*/ #left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*Define the column style on the page*/ #middle{ POSITION: absolute; LEFT:200px; TOP:0px; WIDTH:300px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #DADADA; } /*Define the right column style of the page */ #right{ POSITION: absolute; LEFT:500px; TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #FFF; } Note: I used POSITION: absolute; to define p in the middle column and the right column, and then defined LEFT:200px;TOP:0px; and LEFT:500px;TOP:0px respectively. ;This is the key to this layout, I used absolute positioning of the layers. Define the middle column to be 200px from the left border of the page and 0px from the top; define the right column to be 500px from the left border of the page and 0px from the top;. The code of the entire page at this time is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> < ;head> <title>Welcome to the new "Web Designer": web standard tutorial and promotion

Left column of page

Middle column of page

Right column of the page

At this time, the effect of the page can only be seen in three parts juxtaposed gray rectangles, and a background image. But I want the height to be full screen, what should I do?

4.100% adaptive height?

In order to keep the three columns with the same height, I tried to set "height:100 in #left, #middle and #right %;", but found that there was no expected adaptive height effect at all. After some attempts, I had to give each p an absolute height: "height:1000px;", and as the content increases, I need to constantly correct this value. Is there no way to adjust the height? As Ajie's own study deepened, he discovered a flexible solution. In fact, there is no need to set 100% at all. We have been too deeply imprisoned by table thinking. This method will be introduced in detail in the next section of study.

Day 10: Adaptive height

If we want to add a footer line at the end of the 3-column layout to put information such as copyright. I encountered the problem of having to align the bottom of 3 columns. In the table layout, we use the method of nesting large tables into small tables, which can easily align the three columns; with the p layout, the three columns are scattered independently and the content is of different heights, making it difficult to align. In fact, we can completely nest p, put three columns into one p, and achieve bottom alignment. Here is an implementation example (a white background box simulates a page):

The main code of the page in this example is as follows:

Specific style sheet All are written in the corresponding sections. The key point is that the #mainbox layer is nested in three layers: #menu, #sidebar and #content. When the content of #content increases, the height of #content will increase, and the height of #mainbox will also expand, and the #footer layer will automatically move down. This achieves a high degree of adaptability.

It is also worth noting that #menu and #content are floating on the right side of the page "FLOAT: right;", #sidebar is floating on the left side of the #menu layer "FLOAT: left;", this is floating Method positioning, you can also use absolute positioning to achieve such an effect.

There is another problem with this method, that is, the background of the sidebar #sidebar cannot be 100%. The general solution is to fill it with the body's background color. (The background color of #mainbox cannot be used, because the background color of #mainbox is invalid in browsers such as Mozilla.)

Okay, the main framework has been built, and the remaining work is just to add bricks and tiles to it. If you want to try other layouts, it is recommended to read the following articles:

Day 11: Menu without tables

The layout was initially set up, and I started filling in the content. The first is to define the logo image:

Style sheet: #logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
Page code:

The above code should be easy to understand now. First define a logo layer in CSS, and then call it on the page. It should be noted that in order to make web pages more usable, web standards require everyone to add an alt attribute to all images that are formal content. This alt attribute is used to describe the function of the image (display replacement text when the image cannot be displayed), so don't just write a meaningless image name.

The next step is to define the menu.

1. Menu without tables (vertical)

Let’s first look at the final effect of the menu: demo page

Usually we can at least nest it A 2-layer table is used to implement such a menu. The interval line is implemented by setting the background color in td and inserting a 1px high transparent GIF image; the alternating effect of the background color is implemented by using the onmouseover event of td. But if you look at the page code of this menu, you will see that there are only the following sentences:

What are Web Standards

Benefits of using standards

Web page template download

WEB standards related tutorials

Web page production software

Using Help

. The secret of realizing the effect of the entire menu lies entirely in id="menu". We Let’s look at the definition of menu in CSS:

(1) First define the main style of the menu layer:

#menu {
MARGIN: 15px 20px 0px 15px; /*Define the outer border distance of the layer*/
PADDING:15px; /*Define the inner border of the layer to 15px*/
BACKGROUND: #dfdfdf; /*Define the background color*/
COLOR: #666; /*Define font color*/
BORDER:#fff 2px solid; /*Define border as 2px white line*/
WIDTH:160px; /*Define content width as 160px*/
}

(2) Next define the style of the unordered list:

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*Do not display borders*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}

#menu li {BORDER-TOP : #FFF 1px solid; MARGIN: 0px;}

Explanation: The derivation method of the id selector is used to define (refer to Day 7: Introduction to CSS) the child elements in the menu layer< Styles for ;ul> and
. LIST-STYLE-TYPE: none means that the default style of the unordered list is not used, that is, the small dots are not displayed (we will use our own icons to replace the small dots later). BORDER-TOP: #FFF 1px solid; defines a 1px spacing line between menus.

(3) Define onmouseover effect

#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT -WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }

The explanation is as follows:

"display:block;" means to display tag a as a block-level element, making the link become a button;
"BACKGROUND: url(images/icon_dot_lmenu.gif ) transparent no-repeat 2px 8px;" This sentence defines the icon of the small dot that replaces li. "Transparent" means that the background is transparent, and "2px 8px" specifies that the position of the icon is 2px from the left and 8px from the top. This sentence can also be split into four sentences: "BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
" #menu li a:hover" defines the color change and small icon change when the mouse moves over the link.

OK, this is how the menu without tables is implemented. You can clearly feel that all the presentation styles originally written in HTML have been stripped and put into CSS files. The page code is saved by more than half. It is very simple to modify the menu style through CSS.

2. Menu without table (horizontal)

The above is a vertical menu. If you want to display a horizontal menu, can you also use li? Of course it is possible. The code is given below, and the effect is at the top of this page:

Page code
- Home
- Web Standards
- Benefits of Standards
- How to transition< ;/a>
- Related tutorials
- Tools
- Resources and links
- FAQ
Style Sheet Code

# submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }

#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE -TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}

#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}

#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT- DECORATION: none;
}

#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }

#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}

The above codes will not be analyzed one by one . The key to the horizontal menu is: the "FLOAT: left;" statement when defining the
style. Also pay attention to the DISPLAY:inline; sentence in the UL definition, which means that li is forced to be presented as an inline object and the line is deleted from the object. In layman's terms, li does not wrap lines. Achieve horizontal arrangement. You can also define the width of each submenu and control the spacing of menus as shown in the example. Well, you can also give it a try and use li to implement various menu styles.

Tips: If the sum of the widths of your submenus is greater than the width of the layer, the menu will automatically fold. Using this principle, you can achieve 2-column or 3-column layout of a single unordered list, which is difficult to achieve with HTML. of.

Day 12: Validation and Common Errors

After working hard for many days, we worked hard to learn to use XHTML+CSS to redesign our website. So how do we know that the pages we create really comply with web standards? W3C and some volunteer websites provide online verification programs to help us check whether pages comply with standards and provide help information for correcting errors. These checks are very useful and are the first thing I do when debugging a page.

1.XHTML verification

Verification URL: http://validator.w3.org/

Verification method: URL verification , File upload verification

If the verification is successful, "This Page Is Valid XHTML 1.0 Transitional!" will be displayed, as shown in the figure:

Verification failed, More verification options and error messages will be displayed, as shown in the figure:

Generally, selecting "Show Source" and "Verbose Output" can help you find the line where the error code is located and the error reason.

XHTML validation common error causes comparison table

No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--DOCTYPE is not defined.

No Character Encoding Found! Falling back to UTF-8.--Undefined language encoding.

end tag for "img" omitted, but OMITTAG NO was specified--The image tag is not closed with "/".

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--The attribute value must be quoted.

element "p" undefined---The p tag cannot be uppercase and must be changed to lowercase p.

required attribute "alt" not specified---The image needs to add the alt attribute.

required attribute "type" not specified---The tag called by JS or CSS misses the type attribute.

The most common mistake is the capitalization of labels. Usually these errors are related. For example, if you forget a
tags will report errors, so don't be afraid of seeing a bunch of errors. Usually, once one error is solved, the other errors will disappear. If your page passes XHTML1.0 validation, you can place an icon on the page: The code is as follows:

2.CSS2 verification

Verification URL: http://jigsaw.w3.org/css-validator/

Verification method: URL verification, file upload verification, direct code verification

If the verification is successful, "Congratulations, this document has passed the style sheet verification!", hoho, the verification information supports Chinese. As shown in the figure:

#If the verification fails, two types of errors will be displayed: errors and warnings. The error means that it must be corrected, otherwise it will not pass the verification; the warning means that there is code that is not recommended by W3C and it is recommended to modify it.

CSS2 verification common error causes comparison table

(Error) Invalid number: color909090 is not a color value: 909090 ---Hexadecimal color value must be added "#" sign, that is, #909090

(error) invalid number: margin-topUnknown dimension : 6pixels ---pixels is not a unit value, the correct way to write it is 6px

(error) attribute scrollbar- face-color does not exist: #eeeeee --- Define the scroll bar color as a non-standard attribute

(error) value cursorhand does not exist: hand is a non-standard attribute value, change it to cursor:pointer

(Warning) Line: 0 font-family: It is recommended that you specify a type family as the last choice--W3C recommends that when defining fonts, end with a type of font, such as "sans-serif", to ensure that it can be used in different operations Under the system, web fonts can be displayed.

(Warning)Line: 0 can't find the warning message for otherprofile --Indicates that there are non-standard attributes or values in the code, and the verification program cannot determine and provide corresponding warning information.

Similarly, after passing the verification, you can place a CSS verification passing icon, the code is as follows:

The above is the detailed content of How to use CSS for web page layout. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to use css to implement a 6-square grid iconNext article：How to use css to implement a 6-square grid icon

See more