[Add to favorites] Div + CSS layout Accumulation

When writing CSS, I often worry about some names. For example, what words should I use to represent the background behind the menu? As we all know, menus are generally represented by menus, so I will use menubg for the background behind the menu, and # menubg {…} will be written in CSS {...}.
How can we name other items such as the search box? Some of the following can be regarded as standard names. If there are any errors or omissions, please help me with them. Thank you!

[Copy to clipboard]

Code:

Header: Header
Logon entry: loginbar
Logo: logo
Sidebar: sidebar
Advertisement: banner
Navigation: nav
Subnavigation: subnav
Menu: Menu
Sub menu: submenu
Search: Search
Scroll: Scroll
Page subject: Main
Content: Content
Tab: Tab
Article List: List
Message: msg
TIPS: Tips
Topic title: Title
Join: joinus
Guide: Guild
Service: Service
Hotspot: hot
News: News
Download: Download
Registration: regsiter
Status: Status
Button: BTN
Vote: Vote
Partner: Partner
Link: friendlink
Footer: footer
Copyright: Copyright
Submit: Submit
Text Box: textbox
Statistics: Count

The preceding structure can be used in combination. For example, the title of the left column is lefttitle. The footernav writing principle of the bottom navigation bar is: 1. lowercase; 2. try to use English. 3. do not add the upper bars or underscores; 4. try not to be abbreviated, except words that can be understood without looking at them.

11.17 Netease CSS writing

[Copy to clipboard]

Code:

/* Global CSS definition */
Body {text-align: center; font-family: "", Arial; margin: 0; padding: 0; Background: # FFF; font-size: 12px; color: #000 ;}
Div, form, IMG, UL, ol, Li, DL, DT, DD {margin: 0; padding: 0; Border: 0 ;}
H1, H2, H3, H4, H5, H6 {margin: 0; padding: 0 ;}
Table, TD, TR, Th {font-size: 12px ;}

/* Link color */
A: link {color: #1f3a87; text-Decoration: none ;}
A: visited {color: # 83006f; text-Decoration: none ;}
A: hover {color: # bc2931; text-Decoration: underline ;}
A: active {color: # bc2931 ;}
/* Color attribute [Define rules, lowercase C + color name] */
. Cred, A. cred: Link, A. cred: visited {color: red ;}
. Cblue, A. cblue: Link, A. cblue: visited {color: #1f3a87 ;}
. Cdred, A. cdred: Link, A. cdred: visited {color: # bc2931 ;}
. Cgray, A. cgray: Link, A. cgray: visited {color: # 4f544d ;}
. Cdgray, A. cdgray: Link, A. cdgray: visited {color: #666 ;}
. Cwhite, A. cwhite: Link, A. cwhite: visited {color: # FFF ;}
. Cblack, A. cblack: Link, A. cblack: visited {color: #000 ;}
A. cblack: hover {color: # bc2931 ;}
. Cyellow, A. cyellow: Link, A. cyellow: visited {color: # ff0 ;}
. Cgreen, A. cgreen: Link, A. cgreen: visited {color: #008000 ;}
/* Font attributes [Define rules, lowercase F + attribute name] */
. FB {font-weight: bold ;}
. Fi {font-style: italic ;}

/* Font size */
. F12px {font-size: 12px ;}
. F14px {font-size: 14px ;}

/* Other attributes */
. Left {float: Left ;}
. Right {float: Right ;}
. Clear {clear: Both; font-size: 1px; width: 1px; visibility: hidden ;}
. Hidden {display: none ;}
. Unline,. unline A {text-Decoration: none ;}
. Noborder {border: none ;}

Auto scaling of all images on the pageCode

[Copy to clipboard]

Code:

<Script language = "JavaScript">
VaR imgobj;
For (I = 0; I <document. All. length; I ++)
{
If (document. All (I). tagname. tolowercase () = "IMG ")
{
Imgobj = Document. All (I) // It is recommended that only one of the height or width be determined, so that proportional scaling can be automatically performed.
If (imgobj. Height> 500) // determines the Image Height. If the image height is greater than 500, the value is set to 500. You can modify the value by yourself.
{
Imgobj. Height = 500
}
If (imgobj. width> 700) // determines the image width. If the image width is greater than 700, the value is set to 700. You can modify the value by yourself.
{
Imgobj. width = 700
}
}
}

</SCRIPT>

Color definition of the scroll bar

[Copy to clipboard]

Code:

Scrollbar-face-color: # e0d5be; <! -- // Set the color of the scroll bar page -->
Scrollbar-track-color: # ebe4d3; <! -- // Set the color of the background version of the scroll bar -->
Scrollbar-Highlight-color: # ffffff; <! -- // Set the slope and left color of the scroll bar -->
Scrollbar-shadow-color: # ffffff; <! -- // Set the color of the lower slope and right side of the scroll bar -->
Scrollbar-3dlight-color: # ffffff; <! -- // Set the color of the edge on the top and left of the scroll bar -->
Scrollbar-Dark-shadow-color: # ffffff; <! -- // Set the color of the edge at the bottom and right of the scroll bar -->
Scrollbar-arrow-color: #978c71; <! -- // Set the arrow color at both ends of the scroll bar -->

Add Borders to images
Define the border (Border) for IMG In the CSS file. For example, I have defined the following in CSS:

[Copy to clipboard]

Code:

IMG. Framed {
Padding: 6px;
Border: 1px solid # CCC;
Background-color: # FFF ;}

In the HTML file, defining class = "framed" for the embedded image will have the corresponding border effect.

[Copy to clipboard]

Code:

A Simple Method of adaptive height under FF

[Copy to clipboard]

Code:

Add
Height: 100%;
Overflow: auto;

Simple Method of Automatic line feed

[Copy to clipboard]

Code:

Table-layout: fixed;
Word-break: Break-all;
Word-wrap: Break-word;

How can I use CSS to make a layer semi-transparent?

[Copy to clipboard]

Code:

Use the following style sheet to define your Layer
. Alpha {filter: alpha (opacity = 50, finishopacity = 50, style = 0, startx = 0, starty = 0, finishx = 100, finishy = 100}

Explanation:
Opacity = opacity at the beginning (100 will be opaque)
Finishopacity = the opacity of the end (100 is not transparent)
Style = style, starting from 0, 1.2.3... uniform and transparent, transparent radiation...
Startx = starts transparent X coordinates, which are basically the upper left corner of the image and layer (0)
Starty = start the transparent y coordinate, which is basically the upper left corner of the image and layer (0)
Finishx = ends the transparent X coordinate, which is basically the bottom right of the image and layer (the width of the image and layer)
Finishy = ends the transparent y coordinate, which is basically the bottom right corner of the image and layer (the image and Layer Height)

Let's talk about the simplest way to clear floating elements.
The simplest way to clear the floating is to close the floating element by inserting an additional Div label under the floating object in the parent container to clear the floating (clear). The browser has good compatibility, without hacks, the disadvantage is to add a non-semantic tag, but in some la S, this Div can only be used for clearing, with semantics.
First look at the code

[Copy to clipboard]

Code:

<Div class = "Wrap">
<Div id = "sideright">
<P>... </P>
</Div>
<Div id = "sideleft">
<P>... </P>
</Div>
<Div id = "foot">
<Address>
Http://www.forest53.com
</Address>
</Div>
</Div>

Where wrap is the parent container, sideright and sideleft are the left and right parts of the content, and foot contains the content, under the left and right content, and in the parent container, to clear the floating Div.

Is there anything that can control the scroll bar size?

[Copy to clipboard]

Code:

<Div style = "overflow: auto; width: 200px; Height: 150px; ZOOM: 0.5;">
<Div style = "width: 2000px; Height: 1500px; ZOOM: 2;">
Is there anything that can control the scroll bar size?
</Div>
</Div>

Call external CSS in several places at the same time

[Copy to clipboard]

Code:

Main.css

@ Import url(font.css );
@ Import url(nav.css );
@ Import url(form.css );
@ Import url(footer.css );
@ Import url(ad.css );

Differences between padding and margin browsers
Margin and padding are always used. How can we solve the problems? Because the browser explains the container width differently:
IE 6.0 Firefox opera is
True width = width + padding + border + margin
Ie5.x
True width = width-padding-border-margin

The solution is:

[Copy to clipboard]

Code:

Div. Content {
Width: 400px; // This is the incorrect width, which is read by all browsers.
Voice-family: "\"} \ "; // ie5.x/win ignores the content after "\ "} \"
Voice-family: Inherit;
Width: 300px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one.
}
HTML> body. Content {// html> body is written in css2.
Width: 300px; // the browser that supports CSS 2 (non-ie5) has the honor to read this sentence.
}

Div. Content {
Width: 300px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here
Width (Space)/**/: 400px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when ie5.x/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them
}
HTML> body. Content {// html> body is written in css2.
Width: 300px; // the browser that supports css2 is lucky enough to read this sentence.
}

Attached: hack summary table

About Div element blocking during W3C Test
All tags must have an ending mark.
Previously, in HTML, you can open many tags, such as <p> and <li>, but not necessarily write the corresponding </P> and </LI> to close them. However, this is invalid in XHTML. XHTML requires a rigorous structure, and all labels must be disabled. If it is an unpaired tag, add "/" at the end of the tag to close it. For example:

[Copy to clipboard]

Code:

<Br/>

Tags in pairs should be opened and closed, for example:

[Copy to clipboard]

Code:

<Table> <tr> <TD> </tr> </table>

Add/to all elements without tags closed in pairs/

[Copy to clipboard]

Code:

For example:
<Base>
<Br>
<HR>

<Input>
<Link>
<Meta>
<Nobr>

How can I set the IMG label image to automatically adapt to the height?
I would like to ask, if I have set a certain value for the IMG width, I want to keep the aspect ratio unchanged and the height automatically adapts, how can I set CSS?

[Copy to clipboard]

Code:

<Style type = "text/CSS">
IMG {
Max-width: 200px;
Width: expression (this. Width & gt; 200? "200px": (this. Width + "PX "));
}
</Style>

10 CSS skills you may not know

The author of this article is: Trenton Moss.
Website: http://www.webcredible.co.uk /.

This translation is not authorized by the author or website. All rights belong to the original author and the original website.
If you are authorized by the original author or the original published website, you can use this translation freely.

1. Simplified CSS font attributes

In general, CSS is used to set the font attributes as follows:

[Copy to clipboard]

Code:

Font-weight: bold;
Font-style: italic;
Font-varient: Small-caps;
Font-size: 1em;
Line-Height: 1.5em;
Font-family: verdana, sans-serif;

But you can also write all of them to one line:

[Copy to clipboard]

Code:

Font: bold italic small-caps 1em/1.5em verdana, sans-serif;

Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted.

2. Use two classes at the same time

Generally, only one class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can:

[Copy to clipboard]

Code:

<P class = "text side">... </P>

At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect.

Supplement: for an ID, neither <p id = "text side">... </P> can be written in this way.

3. Default Value of CSS border

You can usually set the border color, width, and style, such:

[Copy to clipboard]

Code:

Border: 3px solid #000

The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here.

If only the style is specified, the default value is used for other attributes. Generally, the default width of border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much.

4. CSS for document printing

Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style.

That is to say, you can specify two CSS files for the page, one for screen display and the other for printing:

[Copy to clipboard]

Code:

<Link type = "text/CSS" rel = "stylesheet" href = "stylesheet.css" Media = "screen"/> <link type = "text/CSS" rel = "stylesheet" href = "printstyle.css" Media = "print"/>

1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes.

But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use the "display: none" command to turn off some decorative images and then turn off some navigation buttons. For more information, see "Print differences.

5. Image replacement skills

Generally, we recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images.

For example, if you want to use the entire selling icon, you can use this image:

[Copy to clipboard]

Code:

<H1>

This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. The method should be as follows:
<H1> buy widgets However, there is no special font. To achieve the same effect, you can design CSS as follows:

[Copy to clipboard]

Code:

H1 {Background: url(widget-image.gif) No-Repeat; Height: Image Height text-indent:-2000px}

Change the Image Height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. However, this may not be visible to anyone who closes the image.

6. Another adjustment technique for the CSS Box Model

The box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example:

[Copy to clipboard]

Code:

# Box {width: 100px; Border: 5px; padding: 20px}

Call it like this:

[Copy to clipboard]

Code:

<Div id = "box">... </div>

At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like ie5, its full width is still 100 points. The box adjustment method invented by the predecessors can be used to deal with this difference.

However, CSS can achieve the same purpose to make them display the same effect.

[Copy to clipboard]

Code:

# Box {width: 150px} # Box Div {border: 5px; padding: 20px}

Call this method as follows:

[Copy to clipboard]

Code:

<Div id = "box"> <div>... </div>

In this way, no matter what browser, the width will be 150 points.

7. Align block elements in Center

If you want to build a fixed-width webpage and make the webpage horizontally centered, it is usually like this:

[Copy to clipboard]

Code:

# Content {width: 700px; margin: 0 auto}

You will use <Div id = "content"> to enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows:

[Copy to clipboard]

Code:

Body {text-align: center }# content {text-align: Left; width: 700px; margin: 0 auto}

This will center the webpage content, so the content is added

[Copy to clipboard]

Code:

Text-align: left.

8. Use CSS to process Vertical Alignment

Vertical alignment can be easily implemented using tables. You can set the table unit vertical-align: Middle. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically.

What is the CSS method? By the way, set the Row Height of the text to 2em: Line-Height: 2em.

9. Position CSS in the container

One advantage of CSS is that one element can be located at any time in a container. For example, for this container:

[Copy to clipboard]

Code:

# Container {position: relative}

In this way, all elements in the container are relatively located, and can be used as follows:
<Div id = "Container"> <Div id = "navigation">... </div>
If you want to locate at 30 to the left and 5 to the top, you can do this:

[Copy to clipboard]

Code:

# Navigation {position: absolute; left: 30px; top: 5px}

Of course, you can also do this:

[Copy to clipboard]

Code:

Margin: 5px 0 0 30px

Note that the order of the four numbers is: Top, right, bottom, left. Of course, sometimes the positioning method is better than the margin method.

10. Background Color directed to the bottom of the screen

CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS:

[Copy to clipboard]

Code:

# Navigation {Background: Blue; width: 150px}

A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do?

Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color.

[Copy to clipboard]

Code:

Body {Background: url(blue-image.gif) 0 0 repeat-y}

In this case, EM cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only PX can be used.

The author of this article is: Trenton Moss.
Website: http://www.webcredible.co.uk /.

This translation is not authorized by the author or website. All rights belong to the original author and the original website.
If you are authorized by the original author or the original published website, you can use this translation freely.

Summary of common CSS abbreviations

Using abbreviations can help reduce the size of your CSS file and make it easier to read. The main rules for CSS abbreviations are as follows:

Color
The hexadecimal color value. If the two values are the same, they can be abbreviated to half. For example:

[Copy to clipboard]

Code:

#000000 can be abbreviated as #000; #336699 can be abbreviated as #369;

Box Size
There are usually four writing methods:

[Copy to clipboard]

Code:

Property: value1; indicates that all edges are value1;
Property: value1 value2; the value of top and bottom is value1, and the value of right and left is value2.
Property: value1 value2 value3; indicates that the top value is value1, the right and left values are value2, and the bottom value is value3.
Property: value1 value2 value3 value4; four values in turn represent top, right, bottom, left
Easy to remember is clockwise, top right bottom left. An example of the specific application in margin and padding is as follows:
Margin: 1em 0 2em 0.5em;

Border (Border)
The border attributes are as follows:

[Copy to clipboard]

Code:

Border-width: 1px;
Border-style: solid;
Border-color: #000;
It can be abbreviated as border: 1px solid #000;

Syntax: Border: width style color;

Background (backgrounds)
The attributes of the background are as follows:

[Copy to clipboard]

Code:

Background-color: # f00;
Background-image: URL (/oblog/background.gif );
Background-repeat: No-Repeat;
Background-Attachment: fixed;
Background-position: 0 0;
It can be abbreviated as: Background: # f00 URL (/oblog/background.gif) No-repeat fixed 0 0;
The syntax is Background: Color Image repeat attachment position;
You can omit one or more attribute values. If this attribute value is omitted, the default value of the browser is used. The default value is:
Color: transparent
Image: None
Repeat: Repeat
Attachment: Scroll
Position: 0% 0%

Fonts)

[Copy to clipboard]

Code:

The font attributes are as follows:

Font-style: italic;
Font-variant: Small-caps;
Font-weight: bold;
Font-size: 1em;
Line-Height: 140%;
Font-family: "lucida Grande", sans-serif;
It can be abbreviated as: Font: italic small-caps bold 1em/140% "lucida Grande", sans-serif;

Note: If you are short for font definition, you must at least define the font-size and font-family values.

List (lists)

[Copy to clipboard]

Code:

To cancel the default dot and serial number, you can write list-style: none ;,

The list attributes are as follows:

List-style-type: Square;
List-style-position: inside;
List-style-image: URL (/oblog/image.gif );
Can be abbreviated as: List-style: square inside URL (/oblog/image.gif );