Shulou(Shulou.com)06/02 Report--

This article mainly explains how to write the code for CSS to beautify the web page control. The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to write the code for CSS to beautify the web page control.

1) there are several ways to write CSS:

1.1 the style attribute of the tag implements the tag decoration (decoration function cannot be reused: rarely used)

2) Common attributes of tags

2.1 height:48px height

2.2 border: border (attribute: width, style, color)

2.3 width:%80 width (written in pixels: percentage)

2.4 font-size:16px font size

2.5 text-align:center Center

2.6 line-height:48px string is placed in the middle of the pixel size

2.7 font-weight:bold font bold

3) float: make tags wolf and block-level tabs can be stacked

1 for example: the p tag is a block-level whiteboard label, so a block-level tag occupies a line no matter how many strings it is.

If you want to use more than 2 block-level tags in a row:

Float internal attributes must be used: this makes block-level tags inline tags

Folat:left turns block-level tags into inline tags, lean to the left

Folat:right turns block-level tags into inline tags, lean to the right

(note: need more than 2 and next to the label, and use folat at the same time)

If the width exceeds 100%, start another line-- >

Format:

6) position internal attributes (fixed page tags) fixed, absolute, relative

1.position: the fixed; is fixed somewhere on the page, and the browser scrolls along with it.

2. Position absolute+relative; absolutely fixed somewhere on the page, the browser scrolls, but does not follow (there are not many application scenarios, but many scenarios can be applied if there are many scenarios)

3. Positionabsolute relative; use it alone without any effect with absolute (if the tag has position:relative;, then the tag under the tag has position:absolute;. This time: the absolute tag is fixed somewhere in the relative tag)

4.pisition multi-layer: when a button is clicked in the application scenario, a box pops up, and the value can operate on the box.

You need to use two internal properties to match:

According to the hierarchy, whoever has the biggest number will be at the top.

Opacity: 0.5; transparency, 0 to 1, 0 completely transparent, 1 completely covered

Position: fixed application scenarios:

1.1 when scrolling the page, no matter how the page scrolls down, a return to the top appears.

Title. Pg-header01 {height: 48px; background-color: black; color: # dddddd; position: fixed; top:0; right: 0; left: 0;} / * position: fixed Fix the position of the page and fix the p from the background layer (bottom layer) to the bottom layer at the top right left: distance from the top, left, and right 0px distance so that no matter how your page scrolls down later, the p always exists at the top of the browser page * / .pg-body01 {background-color: # dddddd; height: 5000px; margin-top: 50px } / * background layer (bottom layer) experiment the decorative function written by position margin-top deviates from the top 50px so that it will not be covered (not needed later, because display can be used to hide fixed pads / headers

Content

Position:relative; cooperates with position:absolute application scenarios:

The absolute tag is fixed according to the relative tag

Format:

8): hover when the style is followed by: hover, then the mouse moves to the label decorating the style, and the: hover style takes effect

Format

9) background-image: background picture

Background-image: url (icon_18_118.png) add background images; (default images tile the p space vertically and vertically)

Background-repeat:repeat-y; pictures tiled vertically

Background-repeat:repeat-x; pictures tiled horizontally

Background-repeat:no-repeat; is not tiled

Background-position-x:0px; moves the background picture in the frame horizontally

Background-position-y:-140px; moves the background picture in the frame vertically

Background-position:0-140px; the above two comprehensive abbreviations

Format

Thank you for reading, the above is the content of "how to write the code for CSS to beautify the web control". After the study of this article, I believe you have a deeper understanding of how to write the code for CSS to beautify the web control, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.