1: Display and hide elements (display has two default attributes, inline and block)

Why not display inline? Because once there is no text, inline displays nothing.

Display: Block converts to block-level elements and also displays elements

Visinility: visibility

Visible: display

Hidden: hide

Features: After hiding, retain the original position

case

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .header { width: 592px; height: 355px; margin: 100px; position: relative; } .dis { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center; display: none; } .header:hover .dis { display: block; /* The dis inside the header is displayed, </style> </head> <body> <div class="header"> <img SRC ="img/ha.png"> <div class="dis"> </body> </html>Copy the code

When the mouse moves over, a shadow will appear

Pay attention to

Make a summary

A: First you have to have a box to wrap the pictures inside. In this case, the size of the picture is the size of the box, and the box has to be positioned relative to it

B: Just put the pictures in normal order

C: Next, the shaded area. The shaded part is positioned on top of the image by positioning the background, which is 100% width and height. Another great thing to do here is to write backgrounds and images together

​ background: rgba(0, 0, 0, .5) url(img/left.png) no-repeat center;

D: Display. This is pretty straightforward. But there is a big hole! The mouse is placed on the box first and then shaded, so.header: hoer.dis

2:overflow ： hidden

According to hide

3: Mouse style

Cursor: pointer hands

Default: a small white

Move move:

Text: text

Pointer: hands

4: Mouse outline

Outline: the node

Prevent dragging: resize: None

5: picture three pixel problem

A:

When we put pictures and text together, there is a small gap. The reason is that images and borders are baseline aligned, and text and boxes are baseline aligned. That’s something we can add to IMG

img{ vertical-align: bottom; Or top, center, bottom just don’t align him with the baseline, which is the default! }

Vertical controls the alignment of images, text, and forms without implicit block-level elements. It applies only to inline blocks and elements

So there’s no gap and if there’s no text, you’ll see there’s still a mole.

This is because the image img tag is an inline block element with a gap bug, so we just need to convert it to a fast element

6: The overflow part is indicated by ellipsis

white-space: nowrap; / Force all text on one line/overflow: hidden; / overflow: ellipsis; / Overflows with ellipses instead of /

Be short of one cannot

7: The nature of sprites

In order to effectively reduce the number of server to receive and send requests, improve the page loading speed, CSS Sprite diagram appears

Place multiple background images on one large image.

8: Sprite map use

Background image, cannot do insert image

Background: URL () no-repeat offset

To make multiple sprites, you can make a collective declaration

9: Sliding doors

Sliding door standard written:

The A label nested the SPAN label

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a{ height: 50px; margin: 100px; background: url(img/to.png) no-repeat; padding-left: 15px; display: inline-block; line-height: 50px; } span{ height: 50px; background: url(img/to.png) no-repeat right; padding-right: 15px; display: inline-block; line-height: 50px; color: white; } < / style > < / head > < body > < a href = "" > < span > home page < / span > < / a > < / body > < / HTML >Copy the code

rendering

Will automatically open the box. Principles of interpretation

A: The sliding door is realized through the coordination of two labels. The function of a label is that as long as you click the box, it will have an effect, and the background picture in it is the same as sapN. A Does not need to set the width, because it is intended to automatically spread, but needs to be high, in order to be consistent with the span. If you set the height of the image, you must set the display, because this is the height of the image. (If the image is its own size, no height is ok.)

B: The span tag is similar to the A tag