CSS dropdown menus and forms and pop-up layers of simple notes

Drop down Menu

Display:block, the box will become expanded to populate the parent element by shrinking the bounding element

Position:absolute is the absolute position relative to the parent element, and its coordinates are relative to the parent element, such as the Align Drop-down menu

CSS code copy content to clipboard

. mene Li Ul{

Display:block;

Position:absolute;

left:0;

top:100%;

}

Form

Type of input:

Text: The Basic single-line text box.

Password: text is displayed as a mask.

CheckBox: check box.

Radio: Radio button.

Submit: The button that submits the form.

Variant of time, date, search:html5 text box.

Multi-line text box textarea

The Select element generates a Drop-down list, and each candidate option is generated with the option text element

Use float and span (inline elements) to achieve horizontal arrangement, but how to choose is a problem

Cursor:point makes the mouse stop on the element and the cursor changes to a small hand

Transition Add a transition effect with five transition properties:

Transition-property, the transition of CSS property names, such as color, width;

Transition-duration, the duration of the transition, in seconds or milliseconds set, such as 2s, 500ms;

Transition-timing-function, the transition of the speed control function, determines whether the animation effect is smooth, is the first slow after fast Also

is first fast and slow, such as ease-in, Ease-out, ease-in-out or linear (default);

Transition-delay, the delay time before the transition begins, set in seconds or milliseconds, such as 1s, 200ms;

Transition, the abbreviated properties of the transition, such as transition:color 2s ease-in 1ms;.

CSS code copy content to clipboard

input {border-color:black; transition:border-color 2s;}

Input:focus {border-color:green;}

Note that you use the Transition property to add vendor prefixes for all browsers.

Add prefix version

border-radius:10px; -webkit-transition:2s width;

Pop-up layer

There is a Z-index property in the CSS that controls the order of elements in the stacking context. In other words, it allows you to change the default order when the elements are stacked. Z-index an element with a larger value, located above the element with a Z-index value in the stacking hierarchy. The value of the Z-index property can be 0 to any large value; Negative values can be, but they are not reliable in some browsers. By default, the Z-index value of all stacked elements is auto, equivalent to 0.