Simple notes CSS drop-down menus and pop-up forms and layers

Drop-down menu

display: block, surrounded by the contraction of the box will expand to fill the element becomes the parent element
position: absolute with respect to the absolute position of the parent element, the coordinates are relative to the parent element, such as pull-down menu aligned

CSS Code copied to the clipboard

1. .menu li ul {
2. display:block;
3. position:absolute;
4. left:0;
5. top:100%;
6. }

Forms

The input of the type:
text: basic single-line text box.
password: Text appears as masks.
checkbox: check box.
radio: radio button.
submit: submit form button.
time, date, search: variant HTML5 text box.
Multi-line text box the TextArea
the SELECT element to generate the drop-down list, each candidate option with option text elements generated
using the float and the span (such as inline elements) can reach the level of arrangement of effect, but how to choose a problem
cursor: point will hover elements the cursor changes to a small hand
transition add a transition, the transition has five attributes:
transition-property, transition CSS property name, such as Color, width;
transition-dURATION, duration of the transition, in seconds or milliseconds is set, for example 2s, 500ms;
transition-Timing-function, speed transition function determines whether smooth animation, the first slow speed is also
a slow down after, such as ease-in, ease-out, ease-in-out or Linear (default value);
transition-delay, the time delay before the start of the transition, in seconds or milliseconds is set, for example lS, 200ms;
transition, transition shorthand property, e.g. transition: color 2s ease-in 1ms ;.

Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.

CSS Code copied to the clipboard

1. input {border-color:black; transition:border-color 2s;}
2. input:focus {border-color:green;}
3. // Note that to add vendor prefixes for all browsers when using the transition property.
4. // add the prefix version
5. border-radius:10px; -webkit-transition:2s width;

Pop-up layer

CSS has a z-index properties, the stacking order in the context of the control element is used. In other words, it can change the default by the sequence of elements are stacked. z-index value larger elements disposed at the smaller z-index value in the stack above the element hierarchy. Z-index attribute value may be an arbitrarily large value to 0; may be negative, but in some browsers are not reliable. By default, z-index of all the stack elements is auto, equivalent to 0.