CSS some style apps

List

UL: Serial table OL: Unordered lists (Oreder list)
The child elements of the above two lists can only be LI (block-level elements)
DL>DT, DD (auto indent)

<dl> <dt> </dt> <dd> </dd> </dl>

Table
TABLE>TR (Row) >td (column)
colspan merge Columns
rowspan Merge Rows
List Semantics
Table>caption> (thead>th) + (TBODY>TR>TR) + (TFOOTER>TR>TD)

form
Form

<form action= "method=""> <input type= "name= " "></form>The action means that the Submit address method represents the submission method: Get will display the input after the prompt addressPost: The input will not be displayed after the address is submitted

Input: Entry box (child element of form)
Type value: text (text) Password box

Radio Box
1.type value is radio 2.name value consistent 3. Given Value property values (2 and 3 are typically given by the background database Administrator (DBA))
Cases:

<p><input type="Radio" name="gender" value="male" > Male <input type="Radio" name="gender" value="male" > Female </p>

Multi-Select box
Type value is checkbox
The value of name is consistent before the correct content is submitted
Checked is a Boolean type (values and attributes are the same)
Cases:

<p><input type="checkbox" Name="gender" checked (default selected) > ...</p>

Select drop-down list (drop-down menu)
option means the optional, Name property is the value of the following stored keyword (typically provided by the DBA), which is the data that will be submitted to the background selection
Cases:

<p> province <Select name="province" > <option value="Sichuan" > option>, </ , Sichuan province <option value="Sichuan" > option>, </ , Sichuan province <option value="Sichuan" > option>, </ , Sichuan province <option value="Sichuan" > option>, </ , Sichuan province </select> </p>

Multi-line text box

<texttareacd= "row=" "> <input type="buttom" value="..." > type value buttom represents a normal button, that is, only the style of the button, no other function (for JS) Submit Button <input type="Submit" > Default Chinese submission <input type="Submit" valiue="submit" > English submission sunmit Buttom as the element name means that the element is a button with a Submit function<buttom> Submit </buttom>type value reset means reset buttonThe Required property of input indicates that the input box is required, and if no content is added, "Please fill in this field" (different browsers display different)

Email Input Email

Please enter your e-mail <input tupe="email" >

Set the number of inputs maxlength

<p> Please enter your phone number <input type="text" name="TDL" maxlength="One" > </p>

Text and input box associations
Lable
1. In input, set the value of the for property in ID 2.lable consistent with the ID value in input
Cases:

<p> <lable for="user" > Please enter your username </lable> <input type="text" name="username" id="user" > </p>

Default values and hints in the input box (add to Input tab bar)
Default Value Property
Tip Information using the Placeholder property
In order to achieve the alignment of the registration form
The lable label display can be set to Inline-block;
Give the fixed width, and then set the text alignment (Text-algin:left/center/right)

Input box date of birth

<lable for="bir" > Birth date </lable> <input type=:d ate id="Bir" >

Input box color

<inputtype="Color" >

Select Upload File

<inputtype="file" >

Change the color of the message in the input box

input::-webkit-input-placeholder{ color:red;}

Input box, focus frame removal, usually used for search box

Outline:none;<p>search</p> <input type="Search" >

Transform deformation
Transform:scale (); Can be two parameters, one, one at the same time XY, two number, the first X axis, the second Y axis&NBSP;
scale function to set scaling; value 0~ positive infinity (default value 1) Transform-orign Set the zoom point &NBSP; transfor-orign:__px, __px; &NBSP;
The first value is horizontally oriented, the second value is vertically oriented &NBSP;
Transform-rotate set the rotational degree &NBSP;
Transform-rotate (45deg); &NBSP;
Transform-rotatez: Center point (default value) &NBSP;
transform-rotatex:x axis direction &NBSP;
Transform-rotatey:y axis direction &NBSP;
Transform:skew () sets the tilt angle &NBSP;
45deg indicates clockwise rotation 45 degrees &NBSP;
-45deg means 45 degrees counterclockwise

Set the offset of the chunk movement
The first parameter is the direction of the x-axis, the second parameter is the y-axis direction (both positive and negative pixels are available)

Transform:translate (__PX,__PX);

Transform abbreviations the delimiter between each function is a space

Transform:rotate () scale () skew ();

Transition is the process of changing one value of a property to another value

transition:all linear __s;

The

Border transitions from the center to the sides of the entire containing block &NBSP;
1. Set the position of the child element, the parent element is centered horizontally, i.e. &NBSP; nav{left:50%} &NBSP;
2. When the parent element is hover, the child element position is aligned with the left border of the parent element &NBSP;
is footer:hover>nav{left:0}; &NBSP;
(Note: 1 and 2 The main implementation border transitions from the horizontal center point to the left) 3. Set the width of the child element to 0, i.e. &NBSP; nav{width:0}; &NBSP;
4. The width of the child element is hover 100%&NBSP;
(3 and 4 primarily implements the effect that the border transitions from the horizontal center point to the right)

CSS some style apps