"CSS3 Cheats" 第8-11 Chapter

The eighth chapter adds the picture to the webpage

1, background Image:background-image:url (images/bg.gif);

2. Control repetition:background-repeat:repeat/no-repeat/repeat-x/repeat-y

3, positioning background Image:background-position:

4. Fixed background image:background-attachment:scroll/fixed

5, adjust the background image starting point:background-origin:border-box( Upper left corner of border area)/padding-box ( padding Upper left corner of the area) /content-box (upper-right corner of the content area)

6. Limit the display area of the background image:background-clip:border-box(the content area to The back of the border area)/padding-box (behind the content area and padding area)/content-box(behind the content area)

7. Zoom background Image:background-size:contain/cover/100% auto

8, Background Quick properties:background:background-image background-position background-attachment Background-color

9. Multiple background images:

10, gradient background:

1) Linear gradient:background-image:linear-gradient ();

2) Repeating linear gradient: background-image:repeating-linear-gradient ();

3) Radial gradient:background-image:radial-gradient ();

4) Repeat radial gradient:background-image:repeating-radial-gradient ();

Nineth Chapter Decoration Website Navigation

1. Link status

1): Link has not been visited

2): visited visited links, cannot define color,background-color , and Border-color and other styles

3): Hover Visitor's mouse hover over the link above

4): link to active being clicked

2. Navigation bar

<ul class= "NAV" >

<li><a href= "#" >Home</a></li>

<li><a href= "#" >News</a></li>

<li><a href= "#" >Reviews</a></li>

</ul>

. nav{

List-style-type:none;

padding-left:0;

margin-left:0;

}

. Nav li{

Display:inline;

}

. Nav a{

Dispaly:inline-block;

Width:8em;

Height:1.25em;

Text-align:center;

Text-decoration:none;

}

(. nav{

List-style-type:none;

padding-left:0;

margin-left:0;

Overflow:hidden;

}

. Nav li{

Float:left;

}

. Nav a{

Dispaly:block;

Width:8em;

Height:1.25em;

Text-align:center;

Text-decoration:none;

}

)

3. Define a style for a particular type of link

1) Link to other websites:a[href^='/http ']

2) Link to e-mail:a[href^=' mailto: ']

3) Link to a special type of file:a[href$='. pdf ']

Tenth transform,transition , and animation Properties of CSS

1, deformation:transform

1) Rotation:transform:rotate (deg)

2) Scaling:Transform:scale (n,n)/scalex (n)/scaley (n),0<n<1 means zoom out,n>1 indicates magnification,n<0 means rollover

3) Mobile:transform:translate (px,px)/translatex (px)/translatey (px)

4) Tilt:Transform:skew (deg,deg)/skewx (deg)/skewy (deg)

5) Transformation point:transform-origin:

2, Transition

. navbutton{

Border-color:white;

Transition-property:background-color,border-color/all;

transition-duration:1s,.5s;

Transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out

Transition-delay:.0,.5s

}.

navbutton:hover{

Border-color:black;

}

3, animation

@keyframes backgroundglow{

from{

}

25% 75%{

}

to{

}

}

. announcement{

Animation-name:backgroundglow;

Animation-duration:1s;

Animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out

Animation-delay:.0,.5s

Animation-iteration-count:10;

Animation-direction:alternate;

Animation-fill-mode:forwards;

}

. announcement:hover{

animation-play-state:paused/running;

}

11th. Formatting of tables and tables

1. Format of the table

<table>

<caption></caption>

<colgroup>

<col/>

<col/>

</colgroup>

<thead>

<tr>

<th></th>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

</tr>

</tbody>

</table>

2. style of the table

1) Inner margin:padding

2) Horizontal alignment (inheritance):text-align:left/center/right/justify

3) Vertical alignment (not inherited):vertical-align:top/middle/bottom/baseline

4) control the space between table cells:border-spacing:0

5) Clear Bilateral box:border-collapse:collapse/separate

6) Fillet angle:border-radius:5px

7) Hide blank cell:empty-cells:hide;

3. Style of the form

1) Each lable(tag) is surrounded by a tag(tag).

2) Set the display property value to inline-blockand the width

"CSS3 Cheats" 第8-11 Chapter