"CSS3 Cheats" 第8-11 Chapter

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.