Home > Developer > CSS

Some practical examples of CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

// The position where the dynamic control element appears on the page combined with the script language.

Code:
  2. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  3. <HTML>
  4. <Head>
  5. <Title> css11.html </title>
  6. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  7. <Style type = "text/CSS">
  8. <! --
  9. Div. Show {
  10. Position: absolute;
  11. Top: 10;
  12. Left: 200;
  13. Visibility: visible;
  14. }
  15. Div. Hide {
  16. Position: absolute;
  17. Top: 120;
  18. Left: 200;
  19. Visibility: hidden;
  20. }
  21. -->
  22. </Style>
  24. </Head>
  26. <Body>
  27. <Div class = "hide"> // No
  29. </Div>
  30. <Div class = "show">
  32. </Div>
  34. </Body>
  35. </Html>

[Note] the DIV block tag can take the image and text inside it as a whole and control it in layers. This tag can often achieve partial changes to the page effect.

# The cursor attribute in CSS changes the shape of the mouse pointer.

Code:
  1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  2. <HTML>
  3. <Head>
  4. <Title> css12.html </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <Style type = "text/CSS">
  7. <! --
  8. . Hand {cursor: hand;}/* hand shape * // = "Class Attribute Value
  9. . Crosshair {cursor: crosshair;}/* precisely locate the word "+ */
  10. . Move {cursor: move;}/* move */
  11. . E-resize {cursor: E-resize;}/* the arrow toward the right */
  12. . Ne-resize {cursor: NE-resize;}/* arrow toward top right */
  13. . NW-resize {cursor: NW-resize;}/* the arrow toward the top left */
  14. . N-resize {cursor: N-resize;}/* the arrow toward the top */
  15. . Se-resize {cursor: Se-resize;}/* arrow toward bottom right */
  16. . S-resize {cursor: S-resize;}/* the arrow toward the bottom */
  17. . W-resize {cursor: W-resize;}/* arrow toward left */
  18. . Text {cursor: text;}/* "I" type */
  19. . Wait {cursor: Wait;}/* wait */
  20. . Help {cursor: help;}/* help */
  21. -->
  22. </Style>
  24. </Head>
  26. <Body>
  27. <P class = "hand">
  28. Give me a hand! (Hand)
  29. </P>
  30. <P class = "crosshair">
  31. Give me a crosshair (precise positioning )!
  32. </P>
  33. <P class = "move">
  34. Give me a move (MOVE )!
  35. </P>
  36. <P class = "e-resize">
  37. Give me a e-resize (arrow to the right )!
  38. </P>
  39. <P class = "Ne-resize">
  40. Give me a ne-resize (arrow toward top right )!
  41. </P>
  42. <P class = "NW-resize">
  43. Give me a NW-resize (the arrow is directed to the top left )!
  44. </P>
  45. <P class = "N-resize">
  46. Give me a n-resize (on )!
  47. </P>
  48. <P class = "Se-resize">
  49. Give me a se-resize (lower left )!
  50. </P>
  51. <P class = "s-resize">
  52. Give me a s-resize (lower )!
  53. </P>
  54. <P class = "w-resize">
  55. Give me a W-resize (left )!
  56. </P>
  57. <P class = "text">
  58. Give me a text )!
  59. </P>
  60. <P class = "wait">
  61. Give me a wait (wait )!
  62. </P>
  63. <P class = "help">
  64. Give me a help )!
  65. </P>
  67. </Body>
  68. </Html>

// ------- Dynamic interaction effect achieved by CSS + JavaScript scripts (set the homepage )-----

Code:
  1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  2. <HTML>
  3. <Head>
  4. <Title> sethome.html </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <Script language = "JavaScript" type = "text/JavaScript">
  7. Function set ()
  8. {
  9. Sethome. style. Behavior = "URL (# default # homepage )";
  10. Sethome. setHomePage (http://www.google.com );
  11. }
  12. </SCRIPT>
  14. </Head>
  16. <Body>
  17. <Span id = "sethome" onclick = "set ()" style = "cursor: Hand"> <br> set this site as the homepage </span>
  18. </Body>
  19. </Html>

// ----------- Further enrich the mouse effect ------------

Code:
  1. <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
  2. <HTML>
  3. <Head>
  4. <Title> movpic.html </title>
  5. <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  6. <Style type = "text/CSS">
  7. <! --
  8. # Topdown {
  9. Position: absolute;
  10. Left: 12;
  11. Top: 222;
  12. }
  13. -->
  14. </Style>
  15. <Script language = "JavaScript" type = "text/JavaScript">
  16. Function move (x, y)
  17. {
  18. Topdown. style. Left = X;
  19. Topdown. style. Top = y;
  20. }
  21. </SCRIPT>
  23. </Head>
  25. <Body onmousemove = "move (event. X, event. Y)">/× event-driven ×/
  26. <Div id = "topdown">/× ID style modifier ×/
  27. /* layer tag Div X/
  28. </Div>
  29. </Body>
  31. </Html>

Explanation: The layer-tagged div is used to separate the image into a layer, and the CSS stacked style sheet is used to define the position of the image. Then, the image is combined with the onmouseover event to track the mouse position (event. X and event. y), and use the mouse position to modify the corresponding image position at any time.

Effect: a smiling face that always moves with the mouse pointer is displayed on the page.

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More