網頁

▼

建個免費網站玩HTML5 + PHP + Mysql

HTML5的動畫能力似乎蠻強的。滿街免費雲端web hosting,建一個來玩玩。可以看到CSS的威力。

http://5b21.comyr.com/








HTML5 file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" >
  5. <title>HTML5
  6. </title>
  7. <link rel="stylesheet" href="html5page.css">
  8. </head>
  9. <body>
  10. <header><h1>Header</h1><h2>Subtitle</h2><h4>HTML5 Rocks!</h4>
  11. </header>
  12. <div id="container">
  13. <nav><h3>Nav</h3>
  14. <a href="http://www.example.com">Link 1</a>
  15. <a href="http://www.example.com">Link 2</a>
  16. <a href="http://www.example.com">Link 3</a>
  17. </nav>
  18. <section>
  19. <article>
  20. <header><h1>Article Header</h1>
  21. </header>
  22. <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.
  23. </p>
  24. <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.
  25. </p>
  26. <footer><h2>Article Footer</h2>
  27. </footer>
  28. </article>
  29. <article>
  30. <header><h1>Article Header</h1>
  31. </header>
  32. <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
  33. </p>
  34. <footer><h2>Article Footer</h2>
  35. </footer>
  36. </article>
  37. </section>
  38. <aside><h3>Aside</h3>
  39. <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus
  40. </p>
  41. </aside>
  42. <footer><h2>Footer</h2>
  43. </footer>
  44. </div>
  45. </body>
  46. </html>

CSS file

  1. body {
  2. background-color: #CCCCCC;
  3. font-family: Geneva, Arial, Helvetica, sans-serif;
  4. margin: 0px auto;
  5. max-width: 900px;
  6. border: solid;
  7. border-color: #FFFFFF;
  8. }
  9. header {
  10. background-color: #F47D31;
  11. display: block;
  12. color: #FFFFFF;
  13. text-align: center;
  14. }
  15. header h2 {
  16. margin: 0px;
  17. }
  18. h1 {
  19. font-size: 72px;
  20. margin: 0px;
  21. }
  22. h2 {
  23. font-size: 24px;
  24. margin: 0px;
  25. text-align: center;
  26. color: #F47D31;
  27. }
  28. h3 {
  29. font-size: 18px;
  30. margin: 0px;
  31. text-align: center;
  32. color: #F47D31;
  33. }
  34. h4 {
  35. color: #F47D31;
  36. background-color: #fff;
  37. -webkit-box-shadow: 2px 2px 20px #888;
  38. -webkit-transform: rotate(-45deg);
  39. -moz-box-shadow: 2px 2px 20px #888;
  40. -moz-transform: rotate(-45deg);
  41. position: absolute;
  42. padding: 0px 150px;
  43. top: 50px;
  44. left: -120px;
  45. text-align: center;
  46. }
  47. nav {
  48. display: block;
  49. width: 25%;
  50. float: left;
  51. }
  52. nav a:link, nav a:visited {
  53. display: block;
  54. border-bottom: 3px solid #fff;
  55. padding: 10px;
  56. text-decoration: none;
  57. font-weight: bold;
  58. margin: 5px;
  59. }
  60. nav a:hover {
  61. color: white;
  62. background-color: #F47D31;
  63. }
  64. nav h3 {
  65. margin: 15px;
  66. color: white;
  67. }
  68. #container {
  69. background-color: #888;
  70. }
  71. section {
  72. display: block;
  73. width: 50%;
  74. float: left;
  75. }
  76. article {
  77. background-color: #eee;
  78. display: block;
  79. margin: 10px;
  80. padding: 10px;
  81. -webkit-border-radius: 10px;
  82. -moz-border-radius: 10px;
  83. border-radius: 10px;
  84. -webkit-box-shadow: 2px 2px 20px #888;
  85. -webkit-transform: rotate(-10deg);
  86. -moz-box-shadow: 2px 2px 20px #888;
  87. -moz-transform: rotate(-10deg);
  88. }
  89. article header {
  90. -webkit-border-radius: 10px;
  91. -moz-border-radius: 10px;
  92. border-radius: 10px;
  93. padding: 5px;
  94. }
  95. article footer {
  96. -webkit-border-radius: 10px;
  97. -moz-border-radius: 10px;
  98. border-radius: 10px;
  99. padding: 5px;
  100. }
  101. article h1 {
  102. font-size: 18px;
  103. }
  104. aside {
  105. display: block;
  106. width: 25%;
  107. float: left;
  108. }
  109. aside h3 {
  110. margin: 15px;
  111. color: white;
  112. }
  113. aside p {
  114. margin: 15px;
  115. color: white;
  116. font-weight: bold;
  117. font-style: italic;
  118. }
  119. footer {
  120. clear: both;
  121. display: block;
  122. background-color: #F47D31;
  123. color: #FFFFFF;
  124. text-align: center;
  125. padding: 15px;
  126. }
  127. footer h2 {
  128. font-size: 14px;
  129. color: white;
  130. }
  131. /* links */
  132. a {
  133. color: #F47D31;
  134. }
  135. a:hover {
  136. text-decoration: underline;
  137. }

at