一个简单的单页 HTML 和 CSS,JS 示例

教程评论1,093字数 1734阅读5分46秒阅读模式

我很高兴为您提供一个简单的单页 HTML 和 CSS 示例,该示例包含一个动画效果。您可以根据需要修改和扩展此示例。以下是代码:

一个简单的单页 HTML 和 CSS,JS 示例

首先,创建一个名为index.html的文件,然后将以下代码粘贴到文件中:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>动画示例</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <h1>欢迎来到我的网站</h1>
  12.         <p>这是一个简单的单页网站,带有动画效果。</p>
  13.         <button id="change-color">点击更改颜色</button>
  14.     </div>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>

接下来,创建一个名为styles.css的文件,并将以下代码粘贴到文件中:

  1. body {
  2.     font-familyArialsans-serif;
  3.     background-color#f0f0f0;
  4.     display: flex;
  5.     justify-contentcenter;
  6.     align-items: center;
  7.     height: 100vh;
  8.     margin: 0;
  9.     overflowhidden;
  10. }
  11. .container {
  12.     width200px;
  13.     padding20px;
  14.     background-color#fff;
  15.     border-radius: 10px;
  16.     box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  17.     text-aligncenter;
  18. }
  19. h1 {
  20.     font-size: 2rem;
  21.     margin-bottom20px;
  22. }
  23. p {
  24.     font-size: 1.2rem;
  25.     margin-bottom40px;
  26. }
  27. button {
  28.     background-color#4CAF50;
  29.     bordernone;
  30.     colorwhite;
  31.     padding15px 32px;
  32.     text-aligncenter;
  33.     text-decorationnone;
  34.     displayinline-block;
  35.     font-size16px;
  36.     margin4px 2px;
  37.     cursorpointer;
  38.     border-radius: 12px;
  39.     transition-duration: 0.4s;
  40. }
  41. button:hover {
  42.     background-color#45a049;
  43. }

最后,创建一个名为script.js的文件,并将以下代码粘贴到文件中:

  1. document.getElementById("change-color").addEventListener("click"function() {
  2.     var colors = ["#4CAF50""#45a049""#ff5722""#FFA07A""#2196F3"];
  3.     var randomColor = colors[Math.floor(Math.random() * colors.length)];
  4.     document.body.style.backgroundColor = randomColor;
  5. });

这个示例包含一个带有动画效果的简单单页网站。当用户点击“点击更改颜色”按钮时,页面的背景颜色将在五种不同的颜色之间随机更改。您可以根据需要修改和扩展此示例。

历史上的今天
10 月
16
我的微信
微信扫一扫
weinxin
我的微信
我的微信公众号
微信扫一扫
weinxin
我的公众号
 
  • 本文由 夏沫 发表于 2023年10月16日21:26:42
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证