HTML-CSS练习例子

九天猎人  金牌会员 | 2024-6-11 09:22:13 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 666|帖子 666|积分 1998

HTML CSS 练习

https://icodethis.com

   作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML
CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，计划的也比力悦目。
  下面是练习，当然布局的方法有很多，下面是一种。
01基础

这是第一个练习，但是很多大佬做出了，很多不一样的效果
比如：


计划稿


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>基础练习</title>
  8.   <style>
  9.     .main {
  10.       width: 400px;
  11.       height: 100%;
  12.       margin: 0 auto;
  13.       /* padding-top: 30px; */
  14.       padding: 0 10px;
  15.       /* background-color: rgba(241, 77, 186, 0.5); */
  16.     }
  18.     .content {
  19.       padding-top: 30px;
  20.     }
  22.     p {
  23.       margin: 0;
  24.     }
  26.     .group {
  27.       margin-top: 15px;
  28.     }
  30.     .title {
  31.       display: inline-block;
  32.       /* padding: 5px ; */
  33.       font-size: 15px;
  34.       font-weight: 600;
  35.       text-align: center;
  36.       padding: 0 10px;
  37.       /* margin-bottom: 20px; */
  38.       box-shadow: 0 2px 3px #7b7878;
  39.       border-radius: 3px;
  40.       background-color: #d9d9d9;
  41.     }
  43.     .my-custom-font-Arial {
  44.       /* @font-face 加载外部字体 */
  45.       /* 'Artal'： 这是首选的字体，也就是开发者希望文本显示的字体。'Artal'是一个具体的字体名称，假设它是一个自定义字体或者是用户系统中已安装的字体。如果浏览器在用户的系统中找到了这个字体，它就会使用这个字体来渲染文本。 */
  46.       font-family: 'Arial', sans-serif;
  47.     }
  49.     .my-custom-font-Roman {
  50.       font-family: 'Roman', sans-serif;
  51.     }
  53.     .font-underlined {
  54.       text-decoration: underline;
  55.     }
  57.     .font-through {
  58.       text-decoration: line-through;
  59.     }
  61.     h1,
  62.     h2,
  63.     h3 {
  64.       margin: 0;
  65.     }
  67.     .color-box {
  68.       margin-top: 10px;
  69.     }
  71.     .color-orange {
  72.       color: #ee5531;
  73.     }
  75.     .square {
  76.       width: 50px;
  77.       height: 50px;
  78.       background-color: #ee5531;
  79.     }
  81.     .color-purple {
  82.       color: #4621ab;
  83.     }
  85.     .circular {
  86.       width: 50px;
  87.       height: 50px;
  88.       border-radius: 50%;
  89.       background-color: #4621ab;
  90.     }
  92.     h6 {
  93.       margin: 0;
  94.       margin-bottom: 3px;
  95.     }
  97.     .button-box {
  98.       margin-top: 10px;
  99.     }
  101.     button {
  102.       display: inline-block;
  103.       width: 150px;
  104.       height: 30px;
  105.       border: none;
  106.       color: #fff;
  107.       background-color: #4621ab;
  108.       border-radius: 2px;
  109.     }
  111.     /* 鼠标悬停时 */
  112.     button:hover {
  113.       background-color: #866cdc;
  114.     }
  116.     /* 点击时（按下状态） */
  117.     button:active {
  118.       background-color: #cfc4f1;
  119.     }
  120.   </style>
  121. </head>
  123. <body>
  124.   <div class="main">
  125.     <div class="content">
  126.       <!-- TYPOGRAPHY -->
  127.       <div class="title">TYPOGRAPHY</div>
  128.       <div>
  129.         <div class="group">
  130.           <p><strong>Make me bold</strong></p>
  131.           <p><em>Make me italic</em></p>
  132.         </div>
  134.         <div class="group">
  135.           <p class="my-custom-font-Arial">I'm from the Artal font famil!</p>
  136.           <p class="my-custom-font-Roman">And I'm frorm the Times New Ronan fot family! .</p>
  137.         </div>
  139.         <div class="group">
  140.           <p class="font-underlined">Make this text be underlined</p>
  141.           <p class="font-through">And put a Hine through this one</p>
  142.         </div>
  144.       </div>
  146.     </div>
  148.     <div class="content">
  149.       <!-- HEADINGS -->
  150.       <div class="title">HEADINGS</div>
  151.       <div>
  152.         <div>
  153.           <h1>This isa &lt;h1&gt; tag</h1>
  154.           <h2>This isa&lt;h2&gt;tag</h2>
  155.           <h3>This isa &lt;h3&gt;tag</h3>
  156.         </div>
  157.       </div>
  158.     </div>
  160.     <div class="content">
  161.       <!-- COLORS -->
  162.       <div class="title">COLORS</div>
  163.       <div>
  164.         <div class="color-box">
  165.           <div class="color-orange">Color me orange!</div>
  166.           <div class="color-orange square"></div>
  167.         </div>
  169.         <div class="color-box">
  170.           <div class="color-purple">Color me purple!</div>
  171.           <div class="color-purple circular"></div>
  172.         </div>
  173.       </div>
  174.     </div>
  176.     <div class="content">
  177.       <!-- BUTTONS -->
  178.       <div class="title">BUTTONS</div>
  179.       <div>
  180.         <div class="button-box">
  181.           <h6>Defult</h6>
  182.           <button>Button</button>
  183.         </div>
  185.         <div class="button-box">
  186.           <h6>Hovered</h6>
  187.           <button>Button</button>
  188.         </div>
  190.         <div class="button-box">
  191.           <h6>Active</h6>
  192.           <button>Button</button>
  193.         </div>
  194.       </div>
  195.     </div>
  198.   </div>
  199. </body>
  201. </html>
复制代码
02_404页面

计划搞


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .main {
  10.       /* border: 1px solid #000; */
  11.       position: relative;
  12.       width: 100%;
  13.       /* 或者设置一个固定宽度 */
  14.       height: 100%;
  15.       /* 或者设置一个固定高度 */
  16.     }
  18.     .main-box {
  19.       position: absolute;
  20.       top: 50%;
  21.       /* 使子元素的上边缘位于父元素的中心 */
  22.       left: 50%;
  23.       /* 使子元素的左边缘位于父元素的中心 */
  24.       transform: translate(-50%, 20%);
  25.       /* 调整位置，使其居中 */
  26.       display: flex;
  27.       flex-direction: column;
  28.       align-items: center;
  29.       width: 800px;
  30.       height: 500px;
  31.       /* margin: 100px auto; */
  32.       /* background-color: rgba(241, 77, 186, 0.5); */
  33.       background-image: linear-gradient(to right, #f073c6, #ff6b96);
  34.       border-radius: 8px;
  35.       border: 2px solid black;
  36.       box-shadow: 0 8px 15px rgba(230, 41, 135, 0.5);
  38.     }
  40.     .content {
  41.       width: 50%;
  42.       text-align: center;
  43.       color: #fff;
  44.       /* background-color: rgb(227, 153, 57);
  45.       border: 1px solid black; */
  47.     }
  49.     .one {
  50.       margin: 50px 0;
  51.     }
  53.     .two {
  54.       margin: 0 0 20px 0;
  55.       font-size: 100px;
  56.       font-weight: 700;
  57.     }
  59.     .three {
  60.       margin: 0 0 30px 0;
  61.     }
  63.     .four {
  64.       vertical-align: bottom;
  65.     }
  67.     a {
  68.       color: #fff;
  69.       text-decoration: none;
  70.       border-bottom: 1px solid #fff;
  71.     }
  73.     .circular-box {
  74.       position: absolute;
  75.       width: 800px;
  76.       height: 500px;
  77.       top: 50%;
  78.       /* 使子元素的上边缘位于父元素的中心 */
  79.       left: 50%;
  80.       /* 使子元素的左边缘位于父元素的中心 */
  81.       transform: translate(-50%, 20%);
  82.       /* 调整位置，使其居中 */
  83.       background-color: rgba(241, 77, 186, 0.2);
  84.       overflow: hidden;
  85.     }
  87.     .circular {
  88.       width: 100px;
  89.       height: 100px;
  90.       border-radius: 50%;
  91.       /* background-color: #fff; */
  93.     }
  95.     .circular-box> :nth-child(1) {
  96.       width: 200px;
  97.       height: 200px;
  98.       position: absolute;
  99.       top: 70%;
  100.       /* 使子元素的上边缘位于父元素的中心 */
  101.       left: -5%;
  102.       background-image: linear-gradient(55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
  103.     }
  105.     .circular-box> :nth-child(2) {
  106.       width: 300px;
  107.       height: 300px;
  108.       position: absolute;
  109.       top: -10%;
  110.       /* 使子元素的上边缘位于父元素的中心 */
  111.       left: 75%;
  112.       background-image: linear-gradient(-55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
  113.     }
  115.     .circular-box> :nth-child(3) {
  116.       width: 100px;
  117.       height: 100px;
  118.       position: absolute;
  119.       top: 60%;
  120.       /* 使子元素的上边缘位于父元素的中心 */
  121.       left: 75%;
  122.       background-image: linear-gradient(328deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
  123.     }
  124.   </style>
  125. </head>
  127. <body>
  128.   <div class="main">
  129.     <div class="main-box">
  130.       <div class="content one">UIDesignDally</div>
  131.       <div class="content two">404</div>
  132.       <div class="content three">The link you clicked may be broken or the<br/>
  133.         page may have been removed.</div>
  134.       <div class="content four">Visit the <a href="">home page</a> or <a href="">contact</a>me</div>
  135.     </div>
  137.     <div class="circular-box">
  138.       <div class="circular"></div>
  139.       <div class="circular"></div>
  140.       <div class="circular"></div>
  141.     </div>
  142.   </div>
  143. </body>
  145. </html>
复制代码
代码2

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./index2.css">
  9. </head>
  11. <body>
  12.   <div class="container">
  13.     <div class="content">
  14.       <div class="circle1"></div>
  15.       <div class="circle2"></div>
  16.       <div class="circle3"></div>
  17.       <p>UIDesignDaily</p>
  18.       <h1>404</h1>
  19.       <h3>The link you clicked may be broken or the <br> page may have been removed.</h3>
  20.       <h5>Visit the <a href="">home page</a> or <a href="">contact</a> me</h5>
  21.     </div>
  22.   </div>
  24. </body>
  26. </html>
复制代码
  1. /*index2.css*/
  2. body{
  3.   margin: 0;
  4.   padding: 0;
  5. }
  7. .container{
  8.   position: absolute;
  9.   top: 0;
  10.   left: 0;
  11.   bottom: 0;
  12.   right: 0;
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: center;
  16. }
  18. .content{
  19.   overflow: hidden;
  20.   width:95%;
  21.   height: calc(80%/1.4);
  22.   background-image: linear-gradient(90deg, rgb(239,115,199), rgb(255,106,149));
  23.   border: 3px solid rgb(36,46,76);
  24.   border-radius: 13px;
  25.   display:flex;
  26.   flex-direction: column;
  27.   align-items: center;
  28.   position: relative;
  29.   box-shadow: 2px 10px 10px rgba(239, 115, 200, 0.534);
  30. }
  31. .circle1{
  32.   width:250px;
  33.   height: 250px;
  34.   background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  35.   border-radius: 250px;
  36.   position:absolute;
  37.   left:-40px;
  38.   top:300px;
  39. }
  41. .circle2{
  42.   width:250px;
  43.   height: 250px;
  44.   background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  45.   border-radius: 250px;
  46.   position:absolute;
  47.   right:-70px;
  48.   top:-50px;
  49. }
  50. .circle3{
  51.   width:70px;
  52.   height: 70px;
  53.   background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  54.   border-radius: 70px;
  55.   position:absolute;
  56.   left:70%;
  57.   top:50%;
  58. }
  59. p{
  60.   font-size: 10px;
  61.   padding-top: 50px;
  62.   font-family:'Open Sans';
  63.   color:rgba(255, 255, 255, 0.719);
  64. }
  66. h1{
  67.   font-size: 120px;
  68.   font-weight: 600;
  69.   font-family:'Open Sans';
  70.   color:white;
  71. }
  73. h3{
  74.   font-size: 11px;
  75.   font-weight: 501;
  76.   text-align: center;
  77.   font-family:'Open Sans';
  78.   color:rgba(255, 255, 255, 0.685);
  79. }
  81. h5{
  82.   font-size: 10px;
  83.   padding-top: 30px;
  84.   font-family:'Open Sans';
  85.   color:rgba(255, 255, 255, 0.664);
  86. }
  88. a{
  89.   text-decoration: underline;
  90. }
复制代码
03_Christmas Promo

计划稿


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  10. <body>
  11.   <div class="container">
  12.     <div class="content">
  13.       <div class="x"></div>
  14.       <img src="https://i.postimg.cc/J0GVNJFy/tree.png" alt="">
  15.       <h5>Merry Christmas !</h5>
  16.       <p class="tasks">You completed all your Decenber's tasks<br />
  17.         50 we decided to get you a gift:</p>
  18.       <p class="plan">50% off on your Yearly Premium Plan</p>
  19.       <button>GET YOUR GIFT</button>
  20.     </div>
  21.   </div>
  22. </body>
  24. </html>
复制代码
  1. /* Write your CSS code here */body {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  6. .container {
  7.     position: absolute;
  8.     top: 0;
  9.     left: 0;
  10.     bottom: 0;
  11.     right: 0;
  12.     display: flex;
  13.     justify-content: center;
  14.     align-items: center;
  15.     background-color: #eff0f3;
  16.     /* border: 1px solid red;   */
  17. }
  19. .content {
  20.     position: relative;
  21.     background-color: #fff;
  22.     width: 400px;
  23.     height: 450px;
  24.     border-radius: 4px;
  25.     border-top-right-radius: 15px;
  26.     display: flex;
  27.     flex-direction: column;
  28.     align-items: center;
  29.     box-shadow: 4px 10px 10px rgba(53, 64, 99, 0.1);
  30. }
  32. .x {
  33.     position: absolute;
  34.     width: 10px;
  35.     height: 10px;
  36.     right: 20px;
  37.     top: 20px;
  38.     font-size: 20px;
  39.     transform: rotate(45deg);
  40. }
  42. .x::after,
  43. .x::before {
  44.     content: '';
  45.     position: absolute;
  46.     width: 20px;
  47.     height: 2px;
  48.     background-color: rgb(123, 122, 122);
  49.     top: 50%;
  50.     left: 50%;
  51.     transform: translate(-50%, -50%);
  52. }
  54. .x::before {
  55.     transform: translate(-50%, -50%) rotate(90deg);
  56. }
  58. img {
  59.     margin-top: 70px;
  60.     width: 100px;
  61.     height: 130px;
  62. }
  64. /* .tasks{
  65.   text-align: center;
  66. } */
  67. .tasks {
  68.     font-size: 12px;
  69.     color: rgb(126, 125, 123);
  70.     text-align: center;
  71. }
  73. .plan {
  74.     color: orange;
  75.     font-size: 13px;
  76. }
  78. button {
  79.     color: white;
  80.     width: 170px;
  81.     height: 40px;
  82.     margin: 30px;
  83.     font-size: 12px;
  84.     background-color: #242e4c;
  85.     border-radius: 5px;
  86.     box-shadow: 1px 5px 5px rgba(36, 46, 76, 0.5);
  87. }
复制代码
04_Subscribe

计划稿


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./index.css">
  9. </head>
  11. <body>
  12.   <div class="container">
  13.     <div class="content">
  14.       <h4>Let's keep in touch</h4>
  15.       <p class="Subscribe">Subscribe to keep up with fresh news and exciting updates.<br />
  16.         We promise not to spam youl!</p>
  17.       <form action="">
  18.         <input class="email" type="text" placeholder="Enter your email address">
  19.         <button class="email-button">SEND &nbsp; →</button>
  20.       </form>
  21.       <p class="checkbox-box">
  22.         <input id="checkbox1" class="input-checkbox" type="checkbox">
  23.         <label for="checkbox1">I agree to my email address being stored and<br />used to reccive monthly ncwsletter.</label>
  24.       </p>
  25.     </div>
  26.   </div>
  27. </body>
  29. </html>
复制代码
  1. body {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. .container {
  7.   position: absolute;
  8.   top: 0;
  9.   left: 0;
  10.   bottom: 0;
  11.   right: 0;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15.   background-color: #f2f5f8;
  16.   /* border: 1px solid red; */
  17. }
  19. .content {
  20.   /* position: relative; */
  21.   background-color: #fff;
  22.   width: 600px;
  23.   height: 300px;
  24.   border-radius: 7px;
  25.   box-shadow: 0px 10px 10px rgba(61, 159, 255, 0.1);
  26.   display: flex;
  27.   flex-direction: column;
  28.   align-items: center;
  29. }
  31. .Subscribe {
  32.   font-size: 14px;
  33.   text-align: center;
  34. }
  36. .email {
  37.   width: 230px;
  38.   height: 35px;
  39.   border-radius: 5px;
  40.   padding-left: 15px;
  41.   margin-right: 5px;
  42.   margin-top: 20px;
  43.   border: 1px solid rgb(212, 214, 217);
  44. }
  46. .email-button {
  47.   width: 150px;
  48.   height: 40px;
  49.   color: #fff;
  50.   font-size: 13px;
  51.   border-radius: 5px;
  52.   border: 1px solid rgb(212, 214, 217);
  53.   background-color: rgb(61, 159, 255);
  54.   box-shadow: 0px 5px 5px rgba(61, 159, 255, 0.3);
  55. }
  57. .email-button:hover {
  58.   background-color: rgb(12, 122, 231);
  59.   box-shadow: 0px 5px 5px rgba(61, 159, 255, 0.3);
  60. }
  62. .checkbox-box {
  63.   margin-left: -110px;
  64. }
  66. .input-checkbox {
  67.   display: none;
  68.   /* 隐藏原生的checkbox ，自定义checkbox*/
  69. }
  70. .checkbox-box label {
  71.   position: relative;
  72.   padding-left: 10px;
  73.   cursor: pointer;
  74.   display: inline-block;
  75.   font-size: 12px;
  76.   color: #787f85;
  77. }
  79. .checkbox-box label:before {
  80.   content: '';
  81.   position: absolute;
  82.   left: -15px;
  83.   top: 0;
  84.   width: 15px;
  85.   height: 15px;
  86.   border: 1px solid rgb(212, 214, 217);
  87.   border-radius: 3px;
  88. }
  90.    /* 当checkbox被选中时的样式 */
  91.    .checkbox-box input[type="checkbox"]:checked+label:before {
  92.     background-color: #3d9fff;
  93.     /* 背景颜色，可选 */
  94. }
  95. .checkbox-box input[type="checkbox"]:checked+label:after {
  96.   content: "\2713";
  97.   position: absolute;
  98.   left: -12px;
  99.   top: 0px;
  100.   color: #fff;
  101.   font-size: 14px;
  102.   font-weight: bold;
  103. }
复制代码
05_Toasts

计划稿


  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./index2.css">
  9. </head>
  11. <body>
  12.   <section class="toast-wrapper">
  14.     <div class="toast">
  15.       <div class="icon-wrapper">
  16.           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
  17.               stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  18.               class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  19.               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  20.               <path d="M5 12l5 5l10 -10" />
  21.           </svg>
  22.       </div>
  24.       <p>File has been removerd succesfully!</p>
  26.       <button class="close-btn">
  27.           <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
  28.       </button>
  29.   </div>
  32.     <div class="toast toast-dark">
  33.       <div class="icon-wrapper">
  34.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  35.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  36.           class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  37.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  38.           <path d="M5 12l5 5l10 -10" />
  39.         </svg>
  40.       </div>
  42.       <p>File has been removerd succesfully!</p>
  44.       <button class="close-btn">
  45.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  46.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  47.           class="icon icon-tabler icons-tabler-outline icon-tabler-x">
  48.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  49.           <path d="M18 6l-12 12" />
  50.           <path d="M6 6l12 12" />
  51.         </svg>
  52.       </button>
  53.     </div>
  56.     <div class="toast toast-rounded">
  57.       <div class="icon-wrapper">
  58.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  59.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  60.           class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  61.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  62.           <path d="M5 12l5 5l10 -10" />
  63.         </svg>
  64.       </div>
  66.       <p>File has been removerd succesfully!</p>
  68.       <button class="close-btn">
  69.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  70.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  71.           class="icon icon-tabler icons-tabler-outline icon-tabler-x">
  72.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  73.           <path d="M18 6l-12 12" />
  74.           <path d="M6 6l12 12" />
  75.         </svg>
  76.       </button>
  77.     </div>
  82.     <div class="toast toast-dark toast-rounded">
  83.       <div class="icon-wrapper">
  84.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  85.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  86.           class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  87.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  88.           <path d="M5 12l5 5l10 -10" />
  89.         </svg>
  90.       </div>
  92.       <p>File has been removerd succesfully!</p>
  94.       <button class="close-btn">
  95.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  96.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  97.           class="icon icon-tabler icons-tabler-outline icon-tabler-x">
  98.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  99.           <path d="M18 6l-12 12" />
  100.           <path d="M6 6l12 12" />
  101.         </svg>
  102.       </button>
  103.     </div>
  106.     <div class="toast toast-loading">
  107.       <div class="icon-wrapper">
  108.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  109.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  110.           class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  111.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  112.           <path d="M5 12l5 5l10 -10" />
  113.         </svg>
  114.       </div>
  116.       <p>File has been removerd succesfully!</p>
  118.     </div>
  121.     <div class="toast toast-dark toast-loading">
  122.       <div class="icon-wrapper">
  123.         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  124.           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
  125.           class="icon icon-tabler icons-tabler-outline icon-tabler-check">
  126.           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  127.           <path d="M5 12l5 5l10 -10" />
  128.         </svg>
  129.       </div>
  131.       <p>File has been removerd succesfully!</p>
  132.     </div>
  134.   </section>
  135. </body>
  137. </html>
复制代码
代码

  1. *{
  2.   box-sizing: border-box;
  3. }
  5. body{
  6.   background: #f5edfd;
  7.   font-family: 'Poppins', sans-serif;
  8.   display: flex;
  9.   align-items: center;
  10.   justify-content: center;
  11.   margin: 0;
  12.   min-height: 100vh;
  13. }
  15. .toast-wrapper{
  16.   display: flex;
  17.   flex-direction: column;
  18.   gap: 2rem;
  19.   width: 100%;
  20.   max-width: 800px;
  21. }
  22. .toast{
  23.   background: #ffffff;
  24.   box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.3);
  25.   color: #110024;
  26.   display: flex;
  27.   align-items: center;
  28.   gap: 1rem;
  29.   padding: 0.5rem 1rem;
  30.   width: 100%;
  31. }
  33. .toast-dark{
  34.   background: #110024;
  35.   color: #ffffff;
  36. }
  38. .toast.toast-rounded{
  39.   border-radius: 50px;
  40. }
  42. .toast.toast-loading{
  43.   --loading-width: 40%;
  44.   position: relative;
  45.   justify-content: center;
  46. }
  48. .toast.toast-loading::after{
  49.   content: '';
  50.   background: #110024;
  51.   position: absolute;
  52.   bottom: 0;
  53.   left: 0;
  54.   height: 3px;
  55.   width: var(--loading-width);
  56. }
  58. .toast.toast-dark.toast-loading::after{
  59.   background: #ffffff;
  60. }
  62. .toast .icon-wrapper{
  63.   background: #2ca12c;
  64.   border-radius: 50%;
  65.   color: #ffffff;
  66.   display: flex;
  67.   align-items: center;
  68.   justify-content: center;
  69.   height: 36px;
  70.   width: 36px;
  71. }
  73. .toast-dark .icon-wrapper{
  74.   background: #ffffff;
  75.   color: #2ca12c;
  76. }
  78. .toast .close-btn{
  79.   background: none;
  80.   border: none;
  81.   color: #9b9b9b;
  82.   cursor: pointer;
  83.   margin-left: auto;
  84.   padding: 0;
  85. }
复制代码
06_BirthdayList

计划稿


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./index.css">
  9. </head>
  11. <body>
  12.   <section class="list-wrapper">
  13.     <h3 class="list">24 birthdays today</h3>
  14.     <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yates</span> <span>29 years</span></div></div>
  15.     <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Hester Hogan</span> <span>32 years</span></div></div>
  16.     <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>LorryLttle</span> <span>32 years</span></div></div>
  17.     <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yates</span> <span>29 years</span></div></div>
  18.     <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yates</span> <span>29 years</span></div></div>
  19.     <div class="list"><button>View all</button></div>
  20.   </section>
  21. </body>
  23. </html>
复制代码
  1. * {
  2.     box-sizing: border-box;
  3. }
  5. body {
  6.     background: #f089b1;
  7.     display: flex;
  8.     align-items: center;
  9.     justify-content: center;
  10.     margin: 0;
  11.     min-height: 100vh;
  12. }
  14. .list-wrapper {
  15.     display: flex;
  16.     flex-direction: column;
  17.     align-items: flex-start;
  18.     padding: 40px;
  19.     background: #fff;
  20.     border-radius: 0.5rem;
  21.     box-shadow: 70px 50px 40px rgb(226, 112, 158);
  22.     gap: 1.2rem;
  23.     width: 30%;
  24.     /* height: 30rem; */
  25.     max-width: 700px;
  26.     overflow: hidden;
  27. }
  29. h3 {
  30.     font-weight: normal;
  31.     white-space: nowrap;
  32.     margin: 0;
  33. }
  35. .list {
  36.     width: 100%;
  37.     display: flex;
  38.     align-items: center;
  39. }
  41. .list img {
  42.     min-width: 25px;
  43.     height: 25px;
  44.     border-radius: 50%;
  45.     background-color: aqua;
  46.     margin-right: 8px;
  47. }
  49. .list-name {
  50.     display: flex;
  51.     flex-direction: column;
  52. }
  54. .list-name span:nth-of-type(2) {
  55.     font-size: 13px;
  56.     color: #9b9899;
  57. }
  59. button {
  60.     width: 100%;
  61.     height: 40px;
  62.     color: #fff;
  63.     border: none;
  64.     border-radius: 0.2em;
  65.     background-image: linear-gradient(to right, #e76ecf, #fe69a4);
  66.     box-shadow: 0px 5px 4px rgba(246, 89, 194, 0.3);
  67. }
复制代码
07_Pricing Table

计划稿


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./index.css">
  9. </head>
  11. <body>
  13.   <div class="table-wrapper">
  14.     <div class="halo purple"></div>
  15.     <div class="halo blue"></div>
  16.     <div class="halo yellow"></div>
  17.   
  18.     <ul class="table-list">
  19.       <li>
  20.         <h3>Free</h3>
  21.         <div class="list-price"><span><span>$</span> <span>0</span></span></div>
  22.         <p class="list-pack">Free oyour whole team</p>
  23.         <p>For individuals or teams looking to organize anything.</p>
  24.         <button>Get started</button>
  25.       </li>
  26.       <li>
  27.         <h3>Standard</h3>
  28.         <div class="list-price"><span><span>$</span> <span>6</span></span></div>
  29.         <p class="list-pack">Peruser per month</p>
  30.         <p>For teams that need to manage more work.</p>
  31.         <button>Upgrade Now</button>
  32.       </li>
  33.       <li>
  34.         <h3>Premium</h3>
  35.         <div class="list-price"><span><span>$</span> <span>12</span></span></div>
  36.         <p class="list-pack">Peruser per month</p>
  37.         <p>Best for teams that need to track multiple projects.</p>
  38.         <button>Try for free</button>
  39.       </li>
  40.     </ul>
  41.   </div>
  42. </body>
  44. </html>
复制代码
  1. * {
  2.   box-sizing: border-box;
  3. }
  5. body {
  6.   background-color: #f5f8ff;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   margin: 0;
  11.   min-height: 100vh;
  12. }
  14. li {
  15.   list-style: none;
  16.   /* 移除列表项前的符号 */
  17.   margin: 0;
  18.   /* 重置外边距 */
  19.   padding: 0;
  20.   /* 重置内边距 */
  21. }
  23. .table-wrapper {
  24.   position: relative;
  25.   min-height: 50vh;
  26.   min-width: 625px;
  27.   border: 15px solid #fff;
  28.   border-radius: 10px;
  29.   background-color: rgba(255, 255, 255, .7);
  30.   /* overflow: hidden; */
  31. }
  33. .table-list {
  34.   display: flex;
  35.   gap: 2rem;
  36.   max-width: 800px;
  37. }
  39. .list-price span:nth-of-type(1) {
  40.   font-size: 20px;
  41.   font-weight: bold;
  42. }
  44. .list-price span:nth-of-type(2) {
  45.   font-size: 40px;
  46.   font-weight: bold;
  47. }
  49. p {
  50.   font-size: 18px;
  51. }
  53. .list-pack {
  54.   margin: 0;
  55.   font-size: 12px;
  57. }
  59. button {
  60.   border: none;
  61.   width: 7rem;
  62.   height: 40px;
  63.   border-radius: 5px;
  65. }
  67. .table-list li:nth-of-type(1) button {
  68.   background-color: #edbbff;
  69. }
  71. .table-list li:nth-of-type(2) button {
  72.   background-color: #aef1f5;
  73. }
  75. .table-list li:nth-of-type(3) button {
  76.   background-color: #ffddb6;
  77. }
  79. .halo {
  80.   position: absolute;
  81.   top: 4rem;
  82.   left: 20rem;
  83.   /* background-color: #edbbff; */
  84.   width: 15rem;
  85.   height: 15rem;
  86.   border-radius: 50%;
  88. }
  90. .purple {
  91.   /* position: absolute; */
  92.   top: 13rem;
  93.   left: -8rem;
  94.   width: 20rem;
  95.   height: 20rem;
  96.   /* background-color: #edbbff; */
  97.   background-image: radial-gradient(circle, rgba(237, 187, 255, 1) 0%, rgba(237, 187, 255, 0) 100%);
  98.   box-shadow: 0 20px 70px rgba(237, 187, 255, 0.2),
  99.       /* 下阴影 */
  100.       0 -20px 70px rgba(237, 187, 255, 0.2),
  101.       /* 上阴影 */
  102.       20px 0 70px rgba(237, 187, 255, 0.2),
  103.       /* 右阴影 */
  104.       -20px 0 70px rgba(237, 187, 255, 0.2);
  105.   /* 左阴影 */
  106.   z-index: -5;
  107. }
  109. .blue {
  110.   /* background-color: #aef1f5; */
  111.   top: -6rem;
  112.   left: 10rem;
  113.   background-image: radial-gradient(circle, rgba(174, 241, 245, 1) 0%, rgba(237, 187, 255, 0) 100%);
  114.   box-shadow: 0 20px 70px rgba(174, 241, 245, 0.2),
  115.       /* 下阴影 */
  116.       0 -20px 70px rgba(174, 241, 245, 0.2),
  117.       /* 上阴影 */
  118.       20px 0 70px rgba(174, 241, 245, 0.2),
  119.       /* 右阴影 */
  120.       -20px 0 70px rgba(174, 241, 245, 0.2);
  121.   /* 左阴影 */
  122.   z-index: -5;
  123. }
  125. .yellow {
  126.   top: -3rem;
  127.   left: 40rem;
  128.   /* background-color: #ffddb6; */
  129.   background-image: radial-gradient(circle, rgba(255, 221, 182, 1) 0%, rgba(237, 187, 255, 0) 100%);
  130.   box-shadow: 0 20px 70px rgba(255, 221, 182, 0.2),
  131.       /* 下阴影 */
  132.       0 -20px 70px rgba(255, 221, 182, 0.2),
  133.       /* 上阴影 */
  134.       20px 0 70px rgba(255, 221, 182, 0.2),
  135.       /* 右阴影 */
  136.       -20px 0 70px rgba(255, 221, 182, 0.2);
  137.   /* 左阴影 */
  138.   z-index: -5;
  139. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

九天猎人

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表