HTML-CSS练习例子

HTML CSS 练习

https://icodethis.com

作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。这个网站练习HTML
CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。

下面是练习，当然布局的方法有很多，下面是一种。

01基础

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

在这里插入图片描述

设计稿

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础练习title>
  <style>
    .main {
      width: 400px;
      height: 100%;
      margin: 0 auto;
      /* padding-top: 30px; */
      padding: 0 10px;
      /* background-color: rgba(241, 77, 186, 0.5); */
    }

    .content {
      padding-top: 30px;
    }

    p {
      margin: 0;
    }

    .group {
      margin-top: 15px;
    }

    .title {
      display: inline-block;
      /* padding: 5px ; */
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      padding: 0 10px;
      /* margin-bottom: 20px; */
      box-shadow: 0 2px 3px #7b7878;
      border-radius: 3px;
      background-color: #d9d9d9;
    }

    .my-custom-font-Arial {
      /* @font-face 加载外部字体 */
      /* 'Artal'： 这是首选的字体，也就是开发者希望文本显示的字体。'Artal'是一个具体的字体名称，假设它是一个自定义字体或者是用户系统中已安装的字体。如果浏览器在用户的系统中找到了这个字体，它就会使用这个字体来渲染文本。 */
      font-family: 'Arial', sans-serif;
    }

    .my-custom-font-Roman {
      font-family: 'Roman', sans-serif;
    }

    .font-underlined {
      text-decoration: underline;
    }

    .font-through {
      text-decoration: line-through;
    }

    h1,
    h2,
    h3 {
      margin: 0;
    }

    .color-box {
      margin-top: 10px;
    }

    .color-orange {
      color: #ee5531;
    }

    .square {
      width: 50px;
      height: 50px;
      background-color: #ee5531;
    }

    .color-purple {
      color: #4621ab;
    }

    .circular {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #4621ab;
    }

    h6 {
      margin: 0;
      margin-bottom: 3px;
    }

    .button-box {
      margin-top: 10px;
    }

    button {
      display: inline-block;
      width: 150px;
      height: 30px;
      border: none;
      color: #fff;
      background-color: #4621ab;
      border-radius: 2px;
    }

    /* 鼠标悬停时 */
    button:hover {
      background-color: #866cdc;
    }

    /* 点击时（按下状态） */
    button:active {
      background-color: #cfc4f1;
    }
  style>
head>

<body>
  <div class="main">
    <div class="content">
      
      <div class="title">TYPOGRAPHYdiv>
      <div>
        <div class="group">
          <p><strong>Make me boldstrong>p>
          <p><em>Make me italicem>p>
        div>

        <div class="group">
          <p class="my-custom-font-Arial">I'm from the Artal font famil!p>
          <p class="my-custom-font-Roman">And I'm frorm the Times New Ronan fot family! .p>
        div>

        <div class="group">
          <p class="font-underlined">Make this text be underlinedp>
          <p class="font-through">And put a Hine through this onep>
        div>

      div>

    div>

    <div class="content">
      
      <div class="title">HEADINGSdiv>
      <div>
        <div>
          <h1>This isa <h1> tagh1>
          <h2>This isa<h2>tagh2>
          <h3>This isa <h3>tagh3>
        div>
      div>
    div>

    <div class="content">
      
      <div class="title">COLORSdiv>
      <div>
        <div class="color-box">
          <div class="color-orange">Color me orange!div>
          <div class="color-orange square">div>
        div>

        <div class="color-box">
          <div class="color-purple">Color me purple!div>
          <div class="color-purple circular">div>
        div>
      div>
    div>

    <div class="content">
      
      <div class="title">BUTTONSdiv>
      <div>
        <div class="button-box">
          <h6>Defulth6>
          <button>Buttonbutton>
        div>

        <div class="button-box">
          <h6>Hoveredh6>
          <button>Buttonbutton>
        div>

        <div class="button-box">
          <h6>Activeh6>
          <button>Buttonbutton>
        div>
      div>
    div>


  div>
body>

html>

02_404页面

设计搞

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .main {
      /* border: 1px solid #000; */
      position: relative;
      width: 100%;
      /* 或者设置一个固定宽度 */
      height: 100%;
      /* 或者设置一个固定高度 */
    }

    .main-box {
      position: absolute;
      top: 50%;
      /* 使子元素的上边缘位于父元素的中心 */
      left: 50%;
      /* 使子元素的左边缘位于父元素的中心 */
      transform: translate(-50%, 20%);
      /* 调整位置，使其居中 */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 800px;
      height: 500px;
      /* margin: 100px auto; */
      /* background-color: rgba(241, 77, 186, 0.5); */
      background-image: linear-gradient(to right, #f073c6, #ff6b96);
      border-radius: 8px;
      border: 2px solid black;
      box-shadow: 0 8px 15px rgba(230, 41, 135, 0.5);

    }

    .content {
      width: 50%;
      text-align: center;
      color: #fff;
      /* background-color: rgb(227, 153, 57);
      border: 1px solid black; */

    }

    .one {
      margin: 50px 0;
    }

    .two {
      margin: 0 0 20px 0;
      font-size: 100px;
      font-weight: 700;
    }

    .three {
      margin: 0 0 30px 0;
    }

    .four {
      vertical-align: bottom;
    }

    a {
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid #fff;
    }

    .circular-box {
      position: absolute;
      width: 800px;
      height: 500px;
      top: 50%;
      /* 使子元素的上边缘位于父元素的中心 */
      left: 50%;
      /* 使子元素的左边缘位于父元素的中心 */
      transform: translate(-50%, 20%);
      /* 调整位置，使其居中 */
      background-color: rgba(241, 77, 186, 0.2);
      overflow: hidden;
    }

    .circular {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      /* background-color: #fff; */

    }

    .circular-box> :nth-child(1) {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 70%;
      /* 使子元素的上边缘位于父元素的中心 */
      left: -5%;
      background-image: linear-gradient(55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
    }

    .circular-box> :nth-child(2) {
      width: 300px;
      height: 300px;
      position: absolute;
      top: -10%;
      /* 使子元素的上边缘位于父元素的中心 */
      left: 75%;
      background-image: linear-gradient(-55deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
    }

    .circular-box> :nth-child(3) {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 60%;
      /* 使子元素的上边缘位于父元素的中心 */
      left: 75%;
      background-image: linear-gradient(328deg, rgba(255, 255, 255, 0.137), rgba(242, 114, 193, 0.342));
    }
  style>
head>

<body>
  <div class="main">
    <div class="main-box">
      <div class="content one">UIDesignDallydiv>
      <div class="content two">404div>
      <div class="content three">The link you clicked may be broken or the<br/>
        page may have been removed.div>
      <div class="content four">Visit the <a href="">home pagea> or <a href="">contacta>mediv>
    div>

    <div class="circular-box">
      <div class="circular">div>
      <div class="circular">div>
      <div class="circular">div>
    div>
  div>
body>

html>

代码2

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index2.css">
head>

<body>
  <div class="container">
    <div class="content">
      <div class="circle1">div>
      <div class="circle2">div>
      <div class="circle3">div>
      <p>UIDesignDailyp>
      <h1>404h1>
      <h3>The link you clicked may be broken or the <br> page may have been removed.h3>
      <h5>Visit the <a href="">home pagea> or <a href="">contacta> meh5>
    div>
  div>

body>

html>

/*index2.css*/
body{
  margin: 0;
  padding: 0;
}

.container{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content{
  overflow: hidden;
  width:95%;
  height: calc(80%/1.4);
  background-image: linear-gradient(90deg, rgb(239,115,199), rgb(255,106,149));
  border: 3px solid rgb(36,46,76);
  border-radius: 13px;
  display:flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 2px 10px 10px rgba(239, 115, 200, 0.534);
}
.circle1{
  width:250px;
  height: 250px;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  border-radius: 250px;
  position:absolute;
  left:-40px;
  top:300px;
}

.circle2{
  width:250px;
  height: 250px;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  border-radius: 250px;
  position:absolute;
  right:-70px;
  top:-50px;
}
.circle3{
  width:70px;
  height: 70px;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.308), rgba(242, 114, 193, 0));
  border-radius: 70px;
  position:absolute;
  left:70%;
  top:50%;
}
p{
  font-size: 10px;
  padding-top: 50px;
  font-family:'Open Sans';
  color:rgba(255, 255, 255, 0.719);
}

h1{
  font-size: 120px;
  font-weight: 600;
  font-family:'Open Sans';
  color:white;
}

h3{
  font-size: 11px;
  font-weight: 501;
  text-align: center;
  font-family:'Open Sans';
  color:rgba(255, 255, 255, 0.685);
}

h5{
  font-size: 10px;
  padding-top: 30px;
  font-family:'Open Sans';
  color:rgba(255, 255, 255, 0.664);
}

a{
  text-decoration: underline;
}

03_Christmas Promo

设计稿

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <div class="container">
    <div class="content">
      <div class="x">div>
      <img src="https://i.postimg.cc/J0GVNJFy/tree.png" alt="">
      <h5>Merry Christmas !h5>
      <p class="tasks">You completed all your Decenber's tasks<br />
        50 we decided to get you a gift:p>
      <p class="plan">50% off on your Yearly Premium Planp>
      <button>GET YOUR GIFTbutton>
    div>
  div>
body>

html>

/* Write your CSS code here */body {
    padding: 0;
    margin: 0;
}

.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eff0f3;
    /* border: 1px solid red;   */
}

.content {
    position: relative;
    background-color: #fff;
    width: 400px;
    height: 450px;
    border-radius: 4px;
    border-top-right-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 4px 10px 10px rgba(53, 64, 99, 0.1);
}

.x {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 20px;
    top: 20px;
    font-size: 20px;
    transform: rotate(45deg);
}

.x::after,
.x::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: rgb(123, 122, 122);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.x::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

img {
    margin-top: 70px;
    width: 100px;
    height: 130px;
}

/* .tasks{
  text-align: center;
} */
.tasks {
    font-size: 12px;
    color: rgb(126, 125, 123);
    text-align: center;
}

.plan {
    color: orange;
    font-size: 13px;
}

button {
    color: white;
    width: 170px;
    height: 40px;
    margin: 30px;
    font-size: 12px;
    background-color: #242e4c;
    border-radius: 5px;
    box-shadow: 1px 5px 5px rgba(36, 46, 76, 0.5);
}

04_Subscribe

设计稿

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index.css">
head>

<body>
  <div class="container">
    <div class="content">
      <h4>Let's keep in touchh4>
      <p class="Subscribe">Subscribe to keep up with fresh news and exciting updates.<br />
        We promise not to spam youl!p>
      <form action="">
        <input class="email" type="text" placeholder="Enter your email address">
        <button class="email-button">SEND   →button>
      form>
      <p class="checkbox-box">
        <input id="checkbox1" class="input-checkbox" type="checkbox">
        <label for="checkbox1">I agree to my email address being stored and<br />used to reccive monthly ncwsletter.label>
      p>
    div>
  div>
body>

html>

body {
  padding: 0;
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f5f8;
  /* border: 1px solid red; */
}

.content {
  /* position: relative; */
  background-color: #fff;
  width: 600px;
  height: 300px;
  border-radius: 7px;
  box-shadow: 0px 10px 10px rgba(61, 159, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Subscribe {
  font-size: 14px;
  text-align: center;
}

.email {
  width: 230px;
  height: 35px;
  border-radius: 5px;
  padding-left: 15px;
  margin-right: 5px;
  margin-top: 20px;
  border: 1px solid rgb(212, 214, 217);
}

.email-button {
  width: 150px;
  height: 40px;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid rgb(212, 214, 217);
  background-color: rgb(61, 159, 255);
  box-shadow: 0px 5px 5px rgba(61, 159, 255, 0.3);
}

.email-button:hover {
  background-color: rgb(12, 122, 231);
  box-shadow: 0px 5px 5px rgba(61, 159, 255, 0.3);
}

.checkbox-box {
  margin-left: -110px;
}

.input-checkbox {
  display: none;
  /* 隐藏原生的checkbox ，自定义checkbox*/
}
.checkbox-box label {
  position: relative;
  padding-left: 10px;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  color: #787f85;
}

.checkbox-box label:before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  width: 15px;
  height: 15px;
  border: 1px solid rgb(212, 214, 217);
  border-radius: 3px;
}

   /* 当checkbox被选中时的样式 */
   .checkbox-box input[type="checkbox"]:checked+label:before {
    background-color: #3d9fff;
    /* 背景颜色，可选 */
}
.checkbox-box input[type="checkbox"]:checked+label:after {
  content: "\2713";
  position: absolute;
  left: -12px;
  top: 0px; 
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

05_Toasts

设计稿

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index2.css">
head>

<body>
  <section class="toast-wrapper">

    <div class="toast">
      <div class="icon-wrapper">
          <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-check">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M5 12l5 5l10 -10" />
          svg>
      div>

      <p>File has been removerd succesfully!p>

      <button class="close-btn">
          <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>
      button>
  div>


    <div class="toast toast-dark">
      <div class="icon-wrapper">
        <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-check">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M5 12l5 5l10 -10" />
        svg>
      div>

      <p>File has been removerd succesfully!p>

      <button class="close-btn">
        <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>
      button>
    div>


    <div class="toast toast-rounded">
      <div class="icon-wrapper">
        <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-check">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M5 12l5 5l10 -10" />
        svg>
      div>

      <p>File has been removerd succesfully!p>

      <button class="close-btn">
        <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>
      button>
    div>




    <div class="toast toast-dark toast-rounded">
      <div class="icon-wrapper">
        <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-check">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M5 12l5 5l10 -10" />
        svg>
      div>

      <p>File has been removerd succesfully!p>

      <button class="close-btn">
        <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>
      button>
    div>


    <div class="toast toast-loading">
      <div class="icon-wrapper">
        <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-check">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M5 12l5 5l10 -10" />
        svg>
      div>

      <p>File has been removerd succesfully!p>

    div>


    <div class="toast toast-dark toast-loading">
      <div class="icon-wrapper">
        <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-check">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M5 12l5 5l10 -10" />
        svg>
      div>

      <p>File has been removerd succesfully!p>
    div>

  section>
body>

html>

代码

*{
  box-sizing: border-box;
}

body{
  background: #f5edfd;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

.toast-wrapper{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 800px; 
}
.toast{
  background: #ffffff;
  box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.3);
  color: #110024;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  width: 100%;
}

.toast-dark{
  background: #110024;
  color: #ffffff;
}

.toast.toast-rounded{
  border-radius: 50px;
}

.toast.toast-loading{
  --loading-width: 40%;
  position: relative;
  justify-content: center;
}

.toast.toast-loading::after{
  content: '';
  background: #110024;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--loading-width);
}

.toast.toast-dark.toast-loading::after{
  background: #ffffff;
}

.toast .icon-wrapper{
  background: #2ca12c;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
}

.toast-dark .icon-wrapper{
  background: #ffffff;
  color: #2ca12c;
}

.toast .close-btn{
  background: none;
  border: none;
  color: #9b9b9b;
  cursor: pointer;
  margin-left: auto;
  padding: 0;
}

06_BirthdayList

设计稿

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index.css">
head>

<body>
  <section class="list-wrapper">
    <h3 class="list">24 birthdays todayh3>
    <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yatesspan> <span>29 yearsspan>div>div>
    <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Hester Hoganspan> <span>32 yearsspan>div>div>
    <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>LorryLttlespan> <span>32 yearsspan>div>div>
    <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yatesspan> <span>29 yearsspan>div>div>
    <div class="list"> <img src="./image1.png" alt=""><div class="list-name"><span>Bertie Yatesspan> <span>29 yearsspan>div>div>
    <div class="list"><button>View allbutton>div>
  section>
body>

html>

* {
    box-sizing: border-box;
}

body {
    background: #f089b1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
}

.list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 70px 50px 40px rgb(226, 112, 158);
    gap: 1.2rem;
    width: 30%;
    /* height: 30rem; */
    max-width: 700px;
    overflow: hidden;
}

h3 {
    font-weight: normal;
    white-space: nowrap;
    margin: 0;
}

.list {
    width: 100%;
    display: flex;
    align-items: center;
}

.list img {
    min-width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: aqua;
    margin-right: 8px;
}

.list-name {
    display: flex;
    flex-direction: column;
}

.list-name span:nth-of-type(2) {
    font-size: 13px;
    color: #9b9899;
}

button {
    width: 100%;
    height: 40px;
    color: #fff;
    border: none;
    border-radius: 0.2em;
    background-image: linear-gradient(to right, #e76ecf, #fe69a4);
    box-shadow: 0px 5px 4px rgba(246, 89, 194, 0.3);
}

07_Pricing Table

设计稿

在这里插入图片描述

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index.css">
head>

<body>

  <div class="table-wrapper">
    <div class="halo purple">div>
    <div class="halo blue">div>
    <div class="halo yellow">div>
  
    <ul class="table-list">
      <li>
        <h3>Freeh3>
        <div class="list-price"><span><span>$span> <span>0span>span>div>
        <p class="list-pack">Free oyour whole teamp>
        <p>For individuals or teams looking to organize anything.p>
        <button>Get startedbutton>
      li>
      <li>
        <h3>Standardh3>
        <div class="list-price"><span><span>$span> <span>6span>span>div>
        <p class="list-pack">Peruser per monthp>
        <p>For teams that need to manage more work.p>
        <button>Upgrade Nowbutton>
      li>
      <li>
        <h3>Premiumh3>
        <div class="list-price"><span><span>$span> <span>12span>span>div>
        <p class="list-pack">Peruser per monthp>
        <p>Best for teams that need to track multiple projects.p>
        <button>Try for freebutton>
      li>
    ul>
  div>
body>

html>

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

li {
  list-style: none;
  /* 移除列表项前的符号 */
  margin: 0;
  /* 重置外边距 */
  padding: 0;
  /* 重置内边距 */
}

.table-wrapper {
  position: relative;
  min-height: 50vh;
  min-width: 625px;
  border: 15px solid #fff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .7);
  /* overflow: hidden; */
}

.table-list {
  display: flex;
  gap: 2rem;
  max-width: 800px;
}

.list-price span:nth-of-type(1) {
  font-size: 20px;
  font-weight: bold;
}

.list-price span:nth-of-type(2) {
  font-size: 40px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

.list-pack {
  margin: 0;
  font-size: 12px;

}

button {
  border: none;
  width: 7rem;
  height: 40px;
  border-radius: 5px;

}

.table-list li:nth-of-type(1) button {
  background-color: #edbbff;
}

.table-list li:nth-of-type(2) button {
  background-color: #aef1f5;
}

.table-list li:nth-of-type(3) button {
  background-color: #ffddb6;
}

.halo {
  position: absolute;
  top: 4rem;
  left: 20rem;
  /* background-color: #edbbff; */
  width: 15rem;
  height: 15rem;
  border-radius: 50%;

}

.purple {
  /* position: absolute; */
  top: 13rem;
  left: -8rem;
  width: 20rem;
  height: 20rem;
  /* background-color: #edbbff; */
  background-image: radial-gradient(circle, rgba(237, 187, 255, 1) 0%, rgba(237, 187, 255, 0) 100%);
  box-shadow: 0 20px 70px rgba(237, 187, 255, 0.2),
      /* 下阴影 */
      0 -20px 70px rgba(237, 187, 255, 0.2),
      /* 上阴影 */
      20px 0 70px rgba(237, 187, 255, 0.2),
      /* 右阴影 */
      -20px 0 70px rgba(237, 187, 255, 0.2);
  /* 左阴影 */
  z-index: -5;
}

.blue {
  /* background-color: #aef1f5; */
  top: -6rem;
  left: 10rem;
  background-image: radial-gradient(circle, rgba(174, 241, 245, 1) 0%, rgba(237, 187, 255, 0) 100%);
  box-shadow: 0 20px 70px rgba(174, 241, 245, 0.2),
      /* 下阴影 */
      0 -20px 70px rgba(174, 241, 245, 0.2),
      /* 上阴影 */
      20px 0 70px rgba(174, 241, 245, 0.2),
      /* 右阴影 */
      -20px 0 70px rgba(174, 241, 245, 0.2);
  /* 左阴影 */
  z-index: -5;
}

.yellow {
  top: -3rem;
  left: 40rem;
  /* background-color: #ffddb6; */
  background-image: radial-gradient(circle, rgba(255, 221, 182, 1) 0%, rgba(237, 187, 255, 0) 100%);
  box-shadow: 0 20px 70px rgba(255, 221, 182, 0.2),
      /* 下阴影 */
      0 -20px 70px rgba(255, 221, 182, 0.2),
      /* 上阴影 */
      20px 0 70px rgba(255, 221, 182, 0.2),
      /* 右阴影 */
      -20px 0 70px rgba(255, 221, 182, 0.2);
  /* 左阴影 */
  z-index: -5;
}

相关阅读:
Oracle LiveLabs实验：探索 Oracle 23c 数据库的强大功能 - 架构权限和无锁预留
 C++--哈希思想的应用--位图--布隆过滤器的介绍--1112
华为OD机试真题 Java 实现【简单的自动曝光】【2023Q1 100分】，附详细解题思路
 vscode 远程开发
 怎么制作网站才能脱颖而出
 黑马redis学习记录Ⅲ SpringDataRedis客户端
 Unity设计模式——建造者模式
 【Java面试】介绍下Spring IoC的工作流程
 HCIA 的认证证书含金量？
高效使用Vscode（C++&Python）
原文地址：https://blog.csdn.net/pacong/article/details/139504499