这就是今天要实现的效果图（颜色提取推荐使用snipaste）
代码（仅供参考，不喜勿喷， 可以在评论区展示作品）
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* Write your CSS code here */body {background-color: rgb(233, 223, 255);margin: 0;padding: 0;}.content {width: 720px;height: 900px;margin: 0 auto;background-color: white;padding-top: 100px;}.outer {/* margin-top: 30px; */margin-left: 228px;}.box {font-size: 13px;text-align: center;background-color: rgb(217, 217, 217);border-radius: 8%;font-weight: bold;padding: 0.3rem;}.pbold {margin-bottom: 0px;font-size: 11px;font-weight: bold;}.pitalic {margin-top: 0px;font-size: 11px;font-style: italic;}.text1 {font-size: 11px;font-family: 'Arial';margin-bottom: 2px;}.text2 {margin-top: 0px;font-size: 11px;font-family: 'Times New Roman', Times, serif;}.text3 {font-size: 11px;text-decoration: underline;margin-bottom: 0px;}.text4 {font-size: 11px;text-decoration: line-through;margin-top: 0px;}.h1text {margin-top: 0px;font-size: 24px;margin-bottom: 0px;}.h2text {margin-top: 0px;font-size: 22px;margin-bottom: 0px;}.h3text {margin-top: 0px;}.text5 {color: orange;font-size: 11px;}.text6 {color: purple;font-size: 11px;}.square {width: 50px;height: 50px;background-color: orange;}.circle {width: 50px;height: 50px;background-color: purple;border-radius: 50%;margin-bottom: 30px;}.text7 {font-size: 11px;font-weight: bold;}.btn {height: 30px;line-height: 30px;width: 130px;text-align: center;font-size: 12px;background-color: rgb(70, 33, 171);cursor: pointer;}.btn2 {background-color: rgb(134,108,220);}.btn3 {background-color: rgb(207,196,241);}</style></head><body><div class="content"><div class="outer"><span class="box">TYPOGRAPHY</span><p class="pbold">Make me bold</p><p class="pitalic">Make me italic</p><p class="text1">I'm from the Arial font family!</p><p class="text2">And I'm from the Times New Roman font family!</p><p class="text3">Make this text be underlined</p><p class="text4">And put a line through this one</p><span class="box">HEADINGS</span><h1 class="h1text">This is a <h1> tag</h1><h2 class="h2text">This is a <h2> tag</h2><h3 class="h3text">This is a <h3> tag</h3><span class="box">COLORS</span><p class="text5">Color me orange!</p><div class="square"></div><p class="text6">Color me purple!</p><div class="circle"></div><span class="box">BUTTONS</span><p class="text7">Default</p><div class="btn btn1">Button</div><p class="text7">Hovered</p><div class="btn btn2">Button</div><p class="text7">Active</p><div class="btn btn3">Button</div></div></div></body></html>
