HTML-CSS练习例子

时间：2024-06-14 07:09:31

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">
      <!-- TYPOGRAPHY -->
      <div class="title">TYPOGRAPHY</div>
      <div>
        <div class="group">
          <p><strong>Make me bold</strong></p>
          <p><em>Make me italic</em></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 underlined</p>
          <p class="font-through">And put a Hine through this one</p>
        </div>

      </div>

    </div>

    <div class="content">
      <!-- HEADINGS -->
      <div class="title">HEADINGS</div>
      <div>
        <div>
          <h1>This isa &lt;h1&gt; tag</h1>
          <h2>This isa&lt;h2&gt;tag</h2>
          <h3>This isa &lt;h3&gt;tag</h3>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- COLORS -->
      <div class="title">COLORS</div>
      <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">
      <!-- BUTTONS -->
      <div class="title">BUTTONS</div>
      <div>
        <div class="button-box">
          <h6>Defult</h6>
          <button>Button</button>
        </div>

        <div class="button-box">
          <h6>Hovered</h6>
          <button>Button</button>
        </div>

        <div class="button-box">
          <h6>Active</h6>
          <button>Button</button>
        </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>Document</title>
  <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">UIDesignDally</div>
      <div class="content two">404</div>
      <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 page</a> or <a href="">contact</a>me</div>
    </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>Document</title>
  <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>UIDesignDaily</p>
      <h1>404</h1>
      <h3>The link you clicked may be broken or the <br> page may have been removed.</h3>
      <h5

相关文章