HTML＜1＞+-CSDN博客

本文链接：https://blog.csdn.net/weixin_43918232/article/details/122659177

1.Table

效果图

表格的HTML部分代码

<div class="container">
    <table>
      <thead>
        <tr><th colspan="2"><h1>My Schedule</h1></th></tr>
        <tr><th><h2>Time</h2></th>
        <th ><h2>Event</h2></th></tr>
        </thead>
       <tbody>
         <tr><td class="left"><h3>07:30 AM-8:10 AM</h3></td>
         <td class="left"><h3>Codeing</h3></td>
         </tr>
         <tr><td class="left"><h3>08:30 AM-10:10 AM</h3></td>
           <td class="left"><h3>Codeing</h3></td></tr>
         <tr><td class="left"><h3>10:30 AM-12:00 AM</h3></td>
           <td class="left"><h3>Codeing</h3></td></tr>
         <tr><td class="left"><h3>01:00 PM-03:00 PM</h3></td>
           <td class="left"><h3>Codeing</h3></td></tr>
         <tr>
           <td class="left"><h3>03:20 PM-04:00 PM</h3></td><td class="left"><h3>Codeing</h3></td></tr>
        </tbody>
      </table>
</div>

2.Form

效果图

Form部分HTML代码

 <form action="submission.html" method="GET">
        <label for="username">Username:</label>
        <br>
		<input id="username" name="username" type="text" required minlength="3" maxlength="15">
        <br>
        <label for="pw">Password:</label>
        <br>
		<input id="pw" name="pw" type="password" required minlength="8" maxlength="15">
        <br>
        <input type="submit" value="Submit">
      </form>

3.一个特效文字代码分享

效果图

<!DOCTYPE html>
<html>
    <head>
        <meta  name="viewport"  content="width=device-width, initial-scale=1.0">
        <title>WHAT</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <svg viewBox="0 0 1000 400">
                <!---下行可以修改显示的文本-->
                <text id="mytext" x="50%" y="50%" text-anchor="middle" fill="none">Code？</text>
                <use xlink:href="#mytext"  class="copy copy1"></use>
                <use xlink:href="#mytext"  class="copy copy2"></use>
                <use xlink:href="#mytext"  class="copy copy3"></use>
                <use xlink:href="#mytext"  class="copy copy4"></use>
                <use xlink:href="#mytext"  class="copy copy5"></use>
            </svg>
        </div>
    </body>
</html>

CSS 这里修改配色啦

*{
    margin: 0;
    padding:0;
    box-shadow: border-box;
    font-family: 'poppins',sans-serif;
}
.container{
    width: 100%;
    height: 100vh;
    background:rgb(250, 250, 250);
}
svg{

    font-size:150px;
    padding-top: 15%;
}
.copy{
    fill:none;
    stroke:rgb(0, 0, 0);
    stroke-width: 3px;
    stroke-dasharray: 8% 30%;
    stroke-dashoffset: 0%;
    animation: textanimation 6s linear infinite;
}
@keyframes textanimation {
    100%{
        stroke-dashoffset: -35%;
    }
}

.copy1{
    stroke:#f70000;
    animation-delay: -1s;
}

.copy2{
    stroke:#ff5e00;
    animation-delay: -2s;
}

.copy3{
    stroke:#ffd13a;
    animation-delay: -3s;
}

.copy4{
    stroke:#053ae7;
    animation-delay: -4s;
}

.copy5{
    stroke:#5905c7;
    animation-delay: -5s;
}