WEB前端开始学习 7.14

LiangKJZ

已于 2022-07-15 13:30:11 修改

阅读量190

点赞数 1

文章标签：前端学习 css

于 2022-07-14 20:47:17 首次发布

本文链接：https://blog.csdn.net/LiangKJZ/article/details/125792620

版权

1.今天的作业非常不容易，一下午才完成两项，今晚必须要熬夜写点，还有许多问题也没有解决，不得不说同学们都很厉害，要学的还有很多。

2.对于知识的理解程度还不够，后面还要去自学才行，和别的同学比起来，我的理解太浅了，也就是经验太少了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人人网</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
        color: black;
    }

    body {
        margin: 20px;
    }

    main {
        line-height: 50px;
    }

    .slogan>span {
        font-weight: bold;
    }

    .captcha {
        background-image: url(./人人网image/验证码.webp);
        display: block;
        width: 95px;
        height: 35px;
        background-position: -5px -4px;
        float: left;
        position: relative;
        top: 5px;
    }

    #captcha>a:active+.captcha {
        background-position: -5px -60px;
    }

    button {
        width: 150px;
        height: 40px;
        background-color: rgb(103, 165, 75);
        border: none;
        color: aliceblue;
        font-size: 23px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        position: relative;
        top: 0;
    }

    button::after {
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        bottom: 0px;
        left: 150px;
        border-top: 20px solid transparent;
        border-left: 20px solid rgb(103, 165, 75);
        border-bottom: 20px solid transparent;

    }
</style>

<body>

    <head>
        <img src="./人人网image/renren_titile.gif" alt="1">
    </head>
    <main>
        <div class="slogan">人人网，中国<span>最真实、最有效</span>的社会平台，加入人人网，找回老朋友，结交新朋友。</div>
        <form action="">
            电子邮箱：<input type="text" name="E-mail" value="" /><br>
            设置密码：<input type="password" name="passWord" /><br>
            真实姓名：<input type="text" name="Name" value="" /><br>
            性别: 男：<input type="radio" name="sex" value="male" checked />
            女：<input type="radio" name="sex" value="female" /><br>
            生日：<select name="birthday">
                <option value="2000">2000</option>
                <option value="2001" selected>2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
            </select>年
            <select name="month">
                <option value="1">1</option>
                <option value="2" selected>2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>月
            <select name="day">
                <option value="1">1</option>
                <option value="2" selected>2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select><br>
            <a href="#">
                为什么要填写我的生日？
            </a><br>
            我现在：<select name="identity">
                <option value="sf" selected>请选择身份</option>
                <option value="ys">医生</option>
                <option value="ls">老师</option>
                <option value="xs">学生</option>
            </select>（ 非常重要 ）
            <div id="captcha">
                <a href="#">看不清换一张？</a>
                <span class="captcha"></span>
            </div>
            验证码：<input type="text" name="captcha" value="" /><br>
            <button type="submit">立即注册</button>
        </form>
    </main>
</body>

</html>

贴一份作业，写的不好，还差的远。。。。