玩转HTML（001）

最新推荐文章于 2023-01-17 23:35:51 发布

大笨钟47

最新推荐文章于 2023-01-17 23:35:51 发布

阅读量149

点赞数

分类专栏： HTML（学习）

本文链接：https://blog.csdn.net/qq_45033722/article/details/103429631

版权

HTML（学习）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天![

今天小编学习了HTML的三中选择器，基本选择器（标签，id，class），其他选择器，伪类选择武器（用在超链接上）

今天小编实现了一个登录的界面：

先上图：

上以个比较骚的图：
在这里插入图片描述

在这里插入图片描述

代码实现很简单：

下面直接上代码：

下面时第一张的HTML
并未用 css外部链接，用的时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录提交</title>
    <style>
        .div1{
            width: 400px;
            height: 500px;
            border:  palevioletred dotted 5px;
            /*border-radius: 10%;*/
            border-color: bisque;
            background-image: url("../image/美女.jpeg");
            background-position: right;
            margin: auto;
            border-radius: 5%;
        }
        .p1{
            width: 100px;
            height: 40px;
            border: 1px blue solid;
            background-image: url("../image/孙悟空.jpg");
            background-position-x: 100px;
            background-position-y: 40px;
            background-position: top;
        }
        a{
            writing-mode: rl-bt;
            color: blue;
            float: right;
            text-align: right;
            text-decoration: none;
        }
        a:hover{
            font-size: 20px;
        }
        .p2{
            position: center;
            text-align: center;
        }
        button:hover{
            background-color: bisque;
        }
        button{
            width: 400px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="div1">
    <span>请注册</span>&emsp;&emsp;&emsp;
    <a href="作业2.1.html"  >立即登录</a><br><br>
    <input type="text" placeholder="请输入手机号" size="45" style="height: 30px"><br><br>
    <input type="password" placeholder="请输入短信验证码" size="30" style="height: 30px">&emsp;
    <input type="button" value="发送验证码" size="45" style="height: 30px"><br><br>
    <input type="text" placeholder="请输入用户名" size="45" style="height: 30px"><br><br>
    <input type="password" placeholder="请输入密码" size="45" style="height: 30px"><br><br>
    <input type="password" placeholder="请再次输入密码" size="45" style="height: 30px"><br><br>
    <input type="password" placeholder="请输入图形验证码" size="30" style="height: 30px">
    <p class="p1"></p>
    <p class="p2">
    <button  type="submit" style="color: blueviolet;font-size: 30px">立即注册</button>
    </p>

</div>
</body>
</html>

下面附上第二张的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        div{
            width: 400px;
            height: 250px;
            border: 5px dotted palevioletred;
            /*border-radius: 10%;*/
            border-color: bisque;
            background-image: url("../image/美女2.jpeg");
            background-position: right;
            margin: auto;
            border-radius: 5%;
        }
        a{
            color: blue;
            float: right;
            text-decoration: none;
        }
        a:hover{
            font-size: 20px;
        }
        button:hover{
            background-color: bisque;
        }
        .spn{
            float: right;
            color: palevioletred;
        }
        p{
            text-align: center;
        }
        button{
            height: 50px; width: 400px;color: blue;
            /*border: 1px solid blueviolet;*/
            font-size: 20px;
            text-align: center;
            position: center;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div>
    <span>请登录</span>
    <a href="作业2.html"  >立即注册</a><br><br>
    <input type="text" placeholder="请输入手机号" size="45" style="height: 30px"><br><br>
    <input type="password" placeholder="请输入密码" size="45" style="height: 30px"><br><br>
    <input type="radio" size="20" value="hot-login">七天之内自动登录
    <span class="spn" style="size: 20px">忘记密码？</span>
    <p><button type="submit" >登录</button></p>
</div>
</body>
</html>

今天小编的分享就到这里，如果有错误之处还请指正😁😁😁😁😁

大笨钟47

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
玩转HTML（001）

今天![今天小编学习了HTML的三中选择器，基本选择器（标签，id，class），其他选择器，伪类选择武器（用在超链接上）今天小编实现了一个登录的界面：先上图：上以个比较骚的图：代码实现很简单：下面直接上代码：下面时第一张的HTML并未用 css外部链接，用的时<!DOCTYPE html><html lang="en"><head&gt...
复制链接

扫一扫