玩转HTML(001)

今天![

今天小编学习了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>

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

发布了23 篇原创文章 · 获赞 0 · 访问量 427
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览