html+css 模仿制作百度注册页面

一、html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<link rel="stylesheet" href="../css/baidu.css">

<body>
<div class="left">
    <div class="logo">
        <img src="../img/baidu.logo.png"/>
    div>
    <div class="ad">
        <dd style="color: white;font-size: 110px;">用科技dd>
        <dd style="color: white;font-size: 60px;">让复杂的世界更简单dd>
    div>
div>
<div class="right">
    <div class="login">
        <table class="register">
            <tr><span style="font-size: 70px;"><b>欢迎注册b>span>tr>
            <br>
            <tr><span style="font-size: 25px;color: grey">已有账号?<a>登录a>span>tr>


            <tr>
                <td>用户名td>
                <td><input type="text" name="username" placeholder="请设置用户名">td>
            tr>
            <tr>
                <td>手机号td>
                <td><input type="text" name="tel" placeholder="可用于登录和找回密码">td>
            tr>
            <tr>
                <td>密码td>
                <td><input type="text" name="password" placeholder="请设置登录密码">td>
            tr>
            <tr>
                <td>验证码td>
                <td><input type="text" name="code" placeholder="请输入验证码" >td>
            tr>
        table>
        <br>
        <input class="butt" type="button" value="注册">
        <br>
        <br>
        <input class="agree" type="checkbox" style="zoom: 180%">
        <span style="font-size: 25px;text-align: center">阅读并接受<a>《百度用户协议》a><a>《百度隐私权保护声明》a>span>
    div>
div>
body>
html>

二、css

body {
     
    background: url("../img/baidu.bg.jpg") no-repeat;
}

.left {
     
    height: 1163px;
    width: 1252px;
    float: left;
}

.right {
     
    height: 1163px;
    width: 1252px;
    float: left;
}

.logo {
     
    width: 250px;
    height: 80px;
    margin-top: 100px;
    margin-left: 150px;

}

.ad {
     
    padding-top: 550px;
    padding-left: 500px;
}

.login {
     
    background: white;
    opacity: 0.85;
    border-radius: 15px;
    width: 700px;
    height: 900px;
    padding: 80px;
    margin: 90px 200px;
}

tr > td {
     
    color: #bdbdbd;
    font-size: 30px;
    padding: 40px 0px;
}

td > input {
     
    width: 560px;
    height: 65px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    font-size: 25px;
    margin-left: 30px;
}

a:hover {
     
    border-bottom: 1px solid blue;
}

a {
     
    color: blue;
}

.butt {
     
    width: 700px;
    height: 80px;
    border-radius: 30px;
    background: #bfcfed;
    color: white;
    font-size: 30px;
    border: 0px;
}

.agree {
     
    font-size: 25px;
}


三、结果展示
html+css 模仿制作百度注册页面_第1张图片

你可能感兴趣的:(html,css)