百度登录界面CSS+HTML

最新推荐文章于 2022-08-15 19:49:49 发布

_努力努力再努力_

最新推荐文章于 2022-08-15 19:49:49 发布

阅读量3.3k

点赞数 1

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_45962741/article/details/116755026

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

界面如下：
在这里插入图片描述
源代码：

<!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>体验CSS美容师</title>
    <link rel="stylesheet" href="css/baidu.css">
    <style>

    </style>
</head>

<body>
    <!-- 头部 begin-->
    <div id="head">
        <div id="head_logo">
            <a href="http://www.biadu.com">
                <img src="/images/baidu.gif" />
            </a>
        </div>
        <div id=head_login>
            <span>我已注册，现在就</span>
            <input type="button" value="登录" />

        </div>
    </div>
    <!-- 头部 end -->

    <!-- 导航 begin -->
    <div id="nav">
        <img src="/images/reg_hr.png" />
    </div>
    <!-- 导航 end -->

    <!-- 注册 begin-->
    <div id="register">
        <!-- 注册表单 -->
        <div id="reg_form">
            <form>

                <p><label> 用户名 <input type="text" placeholder="亲设置用户名"></label></p>
                <p><label>手机号 <input type="text" placeholder="请输入手机号"></label></p>
                <p><label for="">密码 <input type="password" placeholder="请输入密码"></label></p>
                <p><label>请输入验证码 <input type="text" placeholder="请输入验证码" style="width: 190px;"></label>
                    <button id="reg_form_msg">获取验证码</button>
                </p>

                <div id="reg_form_isCheck">
                    <input type="checkbox">
                    <span>阅读并接受<a href="#">边度用户协议</a>以及<a href="#">百度隐私权保护</a></span>
                </div>
                <div id="reg_form_btn">
                    <button>注册</button>
                </div>
            </form>
        </div>
        <div id="reg_qrcode">
            <img src="/images/qrcode.png" alt="">

        </div>
    </div>
    <!-- 注册 end -->

    <!-- 版权信息 begin -->
    <div id="copyright">
        <p></p>
    </div>
    <!-- 版权信息 end -->
</body>

</html>

#head #head_login {
    float: right;
    font-size: 10px;
    margin-top: 10px;
}
#head #head_logo {
    width: 330px;/* 宽度330px */
 /* 设置背景图片不重复并靠右 */
 background: url(../img/logo.png) right no-repeat;
 /* 设置背景的位置 y轴上移5px */
 background-position-y: -5px;
 cursor: pointer;/* 鼠标变手势 */
 float: left;/* 左浮动 */
 /* 内下间距5px 为了和导航之间保持距离 */
 padding-bottom: 5px;
}
#head #head_login input {
    width: 64px;
    height: 32px;
    background: url("../images/reg_icons.png") no-repeat 0 -48px;
    font-weight: bold;
    color: rgb(61, 61, 61);
    /*  */
}
#head #head_login {
    float: right;
    font-size: 10px;
    /* 上外边距 */
    margin-top: 20px;
}
/* 导航开始 */
#nav {
    width: 1200px;
    margin: 0 auto;

}
/* 导航end */


/* 注册begin */
#register {
    /* 宽度950px  */
    width: 950px;
    /* 上外边距是20px 左右外边距自动居中 下外边距是0px */
    margin: 20px auto 0px auto;
}
#register #reg_form {
    /* 图片靠左 */
    float: left;
    /* 文本靠右 */
    text-align: right;
    font-size: 14px;
    color: blue;
    font-weight: bold;
    
}
#register #reg_form label {
    /* 给一个右外边距 */
    margin-right: 10px;
}
#register #reg_form p input {
    height: 38px;
    width: 350px;
    /* 边框1px，实心线颜色 skyblue */
    border: 1px solid skyblue;
    font-size: 14px;
    color: blue;
    /* 首行缩进 */
    text-indent: 2em;
    /* 底外间距6px */
    margin-bottom: 6px;
}
/* 注册end */
#register #reg_form #reg_form_msg {
    height: 42px;
    width: 140px;
    /* 背景颜色 */
    background: #f7f7;
    /* 字体大小 */
    font-size: 14px;
    /* 鼠标移动变手 */
    cursor: pointer;
}
/* 鼠标移动改变样式 */
#register #reg_form #reg_form_msg:hover {
    background: slateblue;
}
#register #reg_form_isCheck {
    font-size: 10px;
    margin-right: 30px;
}
/* 去除所有横线 */
#register #reg_form_isCheck a {
    text-decoration: none;
}
#register #reg_form_btn button {
    height: 50px;
    width: 352px;
    background: skyblue;
    /* 无边框 */
    border: 0;
    /* 字体颜色 */
    color: white;
    /* 字体粗细 */
    font-weight: 600px;
    /* 圆角类型 */
    border-radius: 3px;
    /* 鼠标变手势 */
    cursor: pointer;
}
#register #reg_qrcode {
    float: right;
    margin-right: -10px;
}
#copyright {
    text-align: center;
    color: skyblue;
    font-size: 12px;
    /* 设置位置 */
    margin-top: 520px;
}

_努力努力再努力_

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度登录界面CSS+HTML

界面如下：源代码：<!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"> &lt
复制链接

扫一扫