HTML实例之小米登录页面制作

　

小米博客

本文主要讲述HTML常用实例，如需HTML和CSS基础请到菜鸟教程自己补习。

---

一、最终呈现效果

二、html代码

<p class="login">
    <a href="#" class="choose left">账号登录</a>
    <span style="color: #e0e0e0">|</span>
    <a href="#" class="choose right">扫码登录</a>
    <form>
        <input type="text" placeholder="邮箱/手机号/小米账号" id="login-text">
        <input type="password" placeholder="密码" id="login-pwd">
        <input type="submit" value="登录" id="login-sub">
    </form>
    <span class="forget">
        <a href="#">注册小米账号</a>
        <span>|</span>
        <a href="#">忘记密码?</a></span>
    <fieldset>
        <legend>其他方式登录</legend>
    </fieldset>
    <p class="icon">
        <a href="#" class="qq"></a>
        <a href="#" class="weibo"></a>
        <a href="#" class="pay"></a>
        <a href="#" class="wechat"></a>
    </p>
</p>

3、css代码

/* ----------元素位置布局---------- */
* {
    margin: 0;
    padding: 0;
}

.login {
    width: 400px;
    height: 500px;
    box-shadow: 0 0 15px 3px rgba(51, 51, 51, 0.53);
    margin: 20px auto 0 auto;
    /* border: 1px solid aqua; */
    text-align: center;
}

#login-text,
#login-pwd {
    width: 350px;
    height: 30px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

#login-sub {
    width: 364px;
    height: 30px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/* ----------样式设计---------- */
a {
    color: black;
    text-decoration: none;
}

.choose {
    display: inline-block;
    margin-top: 30px;
    font-size: 22px;
}

.left {
    color: #f56600;
    margin-right: 15px;
}

.right {
    margin-left: 15px;
}

#login-text,
#login-pwd {
    padding: 8px 5px;
    font-size: 16px;
    /* box-sizing: border-box; */
    outline: none;;
}

#login-text {
    margin-top: 35px;
}

#login-pwd {
    margin-top: 15px;
}

#login-sub {
    height: 50px;
    margin-top: 15px;
    border: none;
    outline: none;
    font-size: 20px;
    background-color: #f56600;
    color: white;
}

.forget {
    display: inline-block;
    margin-top: 15px;
    font-size: 13px;
    color: #e0e0e0;
}

.forget a {
    color: #999;
}

.forget a:hover {
    text-decoration: underline;
}

fieldset {
    display: inline-block;
    width: 364px;
    margin-top: 80px;
    color: #999;
    border: none;
    border-top: 1px solid #999
}

/* ------------icon---------- */

.icon {
    margin: 30px auto;
}

.qq,.weibo,.pay,.wechat {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin: 0 20px;
    border-radius: 50%;
    background: gray url("images/icons_type.png");
}

.qq {
    background-position-x: -19px;
}

.weibo {
    background-position-x: -38px;
}

.pay {
    background-position-x: -59px;
}

.wechat {
    background-position-x: -87px;
}

.qq:hover,
.weibo:hover,
.pay:hover,
.wechat:hover{
    background-color: black;
}

---

Web全栈技术交流

点击链接加入群聊【Web全栈交流群】：https://jq.qq.com/?_wv=1027&k=5rnUzsF

相关阅读

秒抢红包并不难 手把手教你小米红包助手使用方法

今年春节前夕小米发布了官方的小米红包助手，所有运行MIUI6以上版本的小米手机都可以安装小米红包助手，抢红包也更加方便。虽然春节

小米回应被财政部点名：相关报道与事实严重不符

A5创业网(公众号：iadmin5)10月30日消息，昨日财政部发布了《2018年会计信息质量检查公告》(下称《公告》)显示，在2017年度会计执法检

小米青春无敌新品发布会今日举行：小米8青春版和指纹版

A5创业网（公众号：iadmin5）9月19日报道，今天下午两点，小米将在成都举办小米8系列新品发布会，正式发布新机小米8青春版和小米8屏幕指纹版

小米股票代码公布：1810 背后的含义竟是这个！

A5创业网（公众号：iadmin5）6月22日报道，今天上午，小米创始人雷军、林斌等高管在小米招股书上正式签字，小米也将成为港交所首家同股不同权

小米净化器pro和小米2有什么区别？

小米净化器2介绍：小米空气净化器2变得更轻更小，相比前代高度上的降低非常明显，占地面积小于一张A4纸，睡眠模式下的噪音为30分贝。小米