前端小白Day6-仿照百度制作登录界面

由于昨天事情有点多迟了一天，昨天的任务是：仿照电脑端百度登录框制作一个登录界面。
HTML部分代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>登录</title><link rel="stylesheet" type="text/css" href="06.css">
</head>
<body><div class="login"><div class="title"><div class="title_img"><img src="baidulogo.jpg"></div><div class="title_content">登录百度账号</div>                      </div><div class="content"><div class="sms_login"><a href="">短信快捷登录</a></div><form method="get"><input type="text" name="UserName" placeholder="用户名或邮箱" class="usrname"><input type="password" name="UserPassword" placeholder="密码" class="pass"><div class="remember"><input type="checkbox" name="Check"><span>下次自动登录</span></div><div class="problem_login"><a href="">登录遇到问题</a></div><input type="submit" name="SubmitButton" value="登录" class="submitBtn"></form><div class="register"><a href="">立即注册</a></div></div>  <hr /><div class="other_login"><div class="other_title">可以使用以下方式登录</div><div class="other_icon"><img src="qq.jpg" alt="QQ图标"><img src="weibo.jpg" alt="微博图标"></div>                  </div></div>
</body>
</html>

CSS部分代码如下：

.login{border-style: solid;border-width: 1px;border-color: black;width: 400px;/*使用绝对布局position: absolute;margin-top:100px;margin-left: 200px;*/margin:0 auto;
}
.title{font-weight: bold;font-size: 20px;font-family: courier,serif;background-color: #E8E8E8;padding: 8px;height: 35px;
}
.title img{width: 30px;height: 30px;
}
.title_content, .title_img{float:left;}
.title_content{margin:3px auto 3px 3px;
}
.content, .other_login{margin:20px;
}
.sms_login{text-align: right;font-size: 14px;
}
.usrname, .pass, .submitBtn{width: 100%;font-size: 16px;padding: 8px 0px 8px 0px;
}
.sms_login, .usrname, .pass, .remember, .submitBtn{margin-bottom: 5px;
}
.usrname, .pass, .remember, .submitBtn, .register{margin-top: 6px;
}
.remember{font-size: 12px;
}
.problem_login{text-align: right;font-size: 12px;
}
.submitBtn{color: white;border-radius: 5px;background-color: #2066C5;
}
.register{text-align: right;font-size: 12px;
}
a:link, a:visited{text-decoration: none;
}
a:hover{text-decoration: underline;
}
hr{/*color: #E8E8E8;*/color: #D8D8D8;
}
.other_icon img{width: 25px;height: 25px;margin:5px;
}
.other_title{color: #606060;font-size: 12px;margin-bottom: 5px;
}

效果如下：

前端小白Day6-仿照百度制作登录界面相关推荐

Django(part38)--制作登录界面
学习笔记,仅供参考,有错必究文章目录制作登录界面第一步第二步第三步第四步制作登录界面我们基于博客Django(part36)–cookies的mywebsite_bookstore项目 ...
Excel 2010 VBA 入门 135 利用窗体制作登录界面
题使用窗体制作登录界面,实现当打开Excel时,隐藏工作簿,当登录完成后显示工作簿. 码登录机制是将用户输入的用户名和密码与正确的用户名和密码进行比较,若相等,则表示登录成功,反之登录失败.本例的 ...
用Python制作登录界面
用Python制作登录界面 PyQt5是一种高级的语言,下面只有几行代码就能显示一个小窗口.底层已经实现了窗口的基本功能. 登录界面: import sys from PyQt5 import QtC ...
使用dw制作登录界面
使用dw制作登录界面代码如下: div class="cont" div class="ys" div class="zh" input t ...
逆向分析_VB6.0制作登录界面
VB6.0制作登录界面环境: win7虚拟机安装visual basic 6.0 新建工程,添加两个窗体窗体1 -> 登录界面窗体名称 -> fromLogin 窗体Caption ...
mfc制作登录界面mysql_MFC制作漂亮界面之登录界面
[实例简介] MFC制作漂亮界面之登录界面的源码,主要使用前面学过的内容来实践一个完整的界面. [实例截图] [核心代码] LoginTigger └── LoginTigger ├── LoginT ...
使用Visual Studio怎样制作登录界面
当我们看到别人美丽的登录软件界面是不是很好奇,很想自己制作个,但是苦于自己不是专业编程人士.不过没有关系,这篇文章同样适合没有任何编程经历的人,本文章每关键步骤采用图片的形式展现个大家,让读着清晰明了 ...
QT-QML制作登录界面
115849 Qt Meta Language 或者说Qt Modeling Language(QML) 是Qt用来设计用户界面的js脚本的标记语言.在Qt中的基于QML技术的Qt Quick组件中 ...
android 表格xml,【Android】利用表格布局，Android中xml文件与java的交互制作登录界面...
登录界面是图形编程.网页编程的一个经典而又基础的程序. 在安卓中,如图所示一个基本登录界面: 点击取消按钮就关闭这个程序,点击登录按钮则显示用户输入的用户名与密码. 一.基本布局这个程序利用到安卓中 ...

前端小白Day6-仿照百度制作登录界面

前端小白Day6-仿照百度制作登录界面相关推荐

最新文章

热门文章