登陆网页模板 - 1 （HTML+CSS）
一个用HTML和CSS写的简单登录页面，主要是用CSS来进行修饰美化的
这个登陆界面有输入账号和密码的表单，还有登陆和注册两个按键，点击按键分别会输出“您已成功登陆，稍后会跳转到您需要的页面~”，“您已成功注册，稍后会跳转到您需要的页面~”
PS：个人搭配略差，如果读者有什么好的搭配方案或者建议请不吝赐教，在此先谢过了~
<!DOCTYP html>
<html>
<head>
<meta charset="utf-8"> <title>我的一个道姑朋友</title> <style type="text/css"> body {
background-image:url(1.jpg) ;
background-size: 100%;
} input {
color:black;
border:none;
border-bottom:1px solid;
width:230px;
height:30px;
background-color:pink;
position:absolute;
opacity:0.5;
filter:Alpha(opacity=50);
} h4 {
position:absolute; left:20%;
} #aa {
width:400px;
height:405px;
background-repeat:no-repeat;
background-image:url(2.jpg) ;
position:absolute;
top:10%;
left:35%; } #bb {
width:100%;
height:40%;
background-color:pink;
position:relative;
top:70%;
opacity:0.5;
filter:Alpha(opacity=50);
} #cc {
position:absolute;
background-image:url(3.jpg) ;
top:10%;
left:10%;
width:100px;
height:100px;
background-size: 100%;
} #dd {
position:absolute;
top:90%;
left:41%;
} #yu {
color:DarkOrchid;
position:absolute;
top:20%;
left:30%;
font-size:40px;
} #jing {
color:Tomato;
position:absolute;
top:50%;
left:60%;
font-size:20px;
} #denglu {
position:absolute;
background-image:url(4.jpg) ;
background-size: 100%;
top:65%;
left:30%;
width:60px;
height:50px;
} #zhuce {
position:absolute;
background-image:url(4.jpg) ;
background-size: 100%;
float:left;
top:65%;
left:60%;
width:60px;
height:50px;
}
p.namea {
position:absolute;
top:10%;
left:20%; }
p.nameb {
position:absolute;
top:30%;
left:20%; } #mima {
position:absolute;
top:-5px;
left:100%;
} #zhanghao {
position:absolute;
top:-5px;
left:100%;
} a:hover {
color :red;
border-bottom:1px solid;
}
</style> </head> <body>
<script type="text/javascript">
function aaaa()
{
alert("您已成功登陆，稍后会跳转到您需要的页面~");
}
function bbbb()
{
alert("您已成功注册，稍后会跳转到您需要的页面~");
}
</script>
<div id="aa"> <h5 id="yu">檐上四月雨</h5>
<p id="jing">---人间惊鸿客</p>
<div id="bb">
<form> <p class="namea">账号:<input type="text" id="zhanghao" placeholder="请输入账号"/></p>
<p class="nameb">密码:<input type="text" id="mima" placeholder="请输入密码"/></p> </form>
<div id="denglu" onclick="aaaa()"><h4>登陆</h4></div>
<div id="zhuce" onclick="bbbb()"><h4>注册</h4></div>
</div> <div id="cc"></div> </div> <h2 id="dd">2017.06.22  <a href="#" class="sd">LJMZ</h2>
</body>
</html>
效果图：
点击登陆：
点击注册：
登陆网页模板 - 1 （HTML+CSS）的更多相关文章
- 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板
30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载
- 假日旅游CSS网页模板
假日旅游CSS3网页模板,蓝色,旅游,假日,公司,设计,主页,HTML,DIV+CSS,模板下载. http://www.huiyi8.com/lvyoumuban/css/
- Html+css 一个简单的网页模板
一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...
- （转）dedecms网页模板编写
网页模板就是templets中的htm文件,所以编写模板就是要编写html.这篇文章不是关于标签的具体使用,而是对网页模板的一些理解.包括基本的标签语法,封面模板,列表模板和文档模板的关系. 一 关于 ...
- Django加载静态网页模板
Django加载静态网页模板 步骤: 第一步:在子系统blog根目录下新建模版目录templates,里面新建一个login.html <!DOCTYPE html> <html l ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- HTML5--应用网页模板
因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100+,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家 ...
- Python3 登陆网页并保持cookie
网页登陆 网页登陆的原理都是,保持一个sessionid在cookie然后,根据sessionid在服务端找到cookie进行用户识别 python实现 由于python的简单以及丰富的类库是开发网络 ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
随机推荐
- Ubuntu中php.ini修改运行内存
首先,我们要知道我们要修改的是什么文件?那就是php.ini文件,一般php有关运行的文件都跟这个文件有关系,路径是 /etc/php5/apache2 .在这里我们就可以用命令进入, cd /etc ...
- Leetcode 145
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- python使用MySQLdb模块连接MySQL
1.安装驱动 目前有两个MySQL的驱动,我们可以选择其中一个进行安装: MySQL-python:是封装了MySQL C驱动的Python驱动:mysql-connector-python:是MyS ...
- [CodeForces - 614E] E - Necklace
E - Necklace Ivan wants to make a necklace as a present to his beloved girl. A necklace is a cyclic ...
- iOS的Cookie存取
当前一些公司为了快速出一款app,很多时候采用UINavigationController+WebView或者NavigationController+UITabbarVC+WebView的方式,这样 ...
- [LeetCode] 295. Find Median from Data Stream ☆☆☆☆☆(数据流中获取中位数)
295. Find Median from Data Stream&数据流中的中位数 295. Find Median from Data Stream https://leetcode.co ...
- js如何返回两个数的商的整数和余数部分？
js中,如何返回两个数的商的整数和余数部分? 如: num1:100 ,num2:12 var num = parseFloat(100/12); //值: 8.333333333333334 那么如 ...
- 派生类时使用private的目的 《私有派生》
第一:继承方式是public的情况下: 当成员是public的时候,派生类对象可以直接调用基类的这个方法和数据, 当数据是private的时候,派生类的对象不能直接调用之,可以通过调用基类的方法来访问 ...
- WPF 之 TreeView节点重命名
下面的TreeView节点是通过数据双向绑定的方式,绑定到TextBlock控件和TextBox控件的Text属性上,并且让两者绑定相同的属性,同时使TextBox控件刚好完全覆盖TextBlock控 ...
- linux-xshell同时向多台服务器一起发命令
概述:有时候我们要往多台linux服务器上面步东西,一台一台布能烦死我们.如果能同时向多台服务器发命令岂不美哉. 开工: 首先打开exshell,查看->撰写栏 打开 然后瓷砖排序,看起来方便 ...