登陆网页模板 - 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 响应式网 ...
随机推荐
- thinkphp3.1.3导入
1.首先我们做导入一定要在我们的项目中导入一个 PHPExcel 下载地址:http://phpexcel.codeplex.com/ 2.下载之后就解压我们就可以看到像这样子的文件 3.就 ...
- java调用url
1 try { String str; URL u = new URL("https://www.baidu.com"); InputStream is = u.openStrea ...
- Git：创建与合并分支
1.1创建dev分支,使用命令符 git branch 分支名称. 1.2将HEAD指针切换到dev分支,使用命名符git checkout 分支名称. 注:创建并且转移可以合并为一个步骤,使用命令符 ...
- Eclipse导入Oracle/MySQL数库驱动包教程
在操作数据库时除了import相关的SQL类外,还得在项目中导入数据库的驱动才能连接和操作数据库. 而数据库驱动jar包在默认Java的lib里是没有的,要自己到官网下载导入:本教程以Oracle为例 ...
- 消费Restful的web服务(三)
构架工程 创建一个springboot工程,去消费RESTFUL的服务.这个服务是 http:///gturnquist-quoters.cfapps.io/api/random ,它会随机返回Jso ...
- sublime text 3 笔记 简单配置
一.首先我们去sublime text 3 去下载(http://www.sublimetext.com/) 下载完成后,打开页面 二.汉化 1.如图所示,点击菜单栏中“preferences”,弹出 ...
- 各种形式的熵函数，KL距离
自信息量I(x)=-log(p(x)),其他依次类推. 离散变量x的熵H(x)=E(I(x))=-$\sum\limits_{x}{p(x)lnp(x)}$ 连续变量x的微分熵H(x)=E(I(x)) ...
- 数据泵导入 ORA-31626
Oracle,10G,数据泵导入时,报错如下: 解决方案:对当前用户做如下授权 . 具体操作:grant connect,resource to user;
- day044 cssy其他样式 js初识
float: 浮动 .t1{ float: right/left; } 关于浮动的两个特点: 1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止. 2.由于浮动框不在文档 ...
- C++关于运算符的注意事项
1.函数调用也是一种特殊的运算符,对运算对象的个数不作限制. 2.几元运算符,是基于作用的对象的数量. 3.不同类型的运算对象进行运算,可能会出现类型转换,一般情况下小整数类型会被转换成较大的整数类型 ...