登陆网页模板 - 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 响应式网 ...
随机推荐
- php curl 并发
1.比较普通的curl 请求 $ch = curl_init();//初始化curl curl_setopt($ch, CURLOPT_URL,$postUrl);//抓取指定网页 curl_seto ...
- 安卓AlertDialog 的使用
引入空间 import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; fin ...
- shiro权限管理的框架-入门
shiro权限管理的框架 1.权限管理的概念 基本上涉及到用户参与的系统都要进行权限管理,权限管理属于系统安全的范畴,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户可以访问而且只能 ...
- mysql的五种日期和时间类型【转载】
[mysql的五种日期和时间类型] mysql(5.5)所支持的日期时间类型有:DATETIME. TIMESTAMP.DATE.TIME.YEAR. 几种类型比较如下: 日期时间类型 占用空间 日期 ...
- Physical Limits of ASM
Oracle version 7, only 1,022 datafiles per database could be used. Oracle version 11g, support 65,5 ...
- Python print打印
1.Python运算符: +:加 -:减 *:乘 /:除以 %:去除法后的余数 //:取整除 2.字符串center方法: a='111'print(a.center(4,'2')) #让字符串占位 ...
- ssh和ssl的联系和区别
ssh:Secure Shell,安全Shell,是一个软件,处于应用层旨在取代明文通信的telnet:对应的开源实现程序是openssh. ssl:Secure Sockets Layer,安全套接 ...
- win7 忘记密码
你可以找个PE来修改密码,用光盘或U盘做PE都行,现在很多PE都支持密码修改的!不过下面这个方法还是要用到PE:1. 进入pe2.进入c:\windows\system32下 更改magnify.ex ...
- 【oracle常见错误】ora-00119和ora-00132问题的解决方法
oracle11g安装后,本地无法登录!前提:服务全部打开,监听也配置好了! win7 64位 oracle 11g 简单的sql命令: 先登录到sqlplus:sqlplus/nolog; 登录数据 ...
- log4net 2.0.8 不支持core 数据库记录日志
经过反编译log4net 标准库的代码,原本有的数据库链接AdoNetAppender 在core里面引用的,没有掉了. 可能新版本会有.