登陆网页模板 - 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 响应式网 ...
随机推荐
- Leetcode 1021. 最佳观光组合
1021. 最佳观光组合 显示英文描述 我的提交返回竞赛 用户通过次数91 用户尝试次数246 通过次数92 提交次数619 题目难度Medium 给定正整数数组 A,A[i] 表示第 i 个观 ...
- Spring注解之@Transactional对于事务异常的处理
spring对于事务异常的处理 unchecked 运行期Exception spring默认会进行事务回滚 比如:RuntimeException checked 用 ...
- ActiveMQ的spring配置文件
从官网copy出来,做了部分修改: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=& ...
- rdesktop安装教程
1.介绍 rdesktop是Linux下连接windows远程桌面的工具 2.下载 https://github.com/rdesktop/rdesktop/releases 3.安装 mkdir / ...
- view的clickable属性和点击background颜色改变
drawable可以是color(color只能是color) android:background=drawable或者color 当一个view(iamge/text view都可以)的andro ...
- python http 请求 响应 post表单提交
1. 查看请求 响应情况 print(response.text) print(response.headers) print(response.request.body) print(respons ...
- oracle 如何查看当前用户的表空间名称
如何查询当前用户的表空间名称?因为oracle建立索引,需要知道当前用户的表空间,查找了一下资料 --查询语法-- select default_tablespace from dba_users w ...
- POJ 2243 Knight Moves(BFS)
POJ 2243 Knight Moves A friend of you is doing research on the Traveling Knight Problem (TKP) where ...
- TNS
Oracle中TNS的完整定义:transparence Network Substrate透明网络底层,监听服务是它重要的一部分,不是全部,不要把TNS当作只是监听器 ORACLE当中,如果想访问某 ...
- 【原创】<笔试题> 深圳市天软科技开发有限公司
时间:2018.03.03 上午 1.编写函数,实现字符串比较功能. 参考:http://blog.csdn.net/liubinzi123/article/details/8271683 /* * ...