登陆网页模板 - 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 响应式网 ...
随机推荐
- ORACLE PACKAGE中查看包的依赖关系
SELECT dd.* FROM dba_dependencies dd WHERE NAME <> referenced_name AND referenced_type <> ...
- Async：简洁优雅的异步之道
前言 在异步处理方案中,目前最为简洁优雅的便是 async函数(以下简称A函数).经过必要的分块包装后,A函数能使多个相关的异步操作如同同步操作一样聚合起来,使其相互间的关系更为清晰.过程更为简洁.调 ...
- ActiveMQ 事务和XA
1. 客户端怎样显式地使用事务? producer 开启事务(代码片段): ActiveMQSession session = (ActiveMQSession)connection.createSe ...
- forget sus,syn sym semi word out~s
1★ sus 在~下面 2★ syn 3★ sym 共同 4★ semi 半
- parfor slice
http://www.mathworks.cn/cn/help/distcomp/advanced-topics.htmlPARFOR loops work by dividing the itera ...
- 51nod1339飞行任务
首先按照收获从大到小排序. 然后01背包取或者不取即可. 至于为什么这样对的其实我也不知道.... 代码: #include<bits/stdc++.h> using namespace ...
- nginx:支持https
1.查看nginx模块 nginx -V 注意是大写的V,小写的v是查看版本号的命令. 如果看到with-ssl那就是有的 2.注册ssl证书并下载 免费的ssl证书有: Let's Encrypt ...
- day21 MRO和C3算法
核能来袭 --MRO和C3算法 1. python的多继承 2.python经典类的MRO 3.python新式类的MRO, C3算法 4.super 是什么鬼? 一.python的多继承 在前面的学 ...
- eclipse package视图和navigator视图的区别
package视图是适合开发的视图,因为开发时我们只关注源文件,并不关注编译后的二进制文,所有在该视图中存放二进制文件的classes文件被隐藏了,而navigator视图,就是项目在工作空间中存放的 ...
- javascript进阶笔记(2)
js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...