HTML+CSS实现登录转跳(无后台)
块元素/内敛元素
横着放置div元素
选择符使用技巧:
伪类
鼠标悬停修改样式
文本竖直居中
基本知识点
块元素/内敛元素
两者区别:
1.块元素默认占全屏,内联元素只占文本内容大小
2.块元素可设置宽高,内联元素宽高无效
3.块元素强制下一个元素换行,内联元素显示在同一行直到放满自动换行
4.可以相互转换
display: inline;---把块变成内敛元素
display: block;----把内敛变成块
display: inline-block;保持内联元素特性的情况下可以设置宽高
(都是CSS属性)
横着放置div元素?
float: left; //左对齐
float: right;//右对齐
.nav li a:hover{} ---伪类(鼠标悬停修改样式)
line-height: 30px;文本竖直居中行间距属性值必须等于容器的高度值
box-shadow: 5px 5px 5px black;//元素阴影
text-shadow: 5px 5px 5px black;//文本阴影
text-decoration: none;//去下划线
选择符使用技巧:
id选择符:style中使用在大模块
JS中,单一事件使用id
类选择器:style中推荐使用;可重用性
横着放置div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style>
.nav li{
list-style-type: none;
/* 除去前面的点 */
float: left;
/*如果为 float:right;则为右对齐*/
text-align: center;
line-height:10px;
/* 行间距 */
}
.nav li a{
border: 1px solid white;
width: 100px;
height: 30;
display: block;
color: cadetblue;
/* 文字颜色 */
background-color: aqua;
border-radius: 8px;
padding: 20px 20px;
box-shadow: 5px 5px 5px black;
text-decoration: none;
/* 去下划线 */
}
.nav li a:hover{
color: #000;//改变字体颜色
background-color: antiquewhite;//改变背景颜色
//伪类 改变元素在有有鼠标时候的状态
}
</style>
</head>
<body>
<div>
<ol class="nav">
<li><a href="##">首页</a></li>
<li><a href="##">活动</a></li>
<li><a href="##">充值</a></li>
<li><a href="##">会员</a></li>
<li><a href="##">视频</a></li>
</ol>
</div>
</body>
</html>
登录
代码
注意 这里的登录是
<button id="denglu"><a id="tiaozhuan" href="##">登录</a></button>
所以在点击登录时要点击“登录”这两个字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
body{
background-image: url(img04.png);
background-repeat: repeat-y;
background-size:100% 100%;
background-attachment: fixed;
}
.form{
margin: 0 auto;
margin-top: 100px;
text-align: center;
width: 300px;
height: 300px;
border: 1px solid black;
background:rgba(255,255,255, 0.3);
//背景透明
}
.form h4{
border-bottom: 1px dotted black;
}
.form p{
display: block;
height: 50;
padding: 5px;
}
.form span{
display: block;
color: #999;
display: none;
}
.form button{
width: 80%;
height: 25px;
border-radius: 50px;
background-color: darkgreen;
color: #ddd;
cursor: pointer;
/* 鼠标变成小手 */
}
.form a{
color:#ddd;
text-decoration: none;
}
</style>
</head>
<body>
<form class="form">
<h4>登录</h4>
<p>
<label for="user">账户</label>
<input type="text" id="username" placeholder="请输入账号" value="">
</p>
<p>
<label for="pwd">密码</label>
<input type="password" id="pwd" placeholder="密码" value="">
</p>
<p>
<input type="checkbox" id="chk"/>记住密码
<span id="spa">请确认是安全是PC</span>
</p>
<p>
<button id="denglu"><a id="tiaozhuan" href="##">登录</a></button>
<button id="quxiao">取消</button>
</p>
</form>
<script>
var chk=document.getElementById("chk");
var spa=document.getElementById("spa");
var btn1=document.getElementById("denglu");
var btn2=document.getElementById("quxiao");
var username=document.getElementById("username");
var pwd=document.getElementById("pwd");
var a=document.getElementById("tiaozhuan");
chk.onmouseout=function(){
spa.style.display="none";
}
chk.onmouseover=function(){
spa.style.display="block";
}
btn1.onclick=function(){
if(username.value=="" && pwd.value=="") {
alert("账号或密码不为空");
}else{
if(username.value=="admin" && pwd.value=="888"){
alert("登录成功");
a.href="demo 10.html";
//转跳的HTML页面需要与当前HTML页面在一个文件夹中 各种图片也是
}else{
alert("账号或密码错误");
}
}
}
</script>
</body>
</html>
转跳页面代码(模拟微信)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>微信</title>
<style>
#all{
margin: 0px;
padding: 0px;
}
#box{
margin: 0 auto;
margin-top: 200px;
border: 1px solid red;
width: 300px;
height: 450px;
background-image: url(loadingbg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 20px;
}
.head{
border: 1px solid black;
background-color: black;
color: #ddd;
text-align: center;
line-height: -8px;
width: 100%;
height: 30px;
border-radius: 20px 20px 0px 0px;
}
.output{
border: 1px solid black;
width: 100%;
height: 390px;
}
.output p{
display: block;
padding-top: 25px;
padding-left: 5px;
}
.output span{
background: rgba(255, 255,255, 0.5);
padding:20px 20px;
margin-top: 5p
}
.input{
border: 1px solid black;
background-color: teal;
width: 100%;
height: 30px;
display: block;
border-radius: 0px 0px 20px 20px;
}
.input input{
width: 70%;
height: 26px;
border-radius: 0px 0px 0px 20px;
}
.input button{
padding-left: 5px;
width: 80px;
height: 28px;
border-radius: 0px 0px 20px 0px;
}
.p1{
float: right;
}
</style>
</head>
<body>
<div id="box">
<div class="head">
狗子
</div>
<div class="output">
<p>
<img src="touxing1.png"/>
<span>你知道吗?我喜欢你呀</span>
</p>
<div id="jieshuo">
</div>
</div>
<div class="input">
<input type="text" id="input" value="">
<button id="send">发送</button>
</div>
</div>
</body>
<script>
var txt=document.getElementById("input");
var btn=document.getElementById("send");
var div=document.getElementById("jieshuo");
btn.onclick=function(){
// div.innerHTML +="<p class='p1'><img src='touxing2.jpg'/><span>"+txt.value+"</span></p>";
div.innerHTML +="<p class='p1'> <span>"+txt.value+"</span> <img src='touxing2.png'/>";
txt.value="";
}
</script>
</html>