<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<style>
* {
margin: 0 auto
padding: 0
}
body {
background-color: #8acff0
}
.zongjian {
width: 300px
margin: 0 auto
margin-top: 10%
}
.zongjian p {
width: 100%
float: left
line-height: 30px
}
.zongjian p span {
line-height: 30px
margin-right: 10px
}
.zongjian p input {
line-height: 20px
}
.zongjian p font {
color: red
font-size: 18px
line-height: 30px
margin-left: 5px
}
.zuce {
background-color: #7df9dd
float: right
font-size: 14px
padding: 2px 5px
box-shadow: 1px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922), 0px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922)
}
.tishi {
width: 100%
float: left
color: red
height: 16px
}
</style>
<body>
<div class="zongjian">
<p><span>会员账号:</span>
<input id="name" onblur="onname()">
<font>*</font></p>
<div class="tishi" id="namets"></div>
<p><span>邮箱地址:</span>
<input id="email" onblur="onemail()">
<font>*</font></p>
<div class="tishi" id="emailts"></div>
<p><span>登录密码:</span>
<input id="password" onblur="onpassword()">
<font>*</font></p>
<div class="tishi" id="passwordts"></div>
<p><span>确认密码:</span>
<input id="qrpassword" onblur="onqrpassword()" type="password">
<font>*</font></p>
<div class="tishi" id="qrpasswordts"></div>
<div class="zuce" onClick="tijiao()">注册</div>
</div>
<script>
function onname()
{
var name = document.getElementById('name').value
if(name=="")
{
document.getElementById('namets').innerText = "会员账号不能为空"
return false
}
else if(name.length < 9)
{
document.getElementById('namets').innerText = "账号不能少于9位！"
return false
}
else
{
document.getElementById('namets').innerText = ""
return true
}
}
function onemail()
{
var email = document.getElementById('email').value
if(email=="")
{
document.getElementById('emailts').innerText = "邮箱不能为空"
return false
}
else if(email.indexOf('@')<0)
{
document.getElementById('emailts').innerText = "邮箱必须存在@"
return false
}
else
{
document.getElementById('emailts').innerText = ""
return true
}
}
function onpassword()
{
var password = document.getElementById('password').value
if(password=="")
{
document.getElementById('passwordts').innerText = "密码不能为空"
return false
}
else if(password.length < 6)
{
document.getElementById('passwordts').innerText = "密码必须大于6位"
return false
}
else
{
document.getElementById('passwordts').innerText = ""
return true
}
}
function onqrpassword()
{
var password = document.getElementById('password').value
var qrpassword = document.getElementById('qrpassword').value
if(qrpassword=="")
{
document.getElementById('qrpasswordts').innerText = "确认密码不能为空"
return false
}
else if(password!=qrpassword)
{
document.getElementById('qrpasswordts').innerText = "两次输入不一致"
return false
}
else
{
document.getElementById('qrpasswordts').innerText = ""
return true
}
}
function tijiao()
{
if(onname()&&onemail()&&onpassword()&&onqrpassword())
{
alert("提交成功")
}
else
{
alert("提交失败！")
}
}
</script>
</body>
</html>
规范的做法是，你把所有图片放在一个叫image的文件夹里，把image文件夹与html page放在同一目录/文件夹下传给别人，这时图片的相对路径就可以写成<img src="/image/filename.jpg" />绝对路径 <img src="C//xxx/xxx/images/filename.jpg" /> <img src="http://www.xxx.com/image/filename.jpg" />
懂？
自己用代码实现现状网络上流行的网站页面效果不过学习HTML和css 最终要的是属性相关属性的功能，并知道组合后会有什么效果
能有你很明显的印象 ，刚开始，不建议，你去实现什么最炫的效果，最炫的界面，先从简单的界面上的dom元素开始，然后一个个的添加相关属性，看它有什么变化，然后添加上你自己的理解，备注 然后新添加个dom元素，然后继续添加，专心做一天，然后，从网上找一些相关的文档，和自己的想法，一一印证，这样印象深刻，而且，知道其他的，然后做一个页面，这样，这个页面以后，作为你的学习笔记，不断的补充，最后，在你开发过程中，如果有什么遗忘的，打开页面，你能很快的找到，并利于复习，和提高，而且也可以作为你以后的作品，只不过需要美化下
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）