心理健康服务网页首页前端设计

学习目标

1.熟悉标题、超链接、字符、编辑框、按钮等标签的使用

2.练习通过JavaScript给按钮设置监听事件-onclick

• 鼠标点击登录、注册文字，分别跳转到不同的界面，显示相应的表单

注册界面 

登录界面 

实现过程

• 左右浮动并显示在同一行

<div id="top">
        <div id="top-l">
            <img src="b.PNG" style="height:80px;width:200px;padding-top:10px;">
            <span style="font-size:30px;color:white;padding-top:10px;">心理学部</span>&nbsp;<span style="color:white;font-size:22px;">心理健康服务中心</span>

        </div>
        <div id="top-r">
            <a id="u1" href="#" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">首页</a>
            <a href="#" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">预约</a>
            <a href="#" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">课程培训</a>
            <a href="#" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">邮箱</a>
            <a href="#" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">注册/登录</a>
        </div>
<!--清除左右浮动，使得两边显示在同一行-->
        <div style="clear:both"></div>
</div>

#top{
        height:100px;
//设置背景颜色
        background-color:rgb(34, 34, 104);
    }
    #top-l{
//左对齐
        float:left;
        padding-left:50px;
        background-color: rgb(34, 34, 104);
    }
    #top-r{
//右对齐        
        float:right;
        padding-right:50px;
        background-color: rgb(34, 34, 104);
        padding-top:40px;
    }

•  JavaScript监听

给按钮添加监听事件

<a href="#" id="a2" onclick="c1();" style="color:grey;margin-bottom:25px;
font-size:20px">登录</a><span style="color:grey;font-size:20px;margin:15px
 0px;">|</span>
<a href="#" id="a3" style="color:grey;margin:15px 0px;font-size:20px" 
onclick="c();">注册</a><br>

通过JavaScript 设置函数

<script type="text/javaScript">
        var c1=function () {
        //获取id选择器对应的标签，设置标签样式
        var d9=document.getElementById("a2");
        d9.style="color:blue;margin:15px 0px;font-size:20px";
var d=document.getElementById("ee");
        d.placeholder="请输入您注册的邮箱";
        var d1=document.getElementById("p");
        d1.placeholder="请输入登录密码";
d1.type="password";
var d2=document.getElementById("t");
        d2.placeholder="请输入验证码";
        d2.style="width:100px";
var d3=document.getElementById("t1");
        d3.type="text";
var d4=document.getElementById("t2");
        d4.type="hidden";
var d5=document.getElementById("t3");
        d5.type="hidden";
        var d6=document.getElementById("t4");
        d6.value="登录";
var d7=document.getElementById("a");
        d7.hidden=!d7.hidden;

        var d8=document.getElementById("a1");
        //根据点击次数，设置是否隐藏标签
        d8.hidden=!d8.hidden;
        }
    var c=function () {
        var d=document.getElementById("ee");
        d.placeholder="请输入常用邮箱地址";
        var d1=document.getElementById("p");
        d1.placeholder="请输入用户名";
        d1.type="text";
        var d2=document.getElementById("t");
        d2.placeholder="请输入常用的手机号";
        d2.style="width:280px";
        var d3=document.getElementById("t1");
        d3.type="hidden";
        var d4=document.getElementById("t2");
        d4.type="password";
        var d5=document.getElementById("t3");
        d5.type="password";
        var d6=document.getElementById("t4");
        d6.value="注册";
        var d7=document.getElementById("a");
        d7.hidden="true";
        var d8=document.getElementById("a1");
        d8.hidden="true";
        var d9=document.getElementById("a3");
        d9.style="color:blue;margin:15px 0px;font-size:20px";
    }
        </script>

• 常用标签

<input type="text" id="ee" name="email" placeholder="请输入您注册的邮箱"><br>
<input id="p" type="password" name="p" placeholder="请输入登录密码"><br>
<input id="t" type="password" style="width:100px" name="yan" placeholder="请输入验证码">
<input type="text"  id="t1" style="width:100px">&nbsp;<a href="#" id="a">换一张</a><br>
<input type="hidden" placeholder="请输入验证码" id="t2" name="yan1"><br>
<input type="hidden" placeholder="请设置密码" id="t3" name="p1"><br>
<input type="submit" id="t4" value="登录" style="background-color:teal;color:white"><br>
<a href="#" id="a1" style="float:right;color:grey">忘记密码</a>