2024/4/3

所花时间：3小时

代码量（行）：442行

博客量（篇）：1篇

复制代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地铁线路查询系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<script>
    function changePage(pagename){
        var i,page;
        page=document.getElementsByClassName("page");
        for(i=0;i<page.length;i++){
            page[i].style.display="none";
        }
        document.getElementById(pagename).style.display="block";
    }
</script>

<div class="navbar">
    <a href="#"
       onclick="changePage('trans')">换乘查询</a>
    <a href="#"
       onclick="changePage('line')">线路查询</a>
    <a href="#"
       onclick="changePage('station')">站点查询</a>
</div>

<div id="trans" class="page" style="display: block">
    <h1>地铁换乘查询</h1>
    <form method="post" action="findresult.jsp">
        <label>
            出发地&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="出发地" name="startplace">
        </label>
        <br>
        <br>
        <label>
            目的地&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="目的地" name="endplace">
        </label>
        <br>
        <br>
        <button type="submit">查询</button>
    </form>
</div>

<div id="line" class="page">
    <h1>地铁线路查询</h1>
    <form method="post" action="findline.jsp">
        <label>
            线路名称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="线路名称" name="linename">
        </label>
        <br>
        <br>
        <button type="submit">查询</button>
    </form>
</div>

<div id="station" class="page">
    <h1>地铁站点查询</h1>
    <form method="post" action="findstation.jsp">
        <label>
            站点名称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="站点名称" name="placename">
        </label>
        <br>
        <br>
        <button type="submit">查询</button>
    </form>
</div>

</body>
</html>
复制代码
复制代码
.navbar{
    background-color: #000dff;
    overflow: hidden;
}

.navbar a{
    float: left;
    display: block;
    color: #fff200;
    text-align: center;
    padding: 30px 50px;
    text-display: none;
}

.navbar a:hover{
    background-color: aliceblue;
    color: black;
}

.page{
    text-align: center;
    display: none;
    width: 100%;
    height: 710px;
    background-image: linear-gradient(to bottom right, rgb(250, 243, 108), rgb(10, 122, 250));

}

.page.active{
    display:block;
}

.page input{
    border-radius: 4px; /* 添加圆角边框 */
    background-color: #f6e3e3; /* 自定义背景色 */
    color: #000000; /* 自定义文字颜色 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
    width: 190px;
    padding: 7px;
}

.page button {
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    width: 200px;
    margin-top: 40px;
    background-image: linear-gradient(to right, rgba(238, 10, 10, 0.61), #fab400);
    color: #fff;
}
复制代码
posted @ 2024-04-08 20:30  The-rich  阅读(17)  评论(0)    收藏  举报