做了一个简单的网页，输入网站的拼音缩写，点击回车可以直接跳转到该网站，如“U校园”，则直接输入“uxy”，点击回车就行了。
HTMl：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大爱刘浩存</title>
<link rel="stylesheet" type="text/css" href="./css/zhangxuze.css"/>
<script type="text/javascript">
//函数的定义
function login()
{
var name=form1.uname.value;
if(name=="csdn")
{
location.href="https://blog.csdn.net/qq_50932477";
}
if(name=="kpl")
{
location.href="https://live.bilibili.com/55";
}
if(name=="bdfy")
{
location.href="https://fanyi.baidu.com/#auto/zh/";
}
if(name=="uxy")
{
location.href="https://u.unipus.cn/user/student?school_id=10603";
}
if(name=="lg")
{
location.href="https://www.luogu.com.cn/";
}
if(name=="axmh")
{
location.href="https://uis.nwpu.edu.cn/cas/login?service=https://ecampus.nwpu.edu.cn/";
}
if(name=="noj")
{
location.href="http://192.168.0.248/cpbox/";
}
if(name=="lc")
{
location.href="https://leetcode-cn.com/";
}
if(name=="xyw")
{
location.href="http://222.24.215.2/srun_portal_pc.php?ac_id=14&";
}
if(name=="bd")
{
location.href="https://www.baidu.com/?tn=80035161_1_dg";
}
if(name=="mk")
{
location.href="https://www.icourse163.org/";
}
}
</script>
</head>
<body>
<form action="login.html" method="get" name="form1">
<div id="content">
<div id="wse"></div>
<div id="head-pic"></div>
<ul>
<li><input type="text" id="yonghu" name="uname" id="uname" placeholder=" websitename " /></li>
<li><input type="button" id="sign-in" value="Enter" onclick="login();"/></li>
</ul>
</div>
</form>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background:url(../img/刘.png) no-repeat;
background-size: cover;
background-position: center;
}
#wse{
width: 300px;
height: 2px;
background-color: rgba(50,50,50,0.1);
}
#head-pic{
width: 40%;
height: 27%;
background: url(../img/zxz.jpg);
border-radius: 50%;
background-size: cover;
margin: 30px 90px auto;
}
#content{
width: 300px;
height: 430px;
margin: 50px auto;
background-color: rgba(50,50,50,0.1);
}
#content input[type="text"]{
width: 50%;
color: paleturquoise;
text-align: left;
font-size: 18px;
margin-top: 25%;
font-weight: 300;
border-radius: 4px;
}
#yonghu{
width: 80%;
height: 40px;
background-color: rgba(50,50,50,0.1);
line-height: 80px;
margin: 0 auto;
}
ul{
margin: 0 auto;
list-style: none;
}
ul li{
text-align: center;
margin: 5px;
}
#sign-in{
background-color: rgba(50,50,50,0.1);
width: 50%;
height: 40px;
border: none;
cursor: pointer;
color: #fff;
font-size: 20px;
margin: 15px 5px;
border-radius: 4px;
}
#sign-in:hover{
background-color: pink;
color: #fff;
}
图片：
（外加我的头像）
成品：
