第一次使用HTML编写的留学网站页面_html 留学生交流网站-CSDN博客

本文链接：https://blog.csdn.net/qq_38178608/article/details/77623538

这是一个使用HTML编写的留学网站页面示例，包含了菜单、学校介绍、留学费用和申请条件等内容。页面设计注重视觉效果，使用了背景图片、渐变色和样式设置。用户可以浏览学校基本信息，但部分详细内容需要登录后查看。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>

<style>

body{background-image:url(./../img/222.jpg);
background-size:cover; }

.ui-menu {
border: 0px;
background: #37578C;
background: -webkit-linear-gradient(#37578C, #002B46, #608BAE);
background: -moz-linear-gradient(#37578C, #002B46, #608BAE);
background: -ms-linear-gradient(#37578C, #002B46, #608BAE);
background: -o-linear-gradient(#37578C, #002B46, #608BAE);
background: linear-gradient(#37578C, #002B46, #608BAE);
border-radius: 5px 5px 5px 5px;
padding: 5px 20px 0px 20px;
line-height: 20px;
box-shadow: 2px 2px 5px #FFFFFF;
}
.ui-menu-li {
border-radius: 5px 5px 0px 0px;
padding: 5px 10px 5px 10px;
list-style: none;
display: inline;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
color: #FFFFFF;
text-shadow:5px 2px 5px #FFFFFF;
cursor: pointer;
}
.ui-menu-li:hover {
background: #89B5D2;
background: -webkit-linear-gradient(#37578C, #608BAE);
background: -moz-linear-gradient(#37578C, #608BAE);
background: -ms-linear-gradient(#37578C, #608BAE);
background: -o-linear-gradient(#37578C, #608BAE);
background: linear-gradient(#F2B1D9, #608BAE);
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 5px #FFFFFF;
}

h2.pos_abs
{
position:absolute;
left:40px;
top:1670px;
font-size:250%;
}

h2.pos_abs2
{
position:absolute;
left:40px;
top:1920px;
font-size:250%;
}

h2.pos_abs3
{
position:absolute;
left:255px;
top:1600px;
font-size:250%;
}

h2.pos_abs4
{
position:absolute;
left:255px;
top:1850px;
font-size:250%;
}

h2.pos_abs5
{
position:absolute;
left:740px;
top:1680px;
}

h2.pos_abs6
{
position:absolute;
top:2100px;
}

div.img
{
margin:3px;
border:1px solid #bebebe;
height:auto;
width:auto;
float:right;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #bebebe;
}
div.img a:hover img
{
border:1px solid #333333;
}
div.desc
{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
color:#D2691E
}

</style>
</head>

<body>

<menu class="ui-menu">
<li class="ui-menu-li">专业设置</li>
<li class="ui-menu-li">申请条件</li>
<li class="ui-menu-li">留学费用</li>
<li class="ui-menu-li">地理位置</li>
<li class="ui-menu-li"><a href="ZHMM.html">学校排名</a></li>
<li class="ui-menu-li">学校地图</li>
<li class="ui-menu-li">学校官网</li>
</menu>

   
<strong><font color="#FF0000">登陆后您将看到更多内容</font>
<font color="#DCDCDC">
   
输入用户姓名和密码
   
请输入你的姓名：
<input type="text" name="yourname" value = "">
   
请输入你的密码：
<input type="password" name="you