前言
本文已参与「新人创作礼」活动，一起开启掘金创作之路。大家好，最近要做学校的一个项目，因为本身也不太熟悉计算机这些东西，所以我就做了一个很简单的前台页面，这个·页面主要是模仿若依的页面，没有用到javascript,只用了一些简单的html和css,希望对大家能有帮助，具体效果图如下：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.nav{
position:absolute;
top:0px;
left:0px;
right:0px;
background-color:rgb(60,141,188);
height:60px;
width:100%;
display:center;
text-align:left;
line-height:60px;
}
.left-nav{
position:absolute;
top:60px;
left:0px;
background-color:rgb(15,41,80);
width:200px;
height:100%;
}
.list li{
padding-top:10px;
padding-bottom:10px;
}
.nav1{
position:absolute;
top:0px;
left:200px;
width:1465px;
height:50px;
background-color:rgb(250,250,250);
display:center;
line-height:50px;
}
.header{
position:absolute;
top:50px;
left:200px;
width:1455px;
height:200px;
border-left:10px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.hello{
position:absolute;
top:320px;
left:200px;
width:400px;
height:400px;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.h1{
position:absolute;
top:-10px;
left:0px;
}
.word{
position:absolute;
top:60px;
left:50px;
}
.ma{
position:absolute;
top:100px;
left:100px;
}
.intro{
position:absolute;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
top:320px;
left:700px;
width:400px;
height:400px
}
.service{
position:absolute;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
top:320px;
left:1200px;
width:400px;
height:400px;
}
.footer{
position:absolute;
background-color:rgb(60,141,188);
left:200px;
width:1480px;
height:50px;
bottom:0px;
text-align:center;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
line-height:50px;
}
</style>
</head>
<body>
<!--导航条-->
<div class="nav">
<span style="display:inline-block;text-align:center;width:200px;font-weight:bold;"><font color="white">科技处</font></span>
<span style="display:inline-block;width:80px;font-weight:bold;"><font color="white">系统管理</font></span>
<span style="display:inline-block;width:80px;font-weight:bold;"><font color="white">系统监控</font></span>
<span style="display:inline-block;width:80px;font-weight:bold;"><font color="white">系统工具</font></span>
<span style="display:inline-block;width:80px;font-weight:bold;"><font color="white">统计报表</font></span>
</div>
<!--左侧导航栏-->
<div class="left-nav">
<center>
<img src="admin.jpg" height="50px" style="border-radius:100%;"/>
</center>
<center>
<span style="display:inline-block;width:50px;"><font color="white">在线</font></span><span style="display:inline-block;width:50px;"><font color="red"><a href="http://demo.ruoyi.vip/login">注销</a></font></span>
</center>
<div class="nav1">
<span style="display:inline-block;width:80px;text-align:center;font-weight:bold;"><font color="black">首页</font></span>
<span style="display:inline-block;width:80px;float:right;font-weight:bold;"><font color="black"><a href="index.html">刷新</a></font></span>
</div>
<div class="header">
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><font color="orange">sit科技处官网</font></span></br>
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><a href="https://rdo.sit.edu.cn/">https://rdo.sit.edu.cn/</a></span></br>
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><font color="orange">上海应用技术大学官网</font></span></br>
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><a href="https://www.sit.edu.cn/">https://www.sit.edu.cn/</a></span></br>
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><font color="orange">sit财务处官网</font></span></br>
<span style="display:inline-block;text-align:center;width:300px;font-weight:bold;"><a href="https://cwc1.sit.edu.cn/">https://cwc1.sit.edu.cn/</a></span>
</div>
<span class="hello">
<center>
<h1 class="h1">你好</h1>
<span class="word">请作者吃辣条：</span>
<img class="ma" src="1.jpg" width="200px"/>
</center>
</span>
<span class="service">
<h1>科技服务</h1>
<ul>
<li><a href="https://rdo.sit.edu.cn/2021/0513/c4457a197705/page.htm">2016年南通科技企业需求</a></li>
<li><a href="https://rdo.sit.edu.cn/2021/0409/c4457a195455/page.htm">2016年云南省技术需求平台</a></li>
<li><a href="https://rdo.sit.edu.cn/2019/1225/c4457a182426/page.htm">2015年新疆科技企业需求</a></li>
<li><a href="https://rdo.sit.edu.cn/2019/0104/c4457a172786/page.htm">2015年云南科技企业需求</a></li>
<li><a href="https://rdo.sit.edu.cn/2018/1227/c4457a172522/page.htm">2014年科技成果汇编</a></li>
<li><a href="https://rdo.sit.edu.cn/2015/0630/c4473a114976/page.htm">2014年金华科技企业需求</a></li>
</ul>
</span>
<span class="intro">
<h1 class="h2">通知公告</h1>
<ul>
<li><a href="https://rdo.sit.edu.cn/2021/0513/c4457a197705/page.htm">2021年上海市“科技创新行动计划”项目申报</a></li>
<li><a href="https://rdo.sit.edu.cn/2021/0409/c4457a195455/page.htm">21年上海“科技创新行动计划”项目申报指南</a></li>
<li><a href="https://rdo.sit.edu.cn/2019/1225/c4457a182426/page.htm">2020-2022年Sit科技处岗位应聘须知</a></li>
<li><a href="https://rdo.sit.edu.cn/2019/0104/c4457a172786/page.htm">关于2019年国家科技奖提名项目公告</a></li>
<li><a href="https://rdo.sit.edu.cn/2018/1227/c4457a172522/page.htm">关于2019年国家科技奖提名项目公告</a></li>
<li><a href="https://rdo.sit.edu.cn/2018/1227/c4457a172522/page.htm">关于2019年国家科技进步奖提名项目公告</a></li>
</ul>
</span>
<span class="footer"><font color="white">版权信息©:上海应用技术大学 地址：上海市奉贤区海权路100号 上海市徐汇区漕宝路120号</font></span>
<ul class="list">
<li><font color="grey">用户管理</font></li>
<li><font color="grey">角色管理</font></li>
<li><font color="grey">部门管理</font></li>
<li><font color="grey">岗位管理</font></li>
<li><font color="grey">字典管理</font></li>
<li><font color="grey">参数管理</font></li>
<li><font color="grey">通告管理</font></li>
<li><font color="grey">日志管理</font></li>
</ul>
