1.导航栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<style>
.guide,div{
width: 600px;
height: 21px;
color: black;
border: 1px solid;
border-bottom-left-radius: 5.25px;
border-bottom-right-radius: 5.25px;
border-top-left-radius: 5.25px;
border-top-right-radius: 5.25px;
}
span,div{
border-color: black;
background-color: rgb(52, 52, 70);
text-align: center;
text-shadow: 2px 2px 2px grey;
}
a:hover{background-color: rgb(102, 7, 7);color: aliceblue;}
</style>
</head>
<body>
<div class="guide">
<div>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏1</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏2</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏3</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏4</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏5</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏6</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏7</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏8</b></a></span>
<span class="introduce"><a href="https://www.baidu.com"><b>游戏9</b></a></span>
</div>
</div>
</body>
</html>运行结果：
2.三个页面：
页面一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教务系统页面</title>
<style>
.page,div{
width: 760px;
height: 400px;
border: 0px solid;
text-align: center;
}
</style>
<style>
.title,div{
width: 1520px;
height: 60px;
background-color: white;
}
</style>
<style>
.item,div{
width: 1520px;
height: 340px;
background-color: rgb(222, 222, 222);
}
</style>
<style>
.img,div{
width: 760px;
height: 340px;
}
</style>
<style>
.name,div{
width: 1520px;
height: 60px;
background-color: white;
}
</style>
</head>
<body>
<div class="page">
<div class="title"><image src="http://zswxyjw.minghuaetc.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png"></image></div>
<div class="item" style="width: 760px; height: 340px; background-color: rgb(234, 232, 232); display: inline-block; position: relative;">
<div class="img" style=" width: 760px; height: 340px; display: inline-block;">
<img src="C:\Users\90931\Desktop\989edf15e2edca0db5b041a0db5f47d.png" width="760px" height="340px">
</div>
<div style=" width: 760px; height: 340px; display: inline-block; margin-left: 0; position: absolute;">
<table border="0px" width="760px" height="340px" margin="left">
<tr>
<th><h1>用户登录</h1></th>
</tr>
<tr>
<td><p>用户名:<input type="text" id="userAccount" value=""></p></td>
</tr>
<tr>
<td><p>密码:<input type="text" id="userAccount" value=""></p></td>
</tr>
<tr>
<td>
<a href="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/xsMain.jsp">
<img src="C:\Users\90931\Desktop\06c7493d59187cec6aee20504fcf770.png" >
</a>
</td>
<td>
<a href="">
<img src="C:\Users\90931\Desktop\b0a679f38455592a3f83fda821fa285.png" >
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>页面二（运用的是图片热区）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
<style>
.title,div{
width: 1520px;
height: 60px;
background-color: white;
}
</style>
</head>
<body>
<div class="title"><image src="http://zswxyjw.minghuaetc.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png"></image></div>
<img src="./7bb9ad850c27246b18c26fc1a9541d6.png" usemap="#link-map" width="760px" height="40px">
<map name="map">
<area title="主页" shape="rect" coords="0,0,50,30" href="https://www.baidu.com" >
<area title="我的桌面" shape="rect" coords="50,0,150,30" href="https://www.baidu.com" >
<area title="学籍成绩" shape="rect" coords="150,0,250,30" href="https://www.baidu.com" >
<area title="培养管理" shape="rect" coords="200,0,350,30" href="https://www.baidu.com" >
<area title="考试报名" shape="rect" coords="250,0,450,30" href="https://www.baidu.com" >
<area title="教学评价" shape="rect" coords="300,0,550,30" href="https://www.baidu.com" >
</map>
<img src="./dcf6b6ecb5ed63b8bcf9410fef97a99.png" usemap="#link-map" width="780px" height="400px">
<map name="link-map">
<area title="个人信息" shape="rect" coords="0,30,150,260" href="https://www.baidu.com" >
<area title="选课中心" shape="rect" coords="250,30,350,260" href="https://www.baidu.com" >
<area title="学生评教" shape="rect" coords="300,30,500,150" href="https://www.baidu.com" >
<area title="已收留言" shape="rect" coords="350,30,580,150" href="https://www.baidu.com" >
<area title="培养方案" shape="rect" coords="300,150,500,260" href="https://www.baidu.com" >
<area title="已收公告" shape="rect" coords="500,150,580,260" href="https://www.baidu.com" >
<area title="课程成绩查询" shape="rect" coords="0,260,75,410" href="https://www.baidu.com" >
<area title="教学简历" shape="rect" coords="75,260,150,410" href="https://www.baidu.com" >
<area title="授课计划查询" shape="rect" coords="75,260,350,410" href="https://www.baidu.com" >
<area title="未获得学分成绩查询" shape="rect" coords="300,260,420,410" href="https://www.baidu.com" >
<area title="学籍卡片" shape="rect" coords="500,260,570,410" href="https://www.baidu.com" >
<area title="修改密码" shape="rect" coords="570,260,1000,410" href="https://www.baidu.com" >
</map>
</body>
</html>页面三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面2</title>
<style>
.title{
width: 1520px;
height: 80px;
background-color: white;
}
.flex-container{
max-width: 1520px;
height: 60px;
margin: auto;
background-color: rgb(71, 71, 247);
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.flex-items{
background-color: rgb(147, 187, 247);
margin: 5px;
}
.flex-container > div{
color: white;
margin-left: 50px;
}
.content{
width: 1520px;
height: 600px;
background-color: white;
}
.left{
width: 302px;
height: 600px;
background-color: white;
float: left;
border: 1px solid black;
}
.right{
width: 1214px;
height: 600px;
background-color: white;
float: left;
border: 1px solid black;
}
.topic{
width: 1214px;
height: 80px;
position:fixed;
top: 202px;
left: 336px;
}
.item{
width: 1214px;
height: 80px;
position:fixed;
top: 282px;
left: 336px;
text-align: center;
}
</style>
</head>
<body>
<div class="title"><image src="http://zswxyjw.minghuaetc.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png"></image></div>
<div class="flex-container">
<div class="flex-items1"><b>主页</b></div>
<div class="flex-items2"><b>我的桌面</b></div>
<div class="flex-items3"><b>学籍成绩</b></div>
<div class="flex-items4"><b>培养管理</b></div>
<div class="flex-items5"><b>考试报名</b></div>
<div class="flex-items6"><b>教学评价</b></div>
</div>
<div class="content">
<div class="left">
<div class="left1">
<dl>
<dt><b> 培养方案</b></dt>
<dd>教学进程查询</dd>
<dd>执行计划</dd>
<dd>培养方案明细</dd>
</dl>
</div>
<hr>
<div class="left2">
<dl>
<dt><b> 我的课表</b></dt>
<dd>学期理论课表</dd>
<dd>实验课表查询</dd>
</dl>
</div>
<hr>
<div class="left3">
<dl>
<dt><b> 选课管理</b></dt>
<dd>学生选课中心</dd>
<dd>学生预选管理</dd>
<dd>学生预选查询</dd>
</dl>
</div>
<hr>
</div>
<div class="right">
<div class="topic"><b>首页 》选课管理 》学生选课中心</b></div>
<div class="item">
<table border="1px" width="1150px" height="100px" >
<tr>
<td bgcolor="lightblue">学年学期</td>
<td bgcolor="lightblue">选课名称</td>
<td bgcolor="lightblue">选课时间</td>
<td bgcolor="lightblue">操作</td>
</tr>
<tr>
<td colspan="4" bgcolor="white">未查询到数据</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
