第一题
代码
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>
ul{
list-style-type: none;
margin: auto;
padding: 0;
width: 700px;
height: 27px;
border: 1px solid black;
border-radius: 13px;
background-color: #000033b1;
box-shadow: 10px 10px 10px gray;
}
li{
padding-left: 10px;
padding-right: 2px;
padding-top: 5px;
float: left;
position: relative;
left: 100px;
}
li:hover,li:active{
display: block;
background-color: red;
}
a{
font-weight: 700;
text-decoration: none;
color: aliceblue;
text-shadow:10px 10px 10px rgba(150, 146, 146, 0.913) ;
}
</style>
</head>
<body>
<table>
<ul>
<li><a href="" id="game1">游戏1</a></li>
<li><a href="" id="game2">游戏2</a></li>
<li><a href="" id="game3">游戏3</a></li>
<li><a href="" id="game4">游戏4</a></li>
<li><a href="" id="game5">游戏5</a></li>
<li><a href="" id="game6">游戏6</a></li>
<li><a href="" id="game7">游戏7</a></li>
<li><a href="" id="game8">游戏8</a></li>
<li><a href="" id="game9">游戏9</a></li>
</ul>
</table>
</body>
</html>
运行结果
第二题
页面一代码
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>
body,div,dl,dt,p,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input{
padding: 0;
margin: auto;
font-family: "微软雅黑";
}
.wapbg{
background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/tpbg.gif);
height: 446px;
}
.wap{
margin: auto;
width: 955px;
}
.top{
padding-left: 85px;
height: 150px;
}
.middle{
background-image: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif);
height: 296px;
position: relative;
width: 955px;
}
.dl{
width: 312px;
height: 230px;
position: absolute;
right: 60px;
top: 30px;
}
.dlti{
color: #333;
font-size: 24px;
position: absolute;
top: 5px;
}
.dlmi{
float: left;
width: 312px;
line-height: 45px;
font-size: 17px;
color: #333;
position: absolute;
top: 70px;
}
.dlmi input{
float: right;
height: 28px;
width: 228px;
border: 1px solid #DDDDDD;
position: absolute;
left: 77px;
}
.dlau{
background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau.gif) no-repeat;
position: absolute;
left: 240px;
top: 171px;
height: 45px;
width: 45px;
font-size: 16px;
}
.dlau a{
display: block;
width: 45px;
height: 45px;
}
.dlaul{
position: absolute;
left: 263px;
top: 171px;
height: 45px;
width: 45px;
font-size: 16px;
}
.dlaul a{
background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau1.gif) no-repeat;
display: block;
width: 45px;
height: 45px;
}
.end{
position: absolute;
font-size: 15px;
color: #999;
float: left;
width: 809px;
left: 85px;
top: 304px;
}
.end span{
float: right;
}
.end span a{
color: #999;
text-decoration: none;
}
</style>
</head>
<body>
<form action="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/">
<div class="wapbg">
<div class="wap">
<div class="top">
<img style="padding-top: 80px ; margin: auto; " src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png"
width="474px" height="61px">
</div>
<div class="middle" height="296px" width="955px">
<div class="dl">
<div class="dlti">用户登录</div>
<div class="dlmi">
<p>用户名:</p>
<input type="text" id="userAccount" value style="position:absolute; top:7px">
<p>密码:</p>
<input type="password" id="userPassword" value style="position: absolute; top: 54px; ">
<input type="hidden" name="encoded" id="encoded">
<font style="display: inline; " color="red"></font>
</div>
<div class="dlj" style="display: none;">
<input style="margin-right: 5px;" name="jzmmid" id="jzmmid" type="checkbox" value="1">
"记住用户名"
</div>
<input type="submit" id="btnSubmit" class="dlau" title="点击登录" value style="border: 0px;">
<div class="dlaul" style="margin-left: 35px">
<a href="#"></a>
</div>
</div>
<div class="end">
湖南强智科技发展有限公司 版权所有
<span>
<a href="#">隐私声明</a>
|
<a href="#">设为首页</a>
</span>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
运行结果
页面二代码
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
font-family: PingFang SC, '微软雅黑', Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
}
.top{
width: 1080px;
height: 90px;
line-height: 90px;
float: left;
font-size: 0;
}
.top img{
padding-left: 157px;
padding-top: 54px;
max-height: 90px;
border: 0 none;
max-width: 100%;
}
.back{
width: auto;
height: 20px;
line-height: 20px;
float: right;
margin-top: 74px;
padding-right: 150px;
}
.back a{
display: block;
font-size: 14px;
color: #999;
background: url(https://swxymooc.csuft.edu.cn/static/login/images/loginnew-back.png) no-repeat center / 20px 20px;
padding-left: 30px;
padding-left: 100px;
text-decoration: none;
}
.middle{
height: 560px;
padding-top: 70px;
float: left;
}
.middle img{
width: 760px;
height: 560px;
}
.main{
height: 560px;
width: 710px;
background-image: url(https://swxymooc.csuft.edu.cn/static/login/images/loginnew-box.jpg);
float: right;
}
.title{
width: 350px;
height: auto;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #000;
padding-left: 170px;
padding-top: 100px;
}
.list{
padding-top: 20px;
}
.item{
width: auto;
height: auto;
margin-bottom: 30px;
position: relative;
padding-left: 170px;
}
.box{
width: 170px;
height: 50px;
line-height: 50px;
text-align: right;
box-sizing: 15px;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
color: #666;
}
.inbox{
/* border: 1px solid #000; */
width: auto;
height: 50px;
margin-left: 8px;
position: relative;
}
.tp{
display: block;
width: 20px;
height: 20px;
font-size: 0;
line-height: 0;
position: absolute;
left: 20px;
top: 50%;
margin-top: -10px;
}
.tp img{
width: 20px;
height: 20px;
}
.password,.username{
display: block;
width: 300px;
height: 50px;
background: #fff;
border: 0 none;
border-radius: 25px;
font-size: 14px;
color: #333;
padding: 0 20px 0 50px;
}
.code{
display: block;
height: 50px;
background: #fff;
border: 0 none;
border-radius: 25px;
font-size: 14px;
color: #333;
padding: 0 20px 0 50px;
float: left;
width: 130px;
margin-left: 10px;
}
.yzm{
display: block;
margin-left: 10px;
width: 140px;
height: 50px;
box-sizing: border-box;
padding: 5px 0;
font-size: 0;
background: #fff;
border-radius: 25px;
float: left;
text-align: center;
overflow: hidden;
}
.yzm img{
width: 90px;
height: 40px;
cursor: pointer;
}
.notbox{
width: 350px;
height: auto;
overflow: hidden;
box-sizing: border-box;
padding: 0 20px;
}
label{
float: left;
line-height: 20px;
display: flex;
align-items: center;
font-size: 14px;
color: #999;
}
lable input{
margin-right: 5px;
}
.forget{
float: right;
line-height: 20px;
font-size: 14px;
color: #3896ff;
text-decoration: none;
}
.submit{
display: block;
width: 350px;
height: 50px;
background-color: #009cff;
border-radius: 25px;
font-size: 16px;
color: #fff;
cursor: pointer;
border: 0 none;
box-shadow: 0 3px 6px rgba(0,156,255,.1);
}
</style>
</head>
<body>
<div class="top">
<a href="https://swxymooc.csuft.edu.cn/index">
<img src="https://s2.yinghuaonline.com/upfiles/WUzL77476TPMufiIULIK.png" >
</a>
</div>
<div class="back">
<a href="https://swxymooc.csuft.edu.cn/">返回首页</a>
</div>
<div class="middle">
<img src=" https://swxymooc.csuft.edu.cn/static/login/images/loginnew-img.jpg" >
<div class="main">
<div class="title" id="title" style="margin-top: -20px;">学生登录</div>
<form id="login" method="post">
<div class="list">
<div class="item">
<div class="box">用户名</div>
<div class="inbox">
<span class="tp">
<img src="https://swxymooc.csuft.edu.cn/static/login/images/login-mb.png" >
</span>
<input type="text" name="username" id="username" placeholder="请输入您的学号" class="username">
</div>
</div>
<div class="item">
<div class="box">密码</div>
<div class="inbox">
<span class="tp">
<img src="https://swxymooc.csuft.edu.cn/static/login/images/login-pwd.png">
</span>
<input type="password" name="password" id="password" placeholder="请输入您的密码" class="password">
</div>
</div>
<div class="item">
<div class="box">验证码</div>
<div class="inbox">
<span class="tp">
<img src="https://swxymooc.csuft.edu.cn/static/login/images/login-vf.png" >
</span>
<input type="code" name="code" id="code" class="code" placeholder="请输入验证码" >
<span class="yzm">
<img id="codeImg" align="center" height="40px" src="https://swxymooc.csuft.edu.cn/service/code?r={time()}" alt="看不清点击刷新！" onclick="this.src = '/service/code?r=' + Math.random();">
</span>
</div>
</div>
<div class="item">
<div class="notbox">
<label >
<input type="checkbox" id="remember">
保持登录状态
</label>
<a href="https://swxymooc.csuft.edu.cn/user/login/forget_by_mobile" class="forget">忘记密码？</a>
</div>
</div>
<div class="item">
<div class="inbox">
<input type="submit" value="登录" class="submit">
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
运行结果
页面三代码
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>
.wapbg{
background: url(https://jwxt.xtu.edu.cn/framework/images/index/tpbg.gif);
height: 446px;
}
.wap{
margin: 0 auto;
width: 955px;
}
.top{
height: 150px;
padding-left: 85px;
}
.middle{
background: url(https://jwxt.xtu.edu.cn/framework/images/index/bgtpnew.gif) no-repeat;
height: 296px;
position: relative;
width: 955px;
}
.dl{
width: 312px;
height: 230px;
position: absolute;
right: 60px;
top: 30px;
}
.logintitle{
font-size: 24px;
color: #333;
padding-bottom: 20px;
}
.dlmi{
float: left;
width: 312px;
line-height: 45px;
font-size: 17px;
color: #333;
position: absolute;
top: 70px;
}
.input{
height: 28px;
border: 1px solid #DDDDDD;
padding-left: 3px;
}
a{
color: #999;
text-decoration: none;
}
.dlj{
color: #666;
position: absolute;
top: 180px;
left: 77px;
width: 113px;
}
.inputSmt{
height: 45px;
width: 45px;
font-size: 16px;
cursor: pointer;
}
.dlaul
{
height:45px;
width:45px;
font-size:16px;
}
font{
color: rgb(65,105,225);
font-size: small
}
.dl_hidden{
height: 300px;
}
table{
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
unicode-bidi: isolate;
border-spacing: 2px;
border-color: gray;
}
.tr{
display: table-row;
}
.trclass{
text-decoration: solid;
font-size: 12px;
height: 40px;
text-align: right;
padding-right: 5px;
}
td{
display: table-cell;
vertical-align: inherit;
unicode-bidi: isolate;
}
.input{
height: 28px;
border: 1px solid #DDDDDD;
padding-left: 3px;
}
input[type="text" i] {
padding-block: 1px;
padding-inline: 2px;
}
input[type="hidden" i] {
appearance: none;
background-color: initial;
cursor: default;
display: none !important;
padding: initial;
border: initial;
}
.button{
height: 36px;
line-height: 22px;
width: 188px;
color: #FFF;
background-color: #2F88EE;
border: 0;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
font-size: 16px;
}
.buttonover{
height:36px;
line-height:22px;
width:188px;
color:#FFF;
background-color:#ABCAE9;
border:0;
padding-left:5px;
padding-right:5px;
cursor: pointer;
font-size:16px;
}
.dlti{
font-size:20px;
color:#333;
position:absolute;
top:5px;
width: 312px;
}
.end{
position: absolute;
font-size: 15px;
color: #999;
width: 809px;
left: 85px;
top: 304px;
}
.end .leftclass{
float: left;
display: block;
}
.end .right{
float: right;
display: block;
}
.copyright{
color: #999;
text-decoration: none;
}
.endl{
position: absolute;
font-size: 15px;
color: #999;
float: left;
width: 500px;
left: 0px;
top: 264px;
color: red;
}
.dl_box2 div{
padding-top: 100px;
text-align: center;
}
.dlti li
{
float:left;list-style:none; text-align:center;width:50%;
}
.dlti li a
{
display:block;
}
.dlti .act
{
border-bottom:2px solid #1A4F80;color:#1A4F80; float:left;
}
.dlti .ks
{
float:right;
}
.dl_hidden
{
height:300px}
</style>
</head>
<body>
<form action="/Logon.do?method=logon" name="frm" id="frm" method="post">
<input type="hidden" name="userAccount1" id="userAccount">
<input type="hidden" name="userPassword1" id="userPassword1">
<input type="hidden" name="ticket" id="ticket" value="jsxsdLogin">
<div class="wapbg">
<div class="wap">
<div class="top">
<img style="padding-top: 80px" src="https://jwxt.xtu.edu.cn/framework/images/index_02.png" width="474px" height="61px">
</div>
<div class="middle">
<div class="dl">
<div class="logintitle">
用户登录（管理端）
<font size="1">
<a href="https://jwxt.xtu.edu.cn/jsxsd/">
<font color="#4169E1" size="2">进入师生端</font>
</a>
</font>
</div>
<div class="dl_hidden dl_box1">
<table border="0" width="320px">
<tbody>
<tr>
<td class="trclass"">
用户名：
</td>
<td>
<input type="text" id="userAccount" maxlength="32" value="" style="width: 250px; " class="input">
<input type="hidden" name="view" id="view">
</td>
</tr>
<tr>
<td class="trclass"> 密码：</td>
<td>
<input type="password" id="userPassword" value maxlength="32" style="width: 250px;" class="input">
<input type="hidden" name="useDogCode" id="useDogCode">
<input type="hidden" name="encoded" id="encoded">
</td>
</tr>
<tr>
<td class="trclass">验证码:</td>
<td style>
<input type="text" name="RANDOMCODE" id="RANDOMCODE" maxlength="6" class="input" style="width:70px; display:block; float: left;">
<img src="https://jwxt.xtu.edu.cn/verifycode.servlet" id="SafeCodeImg" onclick="ReShowCode()" width="65" height="28px" style="display:block;float: right;padding-right:100px;">
</td>
</tr>
<tr>
<td colspan="1">
<a href="https://jwxt.xtu.edu.cn/wjmm1.jsp" target="_blank">
<font color="#4169E1" size="2">
<u>忘记密码</u>
</font>
</a>
</td>
<td colspan="2" align="right">
<input type="button" id="btnSubmit" class="button" onclick="onSubmint()" title="点击登录" value="登 录">
</td>
</tr>
</tbody>
</table>
<font color="red" id="infom"></font>
</div>
<div class="endl">
<div style="margin-top:15px;font-size:12px;color:red;white-space:nowrap;">建议:使用IE9、IE10、IE11或360登录系统,且同一浏览器不能同时登录多个账号
</div>
<div></div>
</div>
<div class="dl_hidden dl_box2" style="display: none;">
<div>
<a href="http://www.qzdatasoft.com/qqjw/login4qq.do?method=loginIndex">
<img src="https://jwxt.xtu.edu.cn/framework/images/new/qqdl.gif" style="border: 0px;">
</a>
</div>
</div>
</div>
<div class="end" style="display: block;">
<table border="0" width="100%">
<tbody>
<tr>
<td align="left">
<span style="padding-top: 8px;">
<a target="_blank" href="https://jwxt.xtu.edu.cn/kblogin.jsp?f=/framework/ggly_yfggly_index.jsp">教务通知</a>
</span>
<span style="padding-top: 8px;"></span>
<span style="padding-top: 8px;"> </span>
<a target="_blank" href="http://jwc.xtu.edu.cn" class="copyright" title="湘潭大学教务处">湘潭大学教务处</a>
版权所有
</td>
<td align="right">
<a href="#" class="copyright">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
运行结果
