<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业一</title>
<style>
.game{
box-shadow: 10px 10px 10px gray;
margin:auto;
width: 800px;
height: 40px;
background-color: rgb(82, 74, 110);
text-align:center;
border-radius: 18px;
}
a{ text-decoration: none;
font-size: 30px;
color: white;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="game">
<a href="">游戏1</a>
<a href="">游戏2</a>
<a href="">游戏3</a>
<a href="">游戏4</a>
<a href="">游戏5</a>
<a href="">游戏6</a>
<a href="">游戏7</a>
<a href="">游戏8</a>
<a href="">游戏9</a>
</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>work2(1)</title>
<style>
body,div,dl,dt,p,dd,ul,ol,li,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>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>work2(2)</title>
<style>
[class]{
border-width: 0px;
border-color: black;
border-style: solid;
line-height: 2.5;
background-color: rgb(46, 90, 201);
}
span:hover{
background-color: rgb(65, 135, 216);
}
span{
display: inline-block;
color: white;
position: relative;
left: 80px;
}
/* [id]{
position: relative;
left: 400px;
} */
p{
color: gray;
position: relative;
left: 350px;
}
</style>
</head>
<body>
<div id="">
<img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index_logo.gif" alt="">
</div>
<div class="">
<span><b>我的桌面</b></span>
<span><b>学籍成绩</b></span>
<span><b>培养管理</b></span>
<span><b>考试报名</b></span>
<span><b>教学评价</b></span>
</div><br>
<div id="">
<table border="0px" width="1000px" height="600px" >
<tr>
<td rowspan="2" colspan="2"><img src="./个人信息.png" alt=""></td>
<!-- <td></td> -->
<td rowspan="2"><img src="./选课中心.png" alt=""></td>
<td><img src="学生评教.png""></td>
<td colspan="2"><img src="./已收留言.png" alt=""></td>
<!-- <td></td> -->
</tr>
<tr>
<!-- <td></td>
<td></td> -->
<!-- <td></td> -->
<td><img src="./培养方案.png" alt=""></td>
<td colspan="2"><img src="./已收公告.png" alt=""></td>
<!-- <td></td> -->
</tr>
<tr>
<td><img src="./课堂成绩查询.png" alt=""></td>
<td><img src="./教学周历.png" alt=""></td>
<td><img src="./授课计划查询.png" alt=""></td>
<td><img src="./未获得学分成绩查询.png" alt=""></td>
<td><img src="./学籍卡片.png" alt=""></td>
<td><img src="./修改密码.png" alt=""></td>
</tr>
</table>
</div><hr>
<p>Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</p >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work2(3)</title>
<style>
.photo{
text-align: center;
}
.mi{
text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<a>新闻</a>
<a>hao123</a>
<a>地图</a>
<a>贴吧</a>
<a>视频</a>
<a>图片</a>
<a>网盘</a>
<a>文库</a>
<a>更多</a>
</div>
<div class="photo">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</div>
<div class="mi">
<input type="search" name="" id="" >
<button type="button">百度一下</button>
</div>
<div class="photo">
<img src="./屏幕截图 2024-06-17 232149.png" >
</div>
</div>
</body>
</html>