作业1:
<!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>
.down{
background-color: orange;
border: none;
width: 200px;
height: 80px;
text-align: center;
margin: auto;
}
.down1{
text-decoration: none;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<button class="download"><a href="#" target="_blank" class="download">立即下载</a></button>
</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>Document</title>
<style>
.box{
font-size: smaller;
}
</style>
</head>
<body>
<table>
<tr>
<td><h2>三巨头</h2></td>
</tr>
<tr>
<td>
<img src="./img/蝙蝠侠.png" width="380" height="200">
</td>
<td>
<img src="./img/超人.png" width="380" height="200">
</td>
<td>
<img src="./img/神奇女侠.png" width="380" height="200">
</td>
</tr>
<tr>
<td>
蝙蝠侠
</td>
<td>
超人
</td>
<td>
神奇女侠
</td>
<tr class="box">
<td>
哥谭市亿万富豪,从小见证父母死在自己的眼前,长大后成为复仇的化身,守护着哥谭的安全,诈死后重出江湖加入正义联盟
</td>
<td>
最后的氪星之子,肩负着成为两世界的希望之桥,一生行驶善事,只为自己的世界带来正义,正义联盟里的T0级战力,也是由他带领建立的正义联盟
</td>
<td>
是奥林匹斯众神之王宙斯和亚马逊女王希波吕忒的私生女,拥有半神血统,正义联盟里最有荣誉感的战士,也是正义联盟里的最强战力之一
</td>
</tr>
</tr>
</table>
</body>
</html>
效果图:
作业3:
<!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: 0;
padding: 0;
}
.menu {
list-style: none;
width: 780px;
height: 50px;
border: 1px saddlebrown solid;
margin: auto;
background-color: #1B2534;
}
.menu li {
list-style: none;
float: left;
font-size: 20px;
cursor: pointer;
background-color: #1b2535;
text-align: center;
height: 50px;
width: 130px;
line-height: 50px;
}
.menu li:hover {
background-color: black;
}
.menu li a {
color: white;
text-decoration: none;
}
.menu ol > li {
background-color: rgb(30, 30, 67);
}
.menu > li > ol {
display: none;
}
.menu > li:hover ol{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">百度游戏|乐玩</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
<li>
<a href="#">首页</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
<li>
<a href="#">商城</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
<li>
<a href="#">页游</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
<li>
<a href="#">排行榜</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
<li>
<a href="#">繁星计划</a>
<ol>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ol>
</li>
</ul>
</body>
</html>
效果图:
作业4:
<!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>
ui{
list-style: none;
width: 350px;
height: 60px;
}
ui>li{
width: 50px;
height: 50px;
float: left;
color: black;
line-height: 50px;
text-align: center;
border-bottom:1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
cursor: pointer;
}
.button1{
border-left: 1px solid black;
}
ui>li:hover{
background-color: gray;
}
</style>
</head>
<body>
<div>
<ui class="button1">
<li><<<</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>>>></li>
</ui>
</div>
</body>
</html>
效果图:
作业5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 480px;
height: 200px;
border: 1px solid black;
border-radius: 10px;
}
.box1{
width: 150px;
height: 20px;
border: 1px solid black;
font-size: small;
}
</style>
<body>
<div class="box">
<table>
<tr>
<td><h4>Bootstrap v3</h4></td>
<td><h4>Bootstrap v4</h4></td>
<td><h4>Bootstrap v5</h4></td>
</tr>
<tr>
<td>✅支持IE8+浏览器</td>
<td>✅支持IE10+浏览器</td>
<td>✅支持Flexbox 布局</td>
</tr>
<tr>
<td>❌依赖</td>
<td>不依赖jQuery</td>
<td>✅支持CSS自定义属</td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td>❌不支持IE浏览器</td>
</tr>
<tr>
<td><div class="box1">Bootstrap v3 中文文档</div></td>
<td><div class="box1">Bootstrap v4 中文文档</div></td>
<td><div class="box1">Bootstrap v5 中文文档</div></td>
</tr>
</table>
</div>
</body>
</html>
效果图:
作业6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
width: 565px;
height: 350px;
border: 1px solid gray;
border-radius: 7px;
}
.box2{
margin: auto;
text-align: center;
}
</style>
<body>
<div class="box1">
<table>
<tr>
<td><img src="./img/作业.png" alt=""></td>
</tr>
<tr id="a">
<td><div class="box2">React</div></td>
</tr>
<tr>
<td>React起源于Facebook的内部项目,是一个用于构建用户界面的JavaScript库。</td>
</tr>
</table>
</div>
</body>
</html>
效果图: