作业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>
div{
border: 1px ;
background-color:rgb(93, 92, 90);
border-radius: 100px;
box-shadow: 10px 10px 10px rgb(188, 186, 186);
text-align: center;
height: 25px;
}
span{
border: 1px ;
width: 200px;
height: 200px;
color: white;
box-shadow: 2px 2px 2px rgb(116, 114, 114);
border-radius: 100px;
border-style: none;
}
</style>
</head>
<body>
<div>
<span>游戏1</span>
<span>游戏2</span>
<span>游戏3</span>
<span>游戏4</span>
<span>游戏5</span>
<span>游戏6</span>
<span>游戏7</span>
<span>游戏8</span>
<span>游戏9</span>
</div>
</body>
</html>
作业2:学习内容:
1.制作账单:
主要用的是表格标签的基础,表格头体尾以及表格的嵌套,熟练掌握<tr> <th> <td>
tr:是行
th是表格头
td是列 ,使用参考该账单代码。
2.制作简单导航栏
制作导航栏主要使用的是块级元素转换为行内元素,或者行内元素转化为块级元素。
行内元素转化为块级元素:display: block;
块级转化为行内元素:
1.块级转化为行内,不保留块级样式:display:inline;
2.块级转化为行内,保留块级样式:display:inline-block;