Article Directory
1, To achieve the navigation page, click the navigation link on the left, the corresponding page will be displayed on the right
提示: <a> <iframe> 浮动 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 150px;
height: 300px;
border: 1px solid;
text-align: center;
float: left;
}
.div2{
width: 1200px;
height: 600px;
float: left;
}
.div2 iframe{
width: 1200px;
height: 600px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="div1">
<div class="123">
<a href="Work1.html" style="color: blue">首页</a>
</div>
<hr>
<div>
<!-- <a> 标签的 target 属性规定在何处打开链接文档-->
<a href="https://www.baidu.com/" target="test">百度</a>
</div>
<hr>
<div>
<a href="https://www.taobao.com/" target="test">淘宝</a>
</div>
<hr>
<div>
<a href="https://www.google.cn/" target="test1">谷歌</a>
</div>
<hr>
</div>
<div class="div2">
<iframe name="test"></iframe>
</div>
</body>
</html>
2, Realize the navigation page, when the mouse moves to "domestic news", the background color of the domestic news that it is moved to will become red, and the top and bottom will be widened (left and right will not be wide)
方法一：表格table-tr-td + div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器*/
.div0{
/*使用绝对位置*/
position: absolute;
/*距离顶部的百分比*/
top: 18%;
/*距离左边的百分比*/
left:50%;
transform: translate(-50%,-50%);
}
.div1{
width: 900px;
background-color: black;
}
.div1 table tr td{
color: whitesmoke;
width: 100px;
text-align: center;
}
.div1 table tr td:hover{
background-color: #ff371a;
border: 8px solid red;
}
.div2{
width: 900px;
background-color: yellow;
height: 30px;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
<table>
<tr>
<td>首页</td>
<td>国内新闻</td>
<td>国内新闻</td>
<td>国内新闻</td>
<td>国内新闻</td>
<td>国内新闻</td>
<td>国内新闻</td>
</tr>
</table>
</div>
<div class="div2">
</div>
</div>
</body>
</html>
.div1{
width: 900px;
background-color: black;
}
.div1 table tr td{
color: whitesmoke;
width: 100px;
text-align: center;
}
.div1 table tr td:hover{
background-color: #ff371a;
border: 8px solid red;
}
