文章目录
1, 实现导航页面,点击左侧导航链接, 会在右侧显示对应页面
提示: <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, 实现导航页面,鼠标移动到"国内新闻"上时, 所移动到的这个国内新闻背景色会变成红色, 并且上下变宽(左右不变宽)
方法一:表格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;
}