1.点击左侧导航链接, 会在右侧显示对应页面, 仅要求实现样子
提示: 浮动 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
width: 130px;
height: 300px;
float: left;
border: 1px solid;
text-align: center;
padding-top: 35px;
margin-right: 20px;
}
.div1 a {
text-decoration: none;
}
.div1 hr {
width: 90px;
}
.div2 {
width: 1000px;
height: 600px;
float: left;
}
.div2 iframe {
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<div class="div1">
<div>
<a href="E:\wangdao\code\src\com\zuoye\前端阶段\day3_20210218\导航页面1.html" target="test">首页</a>
</div>
<hr>
<div><a href="http://www.baidu.com" target="test">百度</a>
</div>
<hr>
<div>
<a href="http://www.taobao.com" target="test">淘宝</a>
</div>
<hr>
<div>
<a href="https://www.jd.com" target="test">京东</a>
</div>
<hr>
</div>
<div class="div2">
<iframe src="" name="test"></iframe>
</div>
</body>
</html>
2.实现导航页面
鼠标移动到"国内新闻"上时, 所移动到的这个国内新闻背景色会变成红色, 并且上下变宽(左右不变宽), 具体效果如图4, 仅要求实现此所述功能：
方法一：（表格+div）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div0{
/*申明使用绝对位置*/
position: absolute;
/*距离顶部的百分比*/
top: 8%;
/*距离左边的百分比*/
left:50%;
/*translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置*/
transform: translate(-50%,-50%);
/*与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，
而translate可以在不知道宽高的情况下进行居中，
tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。*/
}
.div1{
width: 700px;
background-color: black;
}
.div1 table tr td{
color: whitesmoke;
width: 100px;
text-align: center;
}
.div1 table tr td:hover{
background-color: #ff371a;
border: 10px solid red;
}
.div2{
width: 700px;
background-color: yellow;
height: 100px;
}
</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>
方法二：（div+span）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div0 {
width: 800px;
height: 120px;
/*申明使用绝对位置*/
position: absolute;
/*距离顶部的百分比*/
top: 50%;
/*距离左边的百分比*/
left: 50%;
/*translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置*/
transform: translate(-50%, -50%);
/*与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，
而translate可以在不知道宽高的情况下进行居中，
tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。*/
}
.div1{
background-color: black;
width: 100%;
height: 25%;
}
.div1 div{
float: right;
height: 100%;
width: 14.2%;
text-align: center;
}
.div1 span {
color: whitesmoke;
}
.div1 span:hover {
width: 100%;
height: 100%;
background-color: #ff371a;
border: 10px solid red;
}
.div2 {
width: 100%;
background-color: yellow;
height: 100px;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
<div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div><div>
<span>
国内新闻
</span>
</div>
</div>
<div class="div2">
</div>
</div>
</body>
</html>
