实现导航页面，点击左侧导航链接, 会在右侧显示对应页面（CSS）

文章目录1, 实现导航页面，点击左侧导航链接, 会在右侧显示对应页面提示: <a> <iframe> 浮动边框<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.div

Lacrimosa&L

4096人浏览 · 2021-03-17 19:39:52

Lacrimosa&L · 2021-03-17 19:39:52 发布

文章目录

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;
        }