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

文章目录

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;
        }
  • 7
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue是一种流行的JavaScript框架,用于构建用户界面。在一个基于vue开发的网站或应用程序中,左侧菜单栏可以用来导航不同的页面或功能,而右侧页面内容则用于显示具体的页面内容。 具体来说,通过在vue中使用组件的方式,我们可以轻松地实现左侧菜单栏控制右侧页面内容的切换。首先,我们需要创建一个父组件,用于包含左侧菜单栏和右侧页面内容。接着,在父组件中定义一个data属性,用于记录当前选中的菜单项或页面。然后,我们可以在父组件的模板中使用<router-view>标记来动态展示右侧页面内容。 在左侧菜单栏中,我们可以使用vue-router来定义不同的路由。每个路由对应一个菜单项,并且指定要显示的组件。当用户点击菜单项时,vue-router根据路由规则自动切换到对应页面,并将选中的菜单项记录到父组件的data属性中。这样,右侧的<router-view>标记就根据选中的菜单项显示相应页面内容。 使用vue的组件和路由机制,我们可以轻松地实现左侧菜单栏控制右侧页面内容的切换。这种方式在创建大型网站或应用程序时非常方便,可以提高开发效率和用户体验。同时,vue还提供了丰富的工具和指令,帮助我们实现复杂的页面切换效果和动画。总之,vue是一个很好的选择,用于构建拥有左侧菜单栏控制右侧页面内容切换功能的网站或应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lacrimosa&L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值