点击左侧导航链接, 会在右侧显示对应页面。(transform: translate(-50%, -50%))

最新推荐文章于 2023-10-17 17:30:11 发布

原创最新推荐文章于 2023-10-17 17:30:11 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

WEB前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了两种方法实现导航栏的浮动布局和鼠标悬停时的样式变化，包括使用表格+div和div+span结构，分别展示了如何创建一个居中且背景颜色可变的国内新闻导航元素。

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>

在这里插入图片描述