【日常练习】实现两个导航页面

最新推荐文章于 2023-07-11 18:40:56 发布

Octavius_

最新推荐文章于 2023-07-11 18:40:56 发布

阅读量483

点赞数 1

分类专栏：日常练习文章标签： html css html5

本文链接：https://blog.csdn.net/Octavius_/article/details/113853261

版权

日常练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

①点击右侧导航链接, 会在左侧显示对应页面, 仅要求实现样子
在这里插入图片描述
简单思路：

a标签的target属性
也可以自定义
右边明显要用到iframe，给iframe的name属性刚刚自定义的名字即可

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网址导航</title>
    <style>
        iframe{
            width: 100%;
            height: 100%;
        }
        .left{
            width: 80px;
            height: 200px;
            border: 1px solid silver;
            padding: 30px;
            margin: 20px;
            float: left;
        }
        .right{
            width: 700px;
            height: 800px;
            margin: 20px;
            float: left;
        }
        .left-son{
            height: 35px;
            border-bottom: 1px solid silver;
        }
        a{
            text-decoration: none;
        }

    </style>
</head>
<body>
<div>

    <div class="left">
        <div class="left-son">
            <a href="">首页</a>
        </div>

        <div class="left-son">
            <a href="https://www.baidu.com/" target="page">百度</a>
        </div>

        <div class="left-son">
            <a href="https://www.taobao.com/" target="page">淘宝</a>
        </div>

        <div class="left-son">
            <a href="https://www.jd.com/" target="page">京东</a>
        </div>

    </div>


    <div class="right">
        <iframe name="page">

        </iframe>
    </div>
</div>
</body>
</html>

②鼠标移动到"国内新闻"上时, 所移动到的这个国内新闻背景色会变成红色, 并且上下变宽(左右不变宽), 具体效果如图, 仅要求实现此所述功能
在这里插入图片描述

简单思路：

鼠标移过去，黑色变成红色，且面积稍微变大

使用hover使鼠标移过去变色
可以把分区的原上边框设置为白色，下边框设置为黄色
hover中的上下边框都设置成红色即可

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        .black{
            background: black;
            width: 700px;
            height: 21px;
            margin: auto;
        }

        .black-son{
            width: 100px;
            text-align: center;
            background: black;
            color: white;
            float: left;
            border-bottom: 2px solid yellow;
            border-top: 2px solid white;
        }

        .black-son:hover{
            background: red;
            border-bottom: 2px solid red;
            border-top: 2px solid red;
        }

        .yellow{
            background: yellow;
            width: 700px;
            height: 35px;
            margin: auto;
        }

    </style>
</head>
<body>
<div class="black">
    <div class="black-son">首页</div>
    <div class="black-son">村内新闻</div>
    <div class="black-son">镇内新闻</div>
    <div class="black-son">县内新闻</div>
    <div class="black-son">市内新闻</div>
    <div class="black-son">省内新闻</div>
    <div class="black-son">国内新闻</div>
</div>

<div class="yellow">

</div>

</body>
</html>