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

①点击右侧导航链接, 会在左侧显示对应页面, 仅要求实现样子
【日常练习】实现两个导航页面_第1张图片
简单思路:

  1. a标签的target属性在这里插入图片描述
    也可以自定义
  2. 右边明显要用到iframe,给iframe的name属性刚刚自定义的名字即可

代码如下:


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

②鼠标移动到"国内新闻"上时, 所移动到的这个国内新闻背景色会变成红色, 并且上下变宽(左右不变宽), 具体效果如图, 仅要求实现此所述功能
【日常练习】实现两个导航页面_第2张图片
【日常练习】实现两个导航页面_第3张图片
简单思路:

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

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

代码如下:


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

你可能感兴趣的:(日常练习,html,css,html5)