前端5_百度页面添加二级菜单_210905

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
<!--    <link rel="shortcut icon" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" type="image/x-icon" />-->
<!--    <link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">-->
<!--    <link rel="shortcut icon" href="百度.svg" type="image/x-icon" />-->

    <!--  标签按钮  -->
    <link rel="shortcut icon" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" type="image/x-icon" />

    <style>
    /*a:link {*/
    a {
    color:rgb(34, 34, 34);
    text-decoration: none;
    font-size:13px;
    }

    /* a:link 点击悬浮*/
    a:visited {
        text-decoration: none;
    }
    a:hover {
        color:rgb(49, 94, 251);
        text-decoration: none;
    }
    a:active {
        text-decoration: none;
    }

    /* 灰色的链接a:link */
    .a_grey {
        color:rgb(187, 187, 187);
        text-decoration: none;
        font-size:13px;
    }
    /* 灰色a:link 点击悬浮*/
    .a_grey:active {
        text-decoration: none;
    }
    .a_grey:visited {
        text-decoration: none;
    }
    .a_grey:hover {
        color:rgb(34, 34, 34);
        text-decoration: none;
    }


    /*按钮类型*/
    .button1 {
        background-color: rgb(78, 110, 242);
        border: none;
        color: white;

    } /* Blue */
    .button1:hover{
        box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
    }
    .button1:active{
        position: relative;
        top: 4px;
        box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);
        outline: 0;
    }
    .button1:focus{
        outline: 0;
    }

    /*//处理块元素中的空白符和换行符的,这个属性保证图片不换行*/
    /*ul{*/
    /*    !*display:block;*!*/
    /*    !*overflow:hidden;*!*/
    /*    white-space:nowrap;*/
    /*}*/

    .Secondary_menu ul{
        list-style-type: none;
    }
    .Secondary_menu ul li{
        /*float:left;*/
        /*以下设置仅为方便查看效果*/
        /*width:50px;*/
        /*height:20px;*/
        /*border:1px solid black;*/
        /*text-align: center;*/

        /*float:left;*/
        width: 260px;
        line-height: 20px;
        background-color: #EFF;
        color: white;
        text-align: center;
        border: 1px solid #ccc;
        border-top: none;

    }
    .Secondary_menu ul ul{
        display: none;
    }
    .Secondary_menu ul:hover ul{
        display:block;
    }

    /* 右侧悬浮 */
    .right_hover{
        width:143px;
        height:349px;
        float: right;
        left:80%;
        position:fixed;
        top:0%;
    }

    /*li {*/
    /*    display:inline*/
    /*}*/
    /*ul li{*/
    /*    display: inline;*/
    /*    list-style-type: none;*/
    /*    padding: 5px 5px;}*/
    .right {
        float: right;
        width: 300px;
        border: 3px solid #73AD21;
        padding: 10px;
    }

    /* 定位某一个相对位置 */
    .container {
        position: absolute;
    }

    .parallel_right {
        position: relative;
        top: -40px;
        left: 200px;
        font-size: 18px;
    }
    </style>


</head>
<body>



<!--<a href="#">更多</a>-->

<span class="Secondary_menu container"  >
     <a href="#" style="color:black;text-decoration:none;">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">直播</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
<!--    <ul style="white-space:nowrap; float: right">-->
<!--        bb-->
<!--    </ul>-->
    <ul class="parallel_right">

        <a href="#"> &nbsp;&nbsp;&nbsp; 更多</a>
<!--        <ul style="white-space:nowrap";>-->
            <ul>
            <li>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
                <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style="width: 30px; height: 30px" >网盘</a>
            </li>
        </ul>

    </ul>

</span>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div style =''>
<span class="Secondary_menu right_hover"  >
        <ul>
        <a href="#">设置</a>
       <ul>
            <li>
                <a href="#">搜索设置</a>
                <a href="#">搜索设置</a>
                <a href="#">搜索设置</a>
                <a href="#">搜索设置</a>
                <a href="#">搜索设置</a>
                <a href="#">搜索设置</a>
           </li>
        </ul>

    </ul>
     <button type="button" class="button1 parallel_right">登录 </button>
    </span>

</div>




<script>
 

</script>
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="text-align: center"></img>
<br>

<input type="text" value=""> <button onclick="myFunction()">按图片搜索</button>
<button type="button" class="button1" >百度一下</button>


<br><br><br><br>
<a href="#">1.是否会承认阿富汗新*?中方回应热</a> &nbsp;&nbsp;&nbsp;&nbsp;

<!--<div id=a style="height:20%;overflow:hidden">-->
<!--    <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png"></img>-->
<!--</div>-->
<!--<div class="container" >-->
<!--    <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png"-->
<!--         onm ouseover="this.src='https://www.icode9.com/i/l/?n=20&i=blog/1395550/202109/1395550-20210904230920947-930197044.png'"-->
<!--         onm ouseout="this.src='https://www.icode9.com/i/l/?n=20&i=blog/1395550/202109/1395550-20210904230919267-393418386.png'" alt="">-->
<!--</div>-->

<a href="#"><img src="https://pc-index-static.cdn.bcebos.com/pc-index-nav/00002/live_icon.png"></img> 4.2021年《开学第一课》新</a> &nbsp;&nbsp;&nbsp;&nbsp;
<!--<a href="#" ></a>-->
<br>
<a href="#">2.神十二航天员在太空讲开学第一课</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">5.新华社评郎平卸任:败亦英雄</a>
<br>
<a href="#">3.中方谈对中美气候特使会谈有何期待</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">6.厦门连送4小时外卖20分钟内不派单</a>



<br><br><br><br>



<footer>
    <a href="#" class="a_grey">关于百度</a>&nbsp;&nbsp;
    <a href="#" class="a_grey">About Baidu</a>&nbsp;&nbsp;
    <a href="#" class="a_grey">使用百度前必读</a>&nbsp;&nbsp;
    <a href="#" class="a_grey">帮助中心</a>&nbsp;&nbsp;
    <a href="#" class="a_grey">京公网安备11000002000001号</a>&nbsp;&nbsp;
    <a href="#" class="a_grey">京ICP证030173号</a>&nbsp;&nbsp;
    <span style="color: rgb(187, 187, 187);font-size:13px;">©2021Baidu &nbsp;&nbsp;互联网药品信息服务资格证书</span>&nbsp;
    <a href="#" class="a_grey">(京)-经营性-2017-0020信息网络传播视听节目许可证 0110516</a>&nbsp;&nbsp;


</footer>

</body>

<script>
    function myFunction() {
        var x = document.createElement("INPUT");
        x.setAttribute("type", "file");
        document.body.appendChild(x);
    }
</script>

</html>

 

上一篇:HTML&CSS笔记


下一篇:制作商品详情页面案例