ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-12 15:03:45  阅读:177  来源: 互联网

标签:none 菜单 210905 -- text color nbsp 网盘 页面


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

 

标签:none,菜单,210905,--,text,color,nbsp,网盘,页面
来源: https://www.cnblogs.com/Doner/p/15258157.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有