• 前端6_百度页面添加绝对位置相对位置使同一行_210906


    <!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;*/
            /*以下设置仅为方便查看效果*/
            /*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=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 30px; height: 30px" >网盘</a>
                    <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/tupian@2x-482fc011fc.png" style=" 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"-->
    <!--         onmouseover="this.src='https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230920947-930197044.png'"-->
    <!--         onmouseout="this.src='https://img2020.cnblogs.com/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>
  • 相关阅读:
    基于AOP实现Ibatis的缓存配置过期策略
    Step by Step构建自己的ORM系列配置管理层
    云计算从基础到应用架构系列云计算的演进
    设计模式系列桥接模式
    云计算从基础到应用架构系列云计算的概念
    云计算从基础到应用架构系列虚拟化的技术(上)
    设计模式系列装饰模式
    typeof和GetType区别
    白话学习MVC(四)URL路由
    五、DirectX编程
  • 原文地址:https://www.cnblogs.com/Doner/p/15258160.html
Copyright © 2020-2023  润新知