前端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="#"> 更多</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> <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> <!--<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> <!--<a href="#" ></a>--> <br> <a href="#">2.神十二航天员在太空讲开学第一课</a> <a href="#">5.新华社评郎平卸任:败亦英雄</a> <br> <a href="#">3.中方谈对中美气候特使会谈有何期待</a> <a href="#">6.厦门连送4小时外卖20分钟内不派单</a> <br><br><br><br> <footer> <a href="#" class="a_grey">关于百度</a> <a href="#" class="a_grey">About Baidu</a> <a href="#" class="a_grey">使用百度前必读</a> <a href="#" class="a_grey">帮助中心</a> <a href="#" class="a_grey">京公网安备11000002000001号</a> <a href="#" class="a_grey">京ICP证030173号</a> <span style="color: rgb(187, 187, 187);font-size:13px;">©2021Baidu 互联网药品信息服务资格证书</span> <a href="#" class="a_grey">(京)-经营性-2017-0020信息网络传播视听节目许可证 0110516</a> </footer> </body> <script> function myFunction() { var x = document.createElement("INPUT"); x.setAttribute("type", "file"); document.body.appendChild(x); } </script> </html>