2021-05-29

最新推荐文章于 2024-09-16 23:05:35 发布

wh_fighting1

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量185

点赞数 2

分类专栏：网页作业

本文链接：https://blog.csdn.net/weixin_52342741/article/details/117391333

版权

html

网页作业专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下你就知道</title>
    <style>
       .m , .n{
            color: #555;
            font: 13px/23px Arial,sans-serif;
            text-decoration: none;

        }
        .top{
            height: 60px;
            border-bottom: 0;
        }
         .top .left{
            z-index: 100;
            height: 60px;
            padding-left: 24px;
            position: absolute;
            left: 0px;
            top: 0px;
         }
         .top .m{
            margin-right: 31px;
            margin-top: 19px;
            display: inline-block;
            position: relative;
            color: #222;
         }
         .top .right{
            position: absolute;
            right: 0;
            top: 0;
            z-index: 100;
            height: 60px;
            padding-right: 24px;
            
         }
         .top .n{
            margin-left: 32px;
            margin-top: 19px;
            display: inline-block;
            position: relative;
            vertical-align: top;
            cursor: pointer;
         }
         .main{
             font-size: 0px;
         }
         .main .logo-containr, .search
         {
             text-align: center;
         }
         .main .logo{
            width:270px;
            height: 129px;
         }
         .main .search_main{
            text-align: center;
            width: 560px;
            height: 40px;
            border: solid 2px #c4c7ce;
            vertical-align: middle;
            border-radius: 10px 0 0 10px;
        }
        .main .button_search{
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            width: 108px;
            height: 46px;
            color: #fff;
            border: none;
            font-size: 17px;
            vertical-align: middle;
        } 
        .s_bootom{
            display: block;
            text-align: center;
            position: fixed;
            left:0;
            background: #fff;
            bottom: 0px;
        }
        .s_bootom_con{
            bottom: 0px;
            height: 39px;
            line-height: 39px;
            background: #fff;
            font-size: 12px;
            font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
        }
        .s_bootom_con .minm{
            display: inline;
            margin-right: 24px;
            color: #bbb;
            text-decoration: none;
            padding-left: 24px;
            
           
        }
        .s_bootom_con .min{
            font-size: 12px;
            font-family: "PingFang SC",Arial,"Microsoft YaHei",sans-serif;
            color: #bbb;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left">
            <a href="#"class="m">新闻</a>
            <a href="#"class="m">hao123</a>
            <a href="#"class="m">地图</a>
            <a href="#"class="m">直播</a>
            <a href="#"class="m">视频</a>
            <a href="#"class="m">贴吧</a>
            <a href="#"class="m">学术</a>
            <a href="#"class="m">更多</a>
        </div>
        <div class="right">
            <a href="#"class="n">泰安</a>
            <a href="#"class="n">设置</a>
        </div>
    </div>
    <div class="main">
        <div class="logo-containr">
            <img class="logo" src="baidu.png">
        </div>
        <div class="search">
            <input class="search_main">
            <button class="button_search">百度一下</button>

        </div>
    </div>
    
  
    
        <div id="bottom_laryer" class="s_bootom">
            <div class="s_bootom_con">
                <a class="minm" href="#">设为首页</a>
                <a class="minm" href="#">关于百度</a>
                <a class="minm" href="#">About Baidu</a>
                <a class="minm" href="#">使用百度前必读</a>
                <a class="minm" href="#">意见反馈</a>
                <a class="minm" href="#">帮助中心</a>
               <a class="minm" href="#">京公网安备11000002000001号</a>
                <a class="minm" href="#">京ICP证030173号</a>
                <span class="min">©2021 Baidu</span> 
                <span class="min">(京)-经营性-2017-0020 </span>
                <span class="min">信息网络传播视听节目许可证 0110516 </span>
            </div>
        </div>
</body>
</html>