0
点赞
收藏
分享

微信扫一扫

利用div盒子实现仿百度首页的效果

忆北文学摄影爱好员 2022-04-07 阅读 41
html

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

  a{

           text-decoration:none;

    }

    .logo,.nav,.sousou,.btn,.more,.map,.bottom{

           text-align: center;

    }

 </style>

    <body>

      <div class="logo">

          <img src="bdlogo.gif"/>

       </div>

       <div class="nav">

            <a href="#">新闻</a>&nbsp;<strong>网页</strong>&nbsp;

            <a href="#">贴吧</a>&nbsp;<a href="#">知道</a>&nbsp;

            <a href="#">音乐</a>&nbsp;<a href="#">图片</a>&nbsp;

             <a href="#">视频</a>&nbsp;<a href="#">地图</a>

      </div>

      <br/>

      <div class="sousou">

        <input type="text" class="serch"/>&nbsp;<input type="button" value="百度一下" class="btn"/>

      </div>

      <br/>

      <br/>

      <div class="more">

           <a href="#">百科</a>

           <a href="#">文科</a><a href="#">hao123</a>|

           <a href="#">更多&gt;&gt;</a>

       </div>

       <br/> 

       <br/>

       <div class="map">

          <img src="ic.jpg"/> &nbsp;

          <a href="#">百度地图带你吃喝玩乐,全心全意为人民服务</a>

       </div>

       <div class="bottom">

            <a href="#">把百度设为主页</a >&nbsp;

            <a href="#">安装百度卫士</a >

            <br />

            <a href="#">加入百度推广</a > |

            <a href="#">搜索风云榜</a > |

            <a href="#">关于百度</a > |

            <a href="#">About Baidu</a >

            <br />©2022 Baidu 使用百度前必读 

        </div>

    </body>

</html>

 

 

 

 

举报

相关推荐

0 条评论