文章标题

最新推荐文章于 2024-04-22 16:59:44 发布

原创最新推荐文章于 2024-04-22 16:59:44 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个仿百度首页的网页布局实现方案，详细分析了页面结构、样式定义及元素定位等关键技术点，为初学者提供了良好的学习案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
 <head>
  <title> 百度一下，你就知道 </title>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <style type="text/css">
    h1
    {font-size:15px;
    float:right;
    }
    .product
        {background:blue;
        color:white
        }
    a
        {padding:2px 10px;
         text-decoration:none;
         display:inline-block;
         color:black
        }
    a:visited{color:red}
    a:hover{color:blue}
    a:active{color:gray}
    .border
        {/*border:2px solid red;*/
        margin:0 auto;
        position:relative;
        top:40px;
        }
    .theme
        {margin:0 480px;
        }
    .content{
        /*border:2px solid red;*/
        width:1400px;
        }
    .keyword
        {padding:0 450px 0 350px;
        }
    .inputbox
        {width:400px;
         margin:0 auto;
         float:left;
        }
    .enterkey
        {background:blue;
        float:left;
        }
    .c
        {border:2px solid red;
        margin:0 auto;
        }
    .qrcode
        {margin:100px 300px 2px 540px;
        padding:0;
        }
    h2
        {text-align:center;
         margin:0;
         padding:10px;
         font-size:14px;
        }
    h3
        {font-size:10px;
        text-align:center;
        }
    .other  
        {/*border:2px solid red;*/
         width:600px;
         margin:0 300px 0 350px;

        }
    .remark
        {float:left;
        }
    .site
        {float:left;
        }
    .police
        {float:left;

        }
    .badge
        {float:left;
        }



 </style>
 </head>

 <body>
    <h1><a href="" >新闻</a>
        <a href="" >hao123 </a>
        <a href="" >地图 </a>
        <a href="" >视频 </a>
        <a href="" >贴吧 </a>
        <a href="" >学术 </a>
        <a href="" >登陆 </a>
        <a href="" >设置  </a>
        <a href="" class="product">更多产品</a>
    </h1>  
    <div class="border">
        <div class="theme"><img src="./img/c1.png">
        </div>
    <div class=content>
        <div class=keyword>
            <form>
                <input class="inputbox"type="text" name="keyword" value="" >

                <input class="enterkey" type="submit" value="百度一下">

            </form>
        </div>
    </div><br>

    <div class="qrcode">
            <img src="./img/6.png">
    </div>
    <h2>手机百度
    </h2>
    <h3><a href="" >把百度设为主页</a>
    <a href="" >hao123 </a>
    <a href="" >关于百度 </a>
    <a href="" >about baidu </a>
    <a href="" >百度推广 </a><br>
    <div class="other">
        <div class="remark">
            <a href="" class="ico">©2017 Baidu 使用百度前必读 意见反馈 京ICP证030173号 </a>
        </div>
        <div class="site">
            <img src="./img/地址.png">
        </div>
        <div class="police">
            <a href=""  class="police">京公网安备11000002000001号 </a>
        </div>
        <div class="badge">
            <img src="./img/警徽.png">
        </div>
    </div>
    </h3>  

 </body>
</html>