仿百度静态页面

Myth丶恋晨 2024-02-18 18:22 34阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>仿百度静态页面</title>
        <link href="Baidu.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div>
    
        
        <div id="nav">
            <a href="#">新闻</a>
            <a href="#">hao123</a>
            <a href="#">地图</a>
            <a href="#">视频</a>
            <a href="#">贴吧</a>
            <a href="#" class="login">登录</a>
            <a href="#" class="set">设置</a>
            <button>更多产品</button>
        </div>
        
    
        
        <div id="main">
            <div class="photo">
                <img src="img/bd_logo1.png" width="270" height="129"/>
            </div>
            <div>
                <input class="si" type="text" name="name" value=" " /><input class="sub" type="submit" name="name" value="百度一下"/>
            </div>
            
            
            <div id="bottom">
                <div class="ap">
                    <a href="#">把百度设为主页</a>
                    <a href="#">关于百度</a>
                    <a href="#">About Baidu</a>
                </div>
                <div class="ap">
                    <p>
                    ©2015 Baidu 使用百度前必读 意见反馈 京ICP证030173号 
                    </p>
                </div>
            </div>
        </div>
        </div>
    </body>
    </html>

/*--重置body--*/
    body
    {
        border: 0;
        margin: 0;
    }
    
    /*--重置button的边框--*/
    input,button
    {
        border:0;
    }
    
    /*--上面选项菜单--*/
    #nav
    {
        text-align: right;
        margin-top: 21px;
        margin-right: 8px;
        margin-bottom: 50px;
        font-size: 13px;
    }
    
    #nav a
    {
        color: #333;
        font-weight:bold;
        margin:0 7px;
    }
    
    #nav a.set,
    #nav a.login
    {
        font-weight:normal;
    }
    
    #nav button
    {
        background: #38f;
        padding:4px 5px;
        margin-left:5px;
        color:White;
    }
    
    #nav a:hover
    {
        color:#00C;
    }
    
    /*--主要部分--*/
    #main
    {
        width:655px;
        height:488px;
        margin:0 auto;
    }
    
    /*--百度一下背景图片--*/
    #main .photo
    {
        text-align:center;
        margin-bottom:19px;
    }
    
    #main input
    {
        border:1px solid #BBB;    
        width:540px;
        height:33px;
        padding-left:5px;
        margin:0;
    }
    
    #main input.sub
    {
        width:100px;
        height:36px;
        background: #38f;
        color:White;
        font-size:15px;
        border: 0;
        margin:0;
    }
    
    #main input.si
    {
        float:left;
    }
    
    /*--最底一块--*/
    #bottom
    {
        margin-top:249px;
    }
    
    #bottom .ap
    {
        font-size:12px;
        text-align:center;
    }
    
    #bottom .ap a
    {
        margin:0 6px;
        color:Blue;
    }
    
    #bottom .ap p
    {
        color:#666;
    }

![20180228160948313][]

[20180228160948313]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f8ff6511b66a43be8692c63976e3e2a8.png