仿百度静态页面

最新推荐文章于 2023-10-07 14:08:36 发布

ThinkPet

最新推荐文章于 2023-10-07 14:08:36 发布

阅读量5.4k

点赞数 6

分类专栏： WEB前端

本文链接：https://blog.csdn.net/ThinkPet/article/details/79401952

版权

WEB前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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