仿写百度（百度一下你就知道）搜索页面

最新推荐文章于 2022-05-02 22:39:59 发布

LeeTikPaak19

最新推荐文章于 2022-05-02 22:39:59 发布

阅读量2.7k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43521227/article/details/88532443

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

                                     **主页面展示：**

在这里插入图片描述 页面代码（HTML）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <link rel="icon" href="BAIDU.ico"/>
    <link class="" rel="stylesheet" href="baidu1.css"/>
</head>
<body>
<div class="center">
    <a href=""><img src="baidu11.PNG" alt=""/></a>
</div>
<div class="input">
    <form action="#"  method="get"><span><input type="text" maxlength="100" /></span><span class="photo"></span><input type="submit" value="百度一下"/>

    </form>

</div>
</body>
</html>

CSS代码：


*{
    margin:0;
    padding:0;
}
body{font:14px/24px '微软雅黑','宋体'}
.center{
    width: 800px;

    margin-left: 650px;
    margin-top: 100px;
    margin-bottom: 20px;

}
.center img{
    width: 220px;
    height: 75px;
}
.input span{
    padding-left: 440px;
    float: left;
    white-space: nowrap;
}
input[type="text"]{
    -web-kit-appearance:none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size:15px;

}
input[type="text"]{
    height:39px;
    width:520px;
    border:1px solid #38f;

    outline:0;
    padding-left: 8px;
}
input[type="submit"]{
    margin: 0;
    height: 41px;
    width: 100px;
    background: #38f;
    color: #fff;
    font:16px  '微软雅黑';
    border:none;

}
input[type="submit"]:hover{
    background: #0e62a3;
    cursor: pointer;
}

LeeTikPaak19

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
仿写百度（百度一下你就知道）搜索页面

**主页面展示：**页面代码（HTML）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;百度一下，你就知道&lt;/title&gt; &lt;...
复制链接

扫一扫