代码实现

开始我的真的以为语言是相通的,以为google首页真的很简单,结果真的很简单,只是对于我很难.
图片是直接在google首页截取的图片
实现的效果如图:

屏幕快照 2017-07-25 14.18.20.png

实现的代码块:

<!DOCTYPE html>
<html>
<head>
    <title>google</title>

    <style type="text/css">
    /*是让div中的子级元素居中 而不能在视图的本身让其居中*/
    body {
        text-align: center;
    }
    .img {
        margin-top: 3cm;
        width: 200px;
        height: 100px;
     /*text-align: 不能再视图中使其居中 css里只能识别这种星号的注释 */
    }
    .search {
        margin-top: 1cm;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        border-color: blue;
        width: 50%;
    }
    </style>
</head>
<body>
<!-- 要把img 和input做成两个不同的块级元素 否则会视为一个整体 -->
<!--当是两个块级元素下一个自动以上一个为尺寸-->
<div>
    <!--同一目录之下不能加斜杠 -->
    <img class="img" src="googleImage.png">
</div>
<input class="search" type="text" name="search"  placeholder="在Google上搜索或输入网址">
</body>
</html>