Googleホームページの作成

29651 ワード
PlayProgramming テキストリンク
毎日Googleのホームページを検索しているので、レイアウトが簡単に見えます.
サーバへの接続はまだ実現されていないため、formラベルにactionプロパティformを使用します.htmlの作成
つながった.体現は검색 결과입니다.😊
Googleでログインすると、次の写真のようにショートカットを追加できますが、この部分はどのように解決するかという悩みです!今はまだ方法が分からないが、これからは実力を上げて、その部分を実現してほしい.
あなたのおかげで、私はカメラでビデオを撮影して、ビデオをgifファイルのウェブサイトに変えることを知っています!👏
  • https://ezgif.com/video-to-gif:mp 4をgifのサイトに変換

    • ほじょてん

  • ショートカットは他に項目がありません.
  • Googleページロゴが移動中!

  • Googleのホームページ


  • クローンエンコーディング

  • index.html

    • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>google</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://kit.fontawesome.com/3c579473f5.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <header>
            <div class="header">
                <a href="https://www.google.com/"><img src="./img/google.png"></a>
                
            </div>
        </header>
        <section>
            <div class="section">
                <form action="form.html">
                    <div class="form-bar">
                        <div>
                        <i class="fas fa-search"></i>
                        <input class="search" type="text" name="search-bar" placeholder="검색어를 입력해주세요.">
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <section>
            <div class="section-contents">
                <div>
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                </div>
                <div>
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                    <img src="http://placehold.it/112X112">
                </div>
            </div>
        </section>
        <footer>
            <div class="footer">
                <form action="www.google.com" name="search_vogue">
                    <a href="https://www.youtube.com/watch?v=rokGy0huYEA&feature=youtu.be"><input type="button" value="2020년 인기 검색어 트렌드 보기"></a>
                </form>
            </div>
        </footer>
    </div>
    <script>
    </script>
</body>
</html>

  • index.css

    • html, body {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

.container {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.header {
    margin-top: 30px;
}

.section {
    margin: 30px 0px 80px 0;
}


.form-bar {
    display: flex;
    width : 500px;
    margin: 0 auto;
    box-shadow:0 1px 6px 0 rgba(32, 33, 36, .28);
    height: 45px;
    border-radius: 30px;
    border: 1px solid white;
    text-indent: 15px;
    justify-content: space-between;
    align-items: center;
}

.search {
    border: none;
}
.search:focus {
    outline: none;
    border: none;
}

.section-contents {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

.section-contents > div > img {
    margin: 10px 10px;
}

.footer > form > a > input {
    border-radius: 15px;
    background-color: white;
    color: #3367D6;
    border: 1px solid black;
    height: 25px;
    outline: none;
}

  • form.html

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>검색 결과입니다.</h1>
</body>
</html>

    References

  • 🎈2020.12.10
  • 🎈VScode, Eclipse EE : .jsp
    • コピー＆ペーストを防ぐPDFでセキュリティを無効にする方法
    [react]イベントの処理