时间戳

首页 > 解决方案 > 页脚部分在 Html 和 CSS 中消失

html - 页脚部分在 Html 和 CSS 中消失

问题描述

我试图创建一个将信息发送到电子邮件的表单，我的问题是其中一个标签具有国家/地区的选择类型，但添加后，它消失了我的页脚。

html
{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@font-face {
    font-family: 'fast_handregular';
    src: url('font/fasthand-lgbmv-webfont.woff2') format('woff2'),
         url('font/fasthand-lgbmv-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
    background-color: black; /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(212, 0, 0), #000000);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

footer{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

footer .footerContainer
{
    padding-bottom: 50px;
}

.container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 400px;
    max-width: 100%;
}

.form {
    padding: 30px 40px; 
}

.form-control {
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
}
<!DOCTYPE html>
<html>
    <head>
        <title>direccion</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel = "stylesheet" type = "text/css" href = "main.css" />

        <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
    </head>

    <body>
        <div class="container">
            <div class="header">
                <h2>Agrega tu direccion</h2>
            </div>

            <form id="form" class="form">
                <div class="form-control">
                    <label for="Nombre">Nombre Completo</label>
                    <input type="text" placeholder="Jose Luis Licea Alcaraz" id="nombre"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Direccion">Direccion </label>
                    <input type="text" placeholder="Calle, Numero, Colonia" id="direccion"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="CodigoPostal">Codigo Postal </label>
                    <input type="text" placeholder="64860" id="cp"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Telefono">Telefono </label>
                    <input type="tel" placeholder="+528112551388" id="tel"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Pais">Pais </label>
                    <select name="pais"  id="pais"> 
                        <option value="mexico">Mexico</option>
                        <option value="chile">Chile</option>
                        <option value="argentina">Argentina</option>
                        <option value="guatemala">Guatemala</option>
                </div>

            </form>
        </div>
    </body>

    <footer>
        <a target="_blank" href="https://www.facebook.com/gaming/Jeil0188">
            <img src="facebookGaming.png" width=40 height="40">
           </a>

        <a target="_blank" href="https://www.facebook.com/Jeil0188">
            <img src="facebookLogo.png" width=40 height="40">
           </a>

        <a target="_blank" href="https://www.twitch.tv/jl0188">
            <img src="twitch_invertido.png" width=40 height="40">
           </a>
        
           <a target="_blank" href="https://www.instagram.com/jeil0188/">
            <img src="instagramlogo_invertido.png" width=40 height="40">
           </a>

        <div class="footerContainer">
        </div>
    </footer>
</html>

此外，如果有人可以帮助我如何通过 javascript 将信息发送到电子邮件，这也会对我有很大帮助，但如果你不想这样做，你不必帮助我。

提前致谢。

标签： htmlcssforms

解决方案

您忘记关闭 html "select" ，添加在您的国家/地区选项之后

html
{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@font-face {
    font-family: 'fast_handregular';
    src: url('font/fasthand-lgbmv-webfont.woff2') format('woff2'),
         url('font/fasthand-lgbmv-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
    background-color: black; /* For browsers that do not support gradients */
    background-image: linear-gradient(rgb(212, 0, 0), #000000);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

footer{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

footer .footerContainer
{
    padding-bottom: 50px;
}

.container {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 400px;
    max-width: 100%;
}

.form {
    padding: 30px 40px; 
}

.form-control {
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
}
<!DOCTYPE html>
<html>
    <head>
        <title>direccion</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel = "stylesheet" type = "text/css" href = "main.css" />

        <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
    </head>

    <body>
        <div class="container">
            <div class="header">
                <h2>Agrega tu direccion</h2>
            </div>

            <form id="form" class="form">
                <div class="form-control">
                    <label for="Nombre">Nombre Completo</label>
                    <input type="text" placeholder="Jose Luis Licea Alcaraz" id="nombre"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Direccion">Direccion </label>
                    <input type="text" placeholder="Calle, Numero, Colonia" id="direccion"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="CodigoPostal">Codigo Postal </label>
                    <input type="text" placeholder="64860" id="cp"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Telefono">Telefono </label>
                    <input type="tel" placeholder="+528112551388" id="tel"> 
                    <i class="fas fa-check-circle"></i>
                    <i class="fas fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>

                <div class="form-control">
                    <label for="Pais">Pais </label>
                    <select name="pais"  id="pais"> 
                        <option value="mexico">Mexico</option>
                        <option value="chile">Chile</option>
                        <option value="argentina">Argentina</option>
                        <option value="guatemala">Guatemala</option>
 </select>
                </div>

            </form>
        </div>
    </body>

    <footer>
        <a target="_blank" href="https://www.facebook.com/gaming/Jeil0188">
            <img src="facebookGaming.png" width=40 height="40">
           </a>

        <a target="_blank" href="https://www.facebook.com/Jeil0188">
            <img src="facebookLogo.png" width=40 height="40">
           </a>

        <a target="_blank" href="https://www.twitch.tv/jl0188">
            <img src="twitch_invertido.png" width=40 height="40">
           </a>
        
           <a target="_blank" href="https://www.instagram.com/jeil0188/">
            <img src="instagramlogo_invertido.png" width=40 height="40">
           </a>

        <div class="footerContainer">
        </div>
    </footer>
</html>

推荐阅读