Erstellen Sie mit CSS3 eine pinkfarbene Anmeldeschnittstelle-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Erstellen Sie mit CSS3 eine pinkfarbene Anmeldeschnittstelle

php中世界最好的语言

Mar 22, 2018 pm 01:58 PM

css3

Dieses Mal bringe ich Ihnen CSS3, um eine rosafarbene Anmeldeschnittstelle zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer rosafarbenen Anmeldeschnittstelle mit CSS3?

Aus einer Laune heraus wollte ich den Designstil des Materialdesigns erlernen, also habe ich versucht, eine Anmeldeseite zu vervollständigen

Es fühlt sich ziemlich gut an und der Code wird am Ende angehängt

Während des Schreibvorgangs wurden keine Bilder oder Schriftsymbole verwendet und alles wurde mit CSS3 vervollständigt, auf das ich gestoßen bin Einige Schwierigkeiten und Fehler, daher wollte ich sie später aufschreiben.

Responsive Design

Verwenden Sie auf dieser Seite die folgenden 3 Punkte, um das responsive Design zu vervollständigen

Eine maximale Breite von max-width ist für die Kompatibilität auf großen Bildschirmen eingestellt

2 immer

3. Komponenten verwenden Pixel

Es gibt noch viele weitere wichtige Punkte zum responsiven Design.

Gesamtseitenlayout

nbsp;html>


    <meta>
    <title>Document</title>
    <meta>
    <meta>
    <link>


    <p>
        </p><p>
            </p><p>
            </p>
            <p>
            </p>
        
        <h4 id="用户登录">用户登录</h4>
        <p>
            </p><p>
                <input>
                <label>用户名</label>
            </p>
            <p>
                <input>
                <label>密 码</label>
            </p>
            <p>
                </p><p><a>忘记密码</a></p>
                <p>
                    <span></span>
                    <label>记住密码</label>
                </p>
            
        
        <button>
            <span></span>
        </button>
    

<script></script>

CSS-Start

Stile zum Hauptteil hinzufügen

Mitte

html {
    font-family: "Microsoft YaHei", å®‹ä½“, "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
    background-color: #FF4081;
    color: #777;
}

Beachten Sie, dass hier Polsterung verwendet wird, um den internen Rand anzupassen, und nicht den Rand für untergeordnete Elemente, denn wenn Sie den Rand für den BFC-Effekt verwenden möchten, müssen Sie overflow:hidden hinzufügen . Auf diese Weise wird es einen Einfluss auf den Überlauf der Schwanztaste haben.

.container{
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 45px 20px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    box-sizing: border-box;
}

Stellen Sie den Randradius auf Breite und Höhe ein Machen Sie daraus einen Der Kreis

.container>.logo {
    height: 150px;
    width: 150px;
    position: relative;
    background-color: #EFEFEF;
    border-radius: 75px;
    margin: 0 auto;
}

benötigt unten einen dunkleren Halbkreis

Wie zeichne ich einen Halbkreis?

Stellen Sie die Breite auf ein Stellen Sie dann die obere und untere linke Ecke auf 0 und die rechte auf 75 Pixel ein. >

Stellen Sie auf ähnliche Weise die abgerundeten Ecken ein , das ebenfalls in zwei Teile unterteilt ist, das obere runde Loch und die untere Ellipse

Kann einfach auf die Vorher- und Nachher-Pseudoelemente des Schlossbodens gesetzt werden

.container>.logo::after {
    content: ' ';
    height: 150px;
    width: 75px;
    position: absolute;
    background-color: #E1E1E1;
    border-radius: 0 75px 75px 0;
    left: 75px;
    top: 0;
}

Das Logo wird hier abgeschlossen

Das Folgende ist der Titel „Benutzeranmeldung“.

.container>.logo>.logo-block-top {
    box-sizing: border-box;
    height: 45px;
    width: 54px;
    border: 10px solid #F57C00;
    border-bottom: 0;
    position: absolute;
    border-radius: 27px 27px 0 0;
    left: 48px;
    z-index: 1001;
    top: 20px;
}

Beachten Sie, dass es hier besser ist, einen Rand anstelle einer Auffüllung zu verwenden. Zerstören Sie den nicht Original-h4-Tag.

.container>.logo>.logo-block-bottom {
    position: absolute;
    height: 60px;
    width: 80px;
    box-sizing: border-box;
    background-color: #FFA000;
    z-index: 1001;
    top: 65px;
    left: 35px;
    border-radius: 7px;
}

Fügen Sie einen Container für den Inhalt hinzu

Fügen Sie eine Formulargruppe einschließlich Beschriftung und Eingabe-Tags hinzu und legen Sie das relative Layout fest

Das Folgende ist der Kernteil, das Festlegen des Stils für die Eingabe (hier tritt ein Fehler auf, der am Ende eingeführt wird)

.container>.logo>.logo-block-bottom::before {
    content: " ";
    position: absolute;
    height: 12px;
    width: 12px;
    background-color: #EFEFEF;
    border-radius: 5px;
    top: 22px;
    left: 34px;
    box-sizing: border-box;
}
.container>.logo>.logo-block-bottom::after {
    content: " ";
    position: absolute;
    height: 12px;
    width: 6px;
    background-color: #EFEFEF;
    border-radius: 2px;
    top: 30px;
    left: 37px;
    box-sizing: border-box;
}

Labe-Tag, verwenden Sie

absolute Positionierung um es über dem Eingang zu platzieren

Stellen Sie einen bestimmten Abstand zwischen den beiden Formulargruppen ein, sonst wird der untere Bereich blockiert. Der oben festgelegte Box-Schatten

.container>.login-header {
    text-align: center;
    font-size: 23px;
    color: #FF4081;
    font-weight: 400;
    margin: 15px 0 18px 0;
}

fügt dynamische Effekte hinzu

.container>.content {
    width: 90%;
    margin: 0 auto;
}

Dann kommt die untere Option, die ebenfalls in zwei Teile unterteilt ist, Option-links und Option-rechts

.container>.content>.form-group {
    position: relative;
}

Bitte beachten Sie dies bei Option-rechts Dieses Kontrollkästchen ist keine native Eingabe, sondern wird mit p gedreht, da das native Kontrollkästchen den Stil nicht ändern kann.

.container>.content>.form-group>.form-control {
    z-index: 3;
    position: relative;
    height: 58px;
    width: 100%;
    border: 0px;
    border-bottom: 1px solid #777;
    padding-top: 22px;
    color: #FF4081;
    font-size: 12px;
    background: none;
    box-sizing: border-box;
    outline: none;
    display: inline-block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

Hier verwendet: Drehung in CSS3, imitiert einen Auswahleffekt

Hinweis: Obwohl p nicht direkt ausgewählt werden kann, können Sie ihm dennoch ein checkd-Attribut hinzufügen. Dieses Attribut ist ein spezieller CSS-Ereigniseffekt, der über js gesteuert werden kann Hier muss auch die absolute Positionierung verwendet werden, die Referenzpunkte sind unten und rechts

.container>.content>.form-group>.form-label {
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: 0;
    font-size: 15px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

By box-shadow: 2px 0 0 rgba( 0, 0, 0, 0.3) inset Dieser Satz kann ein kennen Inline-Effekt.

中间的按钮在不适用字体图标的情况下也必须要用p 旋转来模仿了

.container>.login-button >.icon-login {
    box-sizing: border-box;
    position: relative;
    width: 18px;
    height: 3px;
    background-color: #fff;
    transition: 0.3s;
    display: block;
    margin: auto;
}
.container>.login-button >.icon-login::after {
    content: ' ';
    box-sizing: border-box;
    position: absolute;
    left: 8px;
    height: 12px;
    width: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    top: -4px;
}

最后是鼠标hover上的放大和阴影效果

.container>.login-button:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3) inset, 0 3px 6px rgba(0, 0, 0, 0.16), 0 5px 11px rgba(0, 0, 0, 0.23)
}
.container>.login-button:hover>.icon-login {
    -ms-transform: scale(1.2);
    =webkit-transform: scale(1.2);
    transform: scale(1.2);
}

至此,所有的css已经结束了,查看效果