Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)

Detaillierte Erklärung häufig verwendeter CSS-Stile (Layout)

Kompatibel mit neuen CSS3-Eigenschaften

In CSS3 können wir das Plugin prefixfree.min.js verwenden, um automatisch browserkompatible Eigenschaften zu CSS3-bezogenen Eigenschaften hinzuzufügen, sodass wir nicht für jede neue CSS3-Eigenschaft Eigenschaften hinzufügen müssen (eingeführt, wenn eine große Anzahl von CSS3-Projekten benötigt wird).

Inhaltslayout

Wenn h5 in die App eingebettet ist, wird unter dem ISO-Mobiltelefon die feste Schaltfläche unten (Kopf) mitgescrollt. Sie müssen das Inhaltslayout verwenden und dann padding-bottom oder padding-top verwenden, um die entsprechende Position leer zu lassen! ! !

Wenn Sie innerhalb des Inhalts scrollen müssen, müssen Sie den Textkörper und das HTML auf „Höhe: 100 %“ einstellen; dann muss der Inhalt auch auf „Höhe: 100 %“ eingestellt werden, damit Sie innerhalb des Inhalts scrollen können. Wenn Sie innerhalb des Textkörpers scrollen müssen, müssen Sie die Einstellung „Höhe: 100 %“ in HTML und Textkörper entfernen! ! Andernfalls wird der Body eingeschränkt und es wird nur die Hälfte des Inhalts angezeigt und es kann nicht gescrollt werden! ! !

Eine andere Möglichkeit, das Scrollen am unteren Rand der Popup-Maskenebene zu lösen, besteht darin, den Inhalt darunter über js auf body{height:100%;overflow:hidden;} zu steuern, wenn das Popup-Fenster angezeigt wird, und diesen Stil dann beim Schließen des Popup-Fensters zu entfernen! ! !

<Text>
     <Kopfzeile></Kopfzeile>
     <div Klasse="Inhalt"></div>
     <Fußzeile></Fußzeile>
</body>
.Inhalt {
    Polsterung oben: .88rem;
    -webkit-box-sizing: Rahmenbox;
    -moz-box-sizing: Rahmenbox;
    Box-Größe: Rahmenbox;
    maximale Breite: 750px;
    Breite: 100 %;
    Rand: 0 automatisch;
    Überlauf-x: versteckt;
    Höhe: 100%;
    Überlauf-y: automatisch;
    -webkit-overflow-scrolling: berühren;

Diese Layoutmethode kann das Problem lösen, dass beim Scrollen einer einzelnen Seite das Popup-Fenster beim Anklicken blockiert wird! ! !

Hinweis: Es kann nicht verwendet werden, wenn Sie die Höhe des Körpers berechnen müssen und wenn sich auf der Seite ein Formular befindet, müssen Sie „position: relative“ verwenden, um zu verhindern, dass die Android-Tastatur blockiert wird! ! ! ! Um das Problem zu lösen, dass Popup-Fenster nicht gescrollt werden, können Sie jedoch das Inhaltslayout hinzufügen, wenn das Popup-Fenster angezeigt wird, und das Inhaltslayout entfernen, wenn das Popup-Fenster geschlossen wird! ! !

 //Klicken Sie, um $(".reward-btn").click(function(){ zu erhalten.
            $(".reward-page").wrap("<div class='contentS'></div>");
            $(".insurance-box").anzeigen();
            $(".dialog2").anzeigen();
            
        });
        //Klicken Sie hier, um das große Popup-Fenster zu schließen. Schaltfläche $(".closeDia").click(function(){
            $(diese).parent().parent().hide();
            $(".dialog2").hide();
            $(".reward-page").unwrap("<div class='contentS'></div>");
        });

Szenario 2: Im Inhaltslayout müssen Sie ein Hintergrundbild für die Seite festlegen. Sie können ein großes Div unter den Inhalt packen und dann das Hintergrundbild der gesamten Seite für dieses Div festlegen. Auf diese Weise wird das Hintergrundbild gescrollt, wenn der Inhalt einen Bildschirm überschreitet, anstatt das Hintergrundbild direkt auf dem Inhaltscontainer festzulegen. Wenn Sie das Hintergrundbild direkt auf diesem Container festlegen, wird das Hintergrundbild nicht gescrollt!!!

Allgemeines Kopfzeilenlayout

Manchmal gibt es auf beiden Seiten Text oder Symbole, aber der Titel in der Mitte ist in der Mitte fixiert und seine ungefähre Position ist wie folgt, aber der Inhalt ändert sich! !

Der Aufbau ist wie folgt

<div class="head"> <a class="head-left">Einstellungen</a> Persönliches Center <a class="head-right">Mehr</a></div>

CSS:
.Kopf{
    Position: relativ;
    Breite: 100 %;
    Höhe: 88px;
    Zeilenhöhe: 88px;
    Textausrichtung: zentriert;
}
.Kopf-links, .Kopf-rechts{
    Position: absolut;
    Höhe: 88px;
    Zeilenhöhe: 88px;
}
.Kopf-links {
    links: 30px;
}
.Kopf-rechts {
    rechts: 30px;
}

Analoges Pull-Up-Laden

  $(Fenster).scroll(Funktion() {
                var winH = $(window).height();
                var scrH = $(window).scrollTop();
                var htmH = $(document).height();
                //Lösen Sie das Problem des Herunterscrollens bis zur Hälfte der Maskenebene$(".fixed").height(htmH);
                
                wenn(winH + scrH >= htmH) {
                    Konsole.info(tabActive);
                    wenn(tabActive==0){
                        konsole.info(1111);
                        wenn(nächste_Seite){
                            wenn(ajax_lock == true)
                            {
                                ajax_lock = falsch;
                                Seite++;
                                getRecord(Seite,0);
                                
                            }
                        }
                    }
});

1. Verschönern Sie das Kontrollkästchen

Wirkung

HTML Quelltext

<Bezeichnung>
<input id="rememberPwdCheck" class="checkbox versteckt" type="checkbox" checked="aktiviert">
<i class="Symbol Symbol-Checkbox"></i>
<span class="rememberPwdtxt">Kontopasswort merken</span>
</Bezeichnung>

CSS Code

.versteckt {
     Anzeige: keine;
}
.checkbox:aktiviert ~.icon-checkbox {
    Hintergrund: URL (../images/yes_15.png) keine Wiederholung;
    Hintergrundgröße: 0,3rem 0,25rem;
}
.icon-checkbox {
    Breite: 0,3rem;
    Höhe: 0,3rem;
    Rand rechts: 0,1rem;
    Rand: 0,02rem durchgezogen #d7d7d7;
    Randradius: 0,06rem;
}
.Symbol {
    Anzeige: Inline-Block;
    vertikale Ausrichtung: Mitte;
}

js

wenn(!$('#agreeTerm').ist(":checked")){
$.alert('Bitte aktivieren Sie das Kontrollkästchen, um den Versicherungsbedingungen und wichtigen Hinweisen und Erklärungen zuzustimmen.');
zurückkehren;
};
<div Klasse="allCheck">
       <input type="checkbox" id="allCheck" class="check hidden">
       <label for="allCheck" class="check-icon">Alles auswählen</label>
</div>
.allCheck {
    Polsterung: 0,1rem 0,3rem;

}
.Check-Symbol {
    Anzeige: Inline-Block;
    Breite: 1,5rem;
    Polsterung links: .5rem;
    Hintergrund: URL("../../assets/select-no.png")keine Wiederholung links Mitte;
    Hintergrundgröße: .42rem .42rem;
}
.check:geprüft ~ .check-icon {
     Hintergrund: URL("../../assets/selected.png")keine Wiederholung links Mitte;
     Hintergrundgröße: .42rem .42rem;
}

2. Radiobuttons simulieren

Ähnliche Effekte

HTML Quelltext

<dl id="" Klasse="Geld">
    <dt>Entschädigungsbetrag auswählen<span class="p_help help">Entschädigungsbeschreibung</span></dt>
    <dd>
        <span>
            <input id="Geldtyp_0" name="Geldtyp" class="selection-rd hidden" type="radio" value="1" checked="">
            <label class="selection-lb" für="money_type_0">10 Yuan</label>
        </span>
        <span>
            <input id="Geldtyp_1" name="Geldtyp" class="selection-rd hidden" type="radio" value="2">
            <label class="selection-lb" für="money_type_1">20 Yuan</label>
        </span>
        <span>
            <input id="Geldtyp_2" name="Geldtyp" class="selection-rd hidden" type="radio" value="3">
            <label class="selection-lb" für="money_type_2">50 Yuan</label>
        </span>
    </dd>
</dl>

CSS Code

.selection-rd:geprüft ~ .selection-lb {
    Farbe: #e44;
    Rand: 1px durchgezogen #e44;
}
.Auswahl-lb {
    Anzeige: Inline-Block;
    Rand: 33px 30px 30px 0;
    Breite: 150px;
    Höhe: 64px;
    Zeilenhöhe: 64px;
    Leerzeichen: Nowrap;
    Hintergrundfarbe: #fff;
    Rand: 1px durchgezogen #bbc;
    Rahmenradius: 5px;
    Textausrichtung: zentriert;
    Schriftgröße: 32px;
}

JQ-Code

var Lohnstufe=$("input[name='Geldtyp']:geprüft").val();

3. Der mittlere Text, die horizontalen Linien auf beiden Seiten sind zentriert

Wirkung

Code

<div class="title-center"><div>Informationen für Studierende</div></div>
/*Horizontale Linien auf beiden Seiten des mittleren Textes*/
.Titel-Mitte {
Position: relativ;
Breite: 100 %;
Textausrichtung: zentriert;
Höhe: 100px;
Zeilenhöhe: 100px;
Schriftgröße: 28px;
Farbe: #4d72e2;
}
.title-center div{
Anzeige: Inline-Block;
Polsterung: 0 20px;
}
.title-center:vorher, .title-center:nachher{
Anzeige: Inline-Block;
Position: relativ;
Inhalt:"";
Höhe: 2px;
Breite: 48px;
oben: -6px;
Hintergrundfarbe: #4d72e2;
}

Wenn rem als Einheit verwendet wird, erscheint 1px zu groß. Ändern Sie .title-center:before und .title-center:after wie folgt:

.title-center:vorher, .title-center:nachher {
Anzeige: Inline-Block;
Position: relativ;
Inhalt: "";
Höhe: 1px;
Breite: 1,88rem;
oben: -.1rem;
Hintergrundfarbe: #fd734f;
-webkit-transform: MaßstabY(0,5); 
transformieren: scaleY(0,5);
-webkit-transform-origin: 0 0;
Transform-Ursprung: 0 0;
}

Ultimative Version, Rem-Einheit, adaptive Länge der horizontalen Linie! ! ! !

<div Klasse="flexbox flexbox-middle">
    <span class="flexchild border-center"></span>
    <span style="padding:0 .2rem;">Ich möchte es zentrieren und die horizontalen Linien auf beiden Seiten ausrichten</span>
    <span class="flexchild border-center"></span>
</div>


.border-center{
/*display:inline-block; Wenn Sie das Flexchild-Layout verwenden, können Sie dieses Attribut für das Element nicht festlegen, da sonst -webkit-box-flex: 1; fehlschlägt*/
Höhe: 1px;
Hintergrundfarbe: #fd734f;
-webkit-transform: MaßstabY(0,5);
transformieren: scaleY(0,5);
-webkit-transform-origin: 0 0;
Transform-Ursprung: 0 0;
}

Methode 2, um den Text auf beiden Seiten zu zentrieren

Rendern 

<div class="card-title"><span class="text">Lass dich nicht im Stich, wenn die Bonbonschachtel gut ist</span></div>

CSS

.Kartentitel {
Polsterung oben: .4rem;
Schriftgröße: .34rem;
Farbe: #3c3c3c;
Textausrichtung: zentriert;
Schriftstärke: fett;
}

.Kartentitel .text {
Position: relativ;
}
.card-title .text:vorher ,.card-title .text:nachher {
Inhalt: "";
Anzeige: Inline-Block;
Position: absolut;
Breite: .4rem;
Höhe: .32rem;
Hintergrund: URL('../images/card-title.png')keine Wiederholung;
Hintergrundgröße: 100 % 100 %;
oben: 50 %;
Rand oben: -.16rem;

}
.Kartentitel .text:vor{
links: -.51rem;
}
.Kartentitel .text:nach{
transformieren: Y-Drehung (180 Grad);
-webkit-transform:rotateY(180deg);
rechts: -.51rem;
}

4. So zentrieren Sie Symbole horizontal und vertikal (REM-Einheiten)

Verwenden Sie „background-size“, um die Größe des Hintergrundbilds festzulegen, und verwenden Sie dann „background-position:center center;“, um das Hintergrundbild horizontal und vertikal relativ zum Element zentriert einzustellen, wobei die Breite des Elements der Breite des Hintergrundbilds und die Höhe der Originalhöhe entspricht.

Sass schreibt @mixin headerIcon($width,$height,$url,$position) {
Position: absolut;
$position: .3rem;
oben: 0;
Breite: $width; //Symbolbreite Höhe: .88rem; //Headerhöhe Hintergrund: url($url) no-repeat;
Hintergrundposition: links Mitte; 
Hintergrundgröße: $Breite $Höhe;
Schriftgröße: .3rem;
Textausrichtung: links;
}

Methode 2: 

html:

<ein>
     <i class="foot-nav1-Symbol"></i>
     <span>Startseite</span>
</a>

CSS:

ein {display:inline-block;}
.foot-nav1{   
   Breite: .66rem;
    Höhe: .66rem;
    Anzeige: Block;
    Rand: 0 automatisch;
    Hintergrund: URL();
}
Spanne {
   Anzeige: Block;
    Zeilenhöhe: .24rem;
    Textausrichtung: zentriert;
    Schriftgröße: .24rem;
    Höhe: .24rem;
    Rand unten: .8rem;
    Farbe: #666;
}

5. Allgemeine Einstellungen für den Header-Stil

<div><a></a><h1>Ich bin der Titel</h1><a></a></div>
.header{
      Breite: 100 %;
      Höhe: .88rem;
      Position: absolut;
      links: 0;
      oben: 0;
      Z-Index: 998;
      Rahmen unten: 1px durchgezogen #f1f1f1;
      Textausrichtung: zentriert;     
      h1{
          Schriftgröße: .36rem;
          Schriftfamilie: PingFangSC-Medium, serifenlos; 
      }
      .linkes-Symbol{
        Position: absolut;
        Breite: .88rem;
        Höhe: .88rem;
        links: .3rem;
        oben: 0;
        Hintergrund: URL('../../assets/back-icon.png') keine Wiederholung;
        Hintergrundgröße: .17rem .35rem;
        Hintergrundposition: links Mitte;
        }
 .rechtes Symbol{
        Position: absolut;
        Breite: .88rem;
        Höhe: .88rem;
        rechts: .3rem;
        oben: 0;
        Hintergrund: URL('../../assets/back-icon.png') keine Wiederholung;
        Hintergrundgröße: .17rem .35rem;
        Hintergrundposition: links Mitte;
        }

6. Gemeinsames Formularlayout

Wirkung:

Code:

<div Klasse="Abschnitt2">
               <div class="des-title"><span class="text">Bitte füllen Sie die folgenden Informationen sorgfältig aus</span></div>
                <ul>
                    <li Klasse="Flexbox">
                        <input type="text" placeholder="Bitte geben Sie Ihren Namen ein" class="flexchild fill-content" id="tbName2">
                    </li>                        
                    <li Klasse="Flexbox Flexbox-Mitte">
                        <span class="fill-label">Lieferadresse:</span>
                        <span class="Adresse" style="Überlauf: versteckt;">
                            <input id="provinceCity2" name="rec_address_select" class="txt" placeholder="Bitte auswählen" readonly="schreibgeschützt">
                            <input id="detailssq2" type="hidden" readonly="schreibgeschützt">
                            <i class="ui-icon Rmore-icon noborder"></i>
                         </span>
                    </li>
                    <li Klasse="Flexbox">
                        <input type="text" placeholder="Bitte geben Sie die detaillierte Adresse ein" class="flexchild fill-content" id="adressDetail">
                    </li>
                </ul>
            </div>

CSS:

.Abschnitt2 li {
    Listenstil: keiner;
    Position: relativ;
    Breite: 500px;
    Rand: 0 automatisch;
    Rand: 1px durchgezogen #ffd6b9;
    Box-Größe: Rahmenbox;
    Polsterung: 17px 30px;
    Hintergrundfarbe: #fff;
    Rand oben: 20px;
    Rahmenradius: 40px;
}

.section2 li Eingabe {
    Hintergrundfarbe: transparent;
    Rand: 0 keine;
    Farbe: #333;
    Gliederung: keine;
    Position: relativ;
    Schriftgröße: 26px;
    Breite: 435px;
    Z-Index: 102;
}

html:

<li Klasse="Flexbox">
     <label>Dein Schatz:</label>
     <input type="text" placeholder="Bitte geben Sie den Namen Ihres Liebhabers ein" class="flexchild" id="loveName">
</li>

CSS:

.sec3 li {
    Position: relativ;
    Höhe: .88rem;
    -webkit-box-align: Ende;
    -moz-box-align: Ende;
    -ms-flex-align: Ende;
    -webkit-align-items: Flex-Ende;
    Elemente ausrichten: Flex-Ende;
    Box-Größe: Rahmenbox;
}
.sec3 li Bezeichnung {
    Polsterung unten: .2rem;
}
.sec3 li Eingabe {
    Position: relativ;
    Breite: 4,86rem;
    Hintergrund: transparent;
    Rand: 0 keine;
    Rahmen unten: 1px durchgezogen #dc115b;
    Polsterung unten: .2rem;
    Farbe: #efc283;
    Schriftgröße: .28rem;
    Randradius: 0;
}

7. Der Text unter dem Bild oben ist horizontal zentriert

Wirkung

CSS-Stile

.einkaufszentrum .details-fuß .details-kefu {
    Breite: 1,56rem;
    Höhe: .99rem;
    Rahmen rechts: 1px durchgezogen #f1f1f1;
}

.mall .details-foot .details-kefu ich {
    Anzeige: Block;
    Breite: .42rem;
    Höhe: .42rem;
    Rand: .12rem automatisch .06rem;
    Hintergrund: URL (Daten: Bild/png; Base64, iVBORw0KGgoAAAANSUhEUgAAACoAAAQCAYAAADFw8lbAAAAGXRFW…7oxfKRixjo4VSJhW/sUYi1M9kR4RNoUZHpQEuX+Z/pXwEGAHRzn0c9HGr7AAAAAElFTkSuQmCC) keine Wiederholung;
    Hintergrundgröße: 100 % 100 %;
}

.einkaufszentrum .details-fuß .details-kefu-name {
    Textausrichtung: zentriert;
}

8. Fortschrittsbalken für die Beantwortung von Fragen

Es wird verwendet, um den Fortschritt bei der Beantwortung von Fragen anzuzeigen. Der Effekt ist wie folgt

Wobei img die Hintergrundfarbe der Form ist (der kleine Kreis ist transparent). Und „recommend-jd-bg“ ist die Hintergrundfarbe des Fortschrittsbalkens und „recommend-jd-ks“ ist die Farbe, die den Fortschritt steuert! ! , wobei der Z-Index von img>recommend-jd-bg>recommend-jd-ks

html:

<div Klasse="empfehlen-jd">
       <div Klasse="empfohlen-jd-bg"></div>
       <div Klasse = "recommend-jd-ks" Stil = "Breite: 37,5 %;"></div>
       <img src="/src/m7.0/images/recommend/jd.png">
</div>

CSS:

.empfehlen-jd {
    Breite: 6,43rem;
    Position: absolut;
    oben: 1,59rem;
    links: .54rem;
}
.empfehlen-jd-bg {
    Breite: 100 %;
    Höhe: .31rem;
    Hintergrund: #fff;
    Position: absolut;
    oben: 0;
    Z-Index: 97;
}
.empfehlen-jd-ks {
    Breite: 12,5 %; //Dies wird von js gesteuert und richtet sich nach dem Fortschritt der Fragenanzahl!
    Höhe: .31rem;
    Hintergrund: #4a90ff;
    Position: absolut;
    oben: 0;
    Z-Index: 98;
}
.empfehlen-jd img {
    Breite: 100 %;
    Anzeige: Block;
    Position: absolut;
    oben: 0;
    Z-Index: 99;
    Höhe: .31rem;
}

Fortschrittsbalken 2 

<div Klasse="Fortschrittsleiste">
    <span class="progressPer" style="width: 2rem;">
        <span class="Geldkasse">
           <span class="moneyText">¥0,01</span>
        </span>
   </span>
</div>

.progressBar {
    Rand: .3rem automatisch .1rem;
    Breite: 6,3rem;
    Höhe: .1rem;
    Hintergrundfarbe: rgb(72, 11, 29);
}

.progressPer {
    Position: relativ;
    oben: 0;
    links: 0;
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: .1rem;
    Hintergrundfarbe: #efc283;
}
.moneyBox {
    Position: absolut;
    rechts: -.53rem;
    oben: .3rem;
    Anzeige: Inline-Block;
    Breite: 1,06rem;
    Höhe: .4rem;
    Hintergrund: URL (../images/moneyBox.png) keine Wiederholung;
    Hintergrundgröße: 100 % 100 %;
}
.moneyBox .moneyText {
    Position: absolut;
    unten: 0;
    links: 0;
    Breite: 1,04rem;
    Höhe: .34rem;
    Zeilenhöhe: .34rem;
    Textausrichtung: zentriert;
    Farbe: #efc283;
    Schriftgröße: .26rem;
}

9. Die Fragen 1-10 des Tests befinden sich alle auf derselben Seite

10. Entfernen Sie das Dropdown-Feldlogo der ausgewählten und fügen Sie die folgenden Eigenschaften hinzu

wählen {
    Hintergrund: transparent;
        Rand: 0 keine;
        Umriss: keiner;
       Aussehen: keines;
    -moz-Auftritt:keines;
    -webkit-Erscheinungsbild: keines;

}

11. Ändern Sie den Eingabeplatzhalterstil

.detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    Schriftgröße: .26rem;
    Farbe: #b2b2b2;
    Deckkraft: 1;
}
.detail-page input:-moz-placeholder { /* Mozilla Firefox 4 bis 18 */
   Schriftgröße: .26rem;
   Farbe: #b2b2b2;
   Deckkraft: 1;
}
.detail-page input::-moz-placeholder { /* Mozilla Firefox 19+ */
   Schriftgröße: .26rem;
   Farbe: #b2b2b2;
   Deckkraft: 1;
}
.detail-page input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   Schriftgröße: .26rem;
   Farbe: #b2b2b2;
   Deckkraft: 1;
}

12. Wenn Sie deaktiviert zur Eingabe hinzufügen, wird die Farbe grau. Ändern Sie die Farbe wie folgt

Eingabe:deaktiviert{
      Rand: 1px durchgezogen #DDD;
      Hintergrundfarbe: #F5F5F5;
      Farbe: #ACA899;
}

13. Mehrere Textzeilen links- und rechtsbündig ausrichten:

P { 

   Textausrichtung: Blocksatz;
  Textausrichtung: zwischen Ideogrammen;

}

Wirkung

14. Richten Sie die beiden Enden einer einzelnen Textzeile aus. So erreichen Sie beispielsweise die folgende Ausrichtung einer einzelnen Textzeile

Methode 1: Pseudoklasse verwenden:

html:

<div Klasse="Zeile">
    <div Klasse="öffentlich">Name</div>
    <b>:</b>
    <b>Lin Xiao</b>
</div>
<div Klasse="Zeile">
    <div class="public">Personalausweis</div>
    <b>:</b>
    <b>111111111111</b>
</div>
<div Klasse="Zeile">
    <div class="public">Mobiltelefonnummer</div>
    <b>:</b>
    <b>141000000</b>
</div>

CSS:

.Linie{
 Breite: 100 %;
 Höhe: 15px;
 Rand: 5px;
}
.öffentlich{
 Breite: 80px;
 Höhe: 100 %;
 Anzeige: Inline-Block;
 Textausrichtung: Blocksatz;
 vertikale Ausrichtung: oben;
}
.public::nach{
 Inhalt:"";
 Anzeige: Inline-Block;
 Breite: 100 %;
 Überlauf: versteckt;
 Höhe: 0;
}

Methode 2 löst das Problem durch die Verwendung von Buchstabenabständen:

html:

<span style="Schriftgröße: 12px;"><dl Klasse="hotsearch" style="Breite: 300px;">  
<dt>Beliebte Suchanfragen</dt>  
<dd><a href="#" target="_blank" ref="nav" class="w3">Fernsehen</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">Sexy und schön</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">Hohe Absätze</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Mobil</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Ausrichtung</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">Jeans</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">Kleine Jade</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Startseite</a></dd>  
</dl></span>

CSS:

.hotsearch dd{  
schweben: links;  
Zeilenhöhe: 24px;  
Rand rechts: 30px;  
Überlauf: versteckt;  
Textausrichtung: zentriert;  
width: 4em; /*Dieser Wert hängt davon ab, wie viele Zeichen maximal angezeigt werden können, wenn es x ist, dann ist es x em*/  
}  
.hotsearch dd a{  
Anzeige:Block;  
}  
.w2{  
letter-spacing:2em; /*Wenn y Zeichen ausgerichtet werden müssen, dann (xy)/(y-1), hier (4-2)/(2-1)=2em */  
Rand rechts: -2em; /*dasselbe wie oben*/  
}  
.w3{  
letter-spacing:0.5em; /*Wenn y Zeichen ausgerichtet werden müssen, dann (xy)/(y-1), hier (4-3)/(3-1)=0.5em */  
Rand rechts: -0,5em; /*dasselbe wie oben*/  
}

Wirkung

15. Gestalten Sie den Bildladevorgang hochgradig adaptiv

Anwendungsszenario: Wenn beim Seitenlayoutprozess ein Karussell oder ein großes Bild angezeigt wird und sich unter dem Bild andere Inhaltsblöcke befinden, werden beim Laden des Bildes die Elemente darunter nach oben ausgeführt, da die Höhe 0 ist, und das Bild wird geladen. Das Element läuft herunter und gibt dem Benutzer ein nervöses Gefühl.

Lösung: Setzen Sie ein Div auf die äußerste Ebene des Bildes und legen Sie für dieses Div den folgenden Stil fest

.img-box {
        Überlauf: versteckt;
        Breite: 100 %;
        Höhe: 0;    
        Polsterung unten: 52 %; 
        /*Methode 2*/
        Breite: 100 %;
        /*Höhe im Verhältnis zur Breite des übergeordneten Elements*/
        Höhe: 52%vw;
        Hintergrund:#eee;
}

16. Implementieren Sie Auslassungspunkte, wenn der Text das Limit überschreitet … (die Breite muss festgelegt werden. Wenn das übergeordnete Element ein flexibles Layout verwendet, muss in „display: flex“ die Mindestbreite „0“ festgelegt werden, andernfalls schlagen die Auslassungspunkte fehl!!)

.ellipsis {
    Überlauf: versteckt;
    Textüberlauf: Auslassungspunkte;
    Leerzeichen: Nowrap;
}
.ellipsis-2l {
    Anzeige: -webkit-box;
    Überlauf: versteckt;
    Textüberlauf: Auslassungspunkte;
    -webkit-box-orient: vertikal;
    -webkit-line-clamp: 2; // Welche Zeile?

17. Vertikale Bildlaufleiste

Um diesen Effekt zu erzielen, muss jeder Punkt mit der Zeit ausgerichtet sein. Sie können die Punkte in dasselbe Div wie das Datum setzen und dann die horizontale Linie als Hintergrundbild für den gesamten Datensatz verwenden.

html:

<div Klasse="Liste">
    <div Klasse="Listenelement">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Heute</span></div>
        <div class="list-item-award yhj">2-Yuan-Gutschein, kein Schwellenwert verfügbar<a class="go">Gehen Sie und verwenden Sie></a></div>
        <div class="list-item-text">Angemeldet, 1 weiße Taubenmünze erhalten</div>
    </div>
    <div Klasse="Listenelement">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Heute</span></div>
        <div class="list-item-award yhj">2-Yuan-Gutschein, kein Schwellenwert verfügbar<a class="list-btn">Gehen Sie und verwenden Sie ihn></a></div>
        <div class="excode">Bitte in der iQiyi-App einlösen, Einlösecode: testPw5079</div>
        <div class="list-item-text">Angemeldet, 1 weiße Taubenmünze erhalten</div>
    </div>
    <div Klasse="Listenelement">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>28.09.2018</span></div>
        <div class="list-item-text">Angemeldet, 1 weiße Taubenmünze erhalten</div>
    </div>
    <div Klasse="Listenelement">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Heute</span></div>
        <div class="list-item-award yhj">2-Yuan-Gutschein, kein Schwellenwert verfügbar<a class="list-btn">Gehen Sie und verwenden Sie ihn></a></div>
        <div class="excode">Bitte in der iQiyi-App einlösen, Einlösecode: testPw5079</div>
        <div class="list-item-text">Angemeldet, 1 weiße Taubenmünze erhalten</div>
    </div>
</div>

CSS:

.Liste {
    Polsterung oben: .1rem;
    Polsterung unten: .1rem;
    Schriftgröße: .3rem;
    Farbe: #333;
    Hintergrundfarbe: #fff;
}
.Listenelement {
    Breite: 100 %;
    Rand links: .32rem;
    Rand oben: -.15rem;
    Polsterung unten: .4rem;
    Hintergrund: URL("../images/border.png") keine Wiederholung .1rem .21rem;
    Hintergrundgröße: 1px 100 %;
}
  .progres2-item {
      Anzeige: Inline-Block;
      Rand rechts: .25rem;
      Breite: .21rem;
      Höhe: .21rem;
      Hintergrundfarbe: #4d72e2;
      Randradius: 50 %;
  }

/*Das letzte hat keine gerade Linie, was bedeutet, dass es keinen Hintergrund gibt. Es gibt auch keinen Hintergrund, wenn es nur einen gibt*/
.list-item:letztes-vom-Typ{
    Hintergrund: transparent;
}
.list-item-award,.list-item-text {
    Rand links: .5rem;
}
.Listenelement-Auszeichnung{
    Polsterung links: .53rem;
    Rand unten: .12rem;
    Rand oben: .22rem;
    
}
.Listenelement-Text {
    Breite: 100 %;
    Polsterung links: .46rem;
    Polsterung unten: .16rem;
    Hintergrund: URL("../images/sign-icon.png") keine Wiederholung links .05rem;
    Hintergrundgröße: .32rem .25rem;
    Schriftgröße: .26rem;
    Farbe: #808080;
    Box-Größe: Rahmenbox;
    Rahmen unten: 1px durchgezogen #f4f4f4;
}
.list-item:letztes-vom-Typ .list-item-text {
    Rahmen unten: 0 keine;
}
.Listenelement .Listenbtn {
    Polsterung links: .1rem;
    Textdekoration: Unterstreichen;
    Schriftgröße: .28rem;
    Farbe: #316cec;
}

18. Horizontaler Linienhintergrund am unteren Rand des Textes

<div class="login-title">Lassen Sie die kleine weiße Taube wissen, dass Sie kein Roboter sind! </div>

.login-titel {
    Position: relativ;
    Höhe: .39rem;
    Rand oben: .4rem;
    Schriftgröße: .34rem;
    Farbe: #fff;
    Textausrichtung: zentriert;
}
.login-title:nach {
    Inhalt: "";
    Position: absolut;
    Breite: 5,05rem;
    Höhe: .21rem;
    Hintergrundfarbe: #fe923f;
    z-Index: -1;
    links: 0;
    rechts: 0;
    Rand: 0 automatisch;
    unten: 0;
}

Anhang: Zusammenstellung häufig verwendeter CSS-Stile

1. Hintergrundbild passt sich dem Bildschirm an

.Hintergrund{
  Position: fest;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Mindestbreite: 1000px;
  Z-Index: -10;
  Zoom: 1;
  Hintergrundfarbe: #fff;
  Hintergrund: URL (../../assets/[email protected]) keine Wiederholung;
  Hintergrundgröße: Abdeckung;
  -webkit-Hintergrundgröße: Abdeckung;
  -o-Hintergrundgröße: Abdeckung;
  Hintergrundposition: Mitte 0;
}

2. Hochadaptiver Bildschirm

.Höhe{
  Breite: 200px;
  Mindesthöhe: 400px;
  Überlauf: automatisch;
  Höhe: 100vh;
  Anzeige: -webkit-flex;
}

Dies ist das Ende dieses Artikels mit einer detaillierten Erklärung häufig verwendeter CSS-Stile (Layouts). Weitere relevante Inhalte zu CSS-Stillayouts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger

>>:  Vue-Grundlagen MVVM, Vorlagensyntax und Datenbindung

Artikel empfehlen

So gehen Sie mit dem vom Linux-System gemeldeten Warnproblem xfs_vm_releasepage um

Problembeschreibung Auf mehreren Rechnern wurden ...

So verwenden Sie @media in mobilen adaptiven Stilen

Allgemeiner Handy-Stil: @media alle und (Ausricht...

Ubuntu 20.04-Desktopinstallation und Aktivierung der Root-Berechtigung sowie Details zur SSH-Installation

Der Artikel zeichnet hauptsächlich den einfachen ...

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

1. Umsetzungsideen Der Zweck der Schnittstellensi...

Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).

Im vorherigen Artikel habe ich die Funktion von V...

JavaScript implementiert das Ändern der Farbe einer Webseite über einen Schieberegler

Hallo zusammen, als ich mir heute das HTML des We...

Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

In diesem Artikelbeispiel wird der spezifische Co...

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

vue-router hat zwei Modi Hash-Modus Verlaufsmodus...

Bereitstellungsdokument für die Sicherheitseinstellungen des Win2008-Servers (empfohlen)

Ich hatte schon vor Neujahr an dem Projekt gearbe...

jQuery implementiert die Funktion zum Ziehen von Bildern mit der Maus

In diesem Beispiel wird jQuery verwendet, um eine...

So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL

Inhaltsverzeichnis 1. Sicherung 1.1 Vollständig v...

So verwenden Sie Tinymce in Vue3.0+ und implementieren die Funktion zum Hochladen mehrerer Bilder und zum Bearbeiten der Formel zum Hochladen von Dateien

Zugehörige Dokumente Ein Teil dieses Artikels wir...

Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus

Verwenden von mock.js im Vue-Projekt Auswahl des ...

Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten

1. Optimierung häufig verwendeter HTML-Tags HTML ...

Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

Manchmal kann das Thema eines Projekts nicht jede...