A CSS a nyelvek egyedi osztályához tartozik, amelyet stíluslapnyelvnek neveznek. Elsősorban a weboldal prezentációjának meghatározására szolgál. Míg a HTML lehetővé teszi az oldal felépítésének megadását, a CSS -t kell használni a stílus kialakításához. Ellenkező esetben meglehetősen tetszetős webhelyet kap.
A CSS -re való összpontosítás az egyik legjobb módja annak, hogy javítsa webhelye vonzerejét, különösen, ha a felhasználói élmény javításáról van szó. Így növelheti forgalmát is. Kezdetnek használhat halmozott űrlapot.
Mi az a halmozott űrlap?
A halmozott űrlap lehetővé teszi speciális űrlap létrehozását, ahol a címkéket és a bemeneteket egymásra helyezheti, ahelyett, hogy vízszintes mintázatba helyezné őket.
Így teheti meg.
Kódolja a HTML -t
Használja a HTML elemet, , adatainak feldolgozásához. Adjon hozzá címkéket a megfelelő mezőkhöz, és rendelje hozzá a megfelelő beviteli mezőket. Ebben a példában arra kérjük a felhasználókat, hogy adják meg teljes nevüket és e -mail címüket az űrlap beviteli típusával szöveg , míg egy legördülő menü jön létre válassza ki az azonosítót hogy segítse őket az iparág kiválasztásában.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Ennek a kódrészletnek a futtatása azonban csak lágy formát eredményez a mezők függőleges egymásra rakása nélkül. És itt kell hozzáadnia a CSS -t.
megtudja, kié a telefonszám
Kódolja a CSS részt
Most hozzon létre egy külön stíluslapot, és adja hozzá a HTML -kódhoz a body tag előtt:
Ezután válassza ki a HTML szövegtörzsét, a beviteli típusokat és a tárolót, és formázza őket CSS -en keresztül. Ez magában foglalja a különböző CSS-tulajdonságokkal, például betűtípus-családdal, szélességgel, kitöltéssel, margóval, megjelenítéssel, szegéllyel stb. Végzett kísérletezést, és a kívánt értékek hozzáadását. Így egy halmozott űrlapot kap, amely megfelel az Ön preferenciáinak. Íme egy példa.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Ellenőrizze az alábbi kimenetet.
Most halmozott űrlapot hozhat létre CSS -ben
Ezzel a cikkel megtanulta, hogyan hozhat létre halmozott űrlapot CSS -ben. A gyakorlattal finomíthatja űrlapjait, és felhasználóbarátabbá teheti webhelyét.
A Microsoft Store nem működik Windows 10
A programozó játék neve „gyakorlat”. Csinosítsa CSS -készségeit nap mint nap kiállítási projektekkel, hogy stílusos webdesignerként és hatékonyabb webfejlesztővé váljon.
Részvény Részvény Csipog Email 10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhatSegítségre van szüksége CSS munkájában? Először is próbálja ki ezeket az alapvető CSS -kódpéldákat, majd alkalmazza őket saját weboldalain.
Olvassa tovább Kapcsolódó témák- Programozás
- Webfejlesztés
- CSS
Usman tartalom -marketingszakember, aki számos vállalkozásnak segített a digitális platformok organikus növekedésében. Szereti a programozást és az írást is, ami azt jelenti, hogy a technikai írást nagyon élvezi. Amikor nem dolgozik, Usman szívesen tölti az időt a tévéműsorok nézésével, a krikett követésével és az adatelemzésről.
Továbbiak Usman Ghani -tólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide