TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

CSS -tekstiruudun opetusohjelma

3

Tekstiruutuja käytetään esittelemään erityyppistä sisältöä, kuten infoviestejä, valikoita, sosiaalisia widgettejä, lainausmerkkejä jne. Sikäli kuin olemme tarkistaneet, että mikään teema ei oletuksena tarjoa muokattavia tekstiruutuja, ja sinun on tehtävä oma tarpeidesi mukaan. Tässä artikkelissa luomme erityyppisiä tekstiruutuja eri tarkoituksiin ja voit kopioida liittämällä koodin sivustoosi lisätäksesi widgetin.

Upotettu tekstiruutu

Jos haluat luoda vain yhden tai kaksi tekstiruutua, suositeltu tapa on käyttää sisäistä CSS: ää elementtitasolla sen sijaan, että lisäät CSS: n sivustotasolle. Alla on esimerkkikoodi, jolla kappale voidaan muuntaa taustaksi.

<p align=justify style="background-color:#02f3e5; border-radius:4px; font-size:16px; padding:15px; margin:5px;"><b> This is a Sample Textbox</b> </p>

Voit vain liittää koodin mihin tahansa sivusi runkoon ja se näyttää alla julkaistulta sivustolta:

Tämä on Esimerkkiteksti -ruutu, johon on lisätty taustaväri upotetun CSS: n avulla. Tämä on helpoin tapa lisätä tekstiruutuja sivustoosi.

Voit mukauttaa taustaväri- ja kirjasinmääritteitä kohdistaaksesi sivustosi laatikon.

Tekstiruudut tietoviestinä

Infoviestit ovat hyödyllisiä näytettäessä yleisölle erilaisia ​​viestityyppejä, kuten varoitus, hälytys, ilmoitus, vaara jne. Käytämme mahtavia kirjasinkuvakkeita lisätäksemme kuvakkeita tekstin eteen, ja alla oleva tietoviestiruudun CSS:

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css"> .webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; }

Infoviestiruudun HTML -koodi on seuraava:

<div class="webnots-information webnots-notification-box"> This is the info box - You can input as much or as little information! </div> <div class="webnots-question webnots-notification-box"> This is the help box - You can input as much or as little information! </div> <div class="webnots-tip webnots-notification-box"> This is the tip box - You can input as much or as little information! </div>

Voit lisätä erityyppisiä viestejä lisäämällä tarvittavan kuvakkeen ja alla on esimerkkejä infoviestiruuduista:

Tämä on inforuutu – Voit syöttää niin paljon tai vähän tietoa!

Tämä on ohjekirja – Voit syöttää niin paljon tai vähän tietoa!

Tämä on vihjelaatikko – Voit syöttää niin paljon tai vähän tietoa!

Tämä on ilmoitusruutu – Voit syöttää niin paljon tai vähän tietoa!

Tämä on menestysruutu – Voit syöttää niin paljon tai vähän tietoa!

Tämä on vaaralaatikko – Voit syöttää niin paljon tai vähän tietoa!

Tämä on varoitusruutu – Voit syöttää niin paljon tai vähän tietoa!

Lisätietoja ilmoitusviestilaatikoiden luomisesta.

Estä lainaukset tekstiruudulla

Sivustosi lohkolainaukset voidaan koristaa tekstikentillä, jotta se näyttää houkuttelevalta ja kauniilta sivustolla. Alla on yksi esimerkki lohkolainausten mukauttamisesta CSS: llä:

blockquote { font-style:italic; line-height:32px; font-size:20px; color:#fff; background: #3F51B5; margin:10px; padding: 15px 20px 15px 20px; border-radius: 5px; } blockquote:before, blockquote:after { position: relative; vertical-align: middle; font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; line-height: 0; color: #FBC02D; } blockquote:before { left: -5px; content: '201C'; } blockquote:after { content: '201D'; }

HTML: n pitäisi olla seuraavanlainen:

<blockquote> This is block quote element customized with CSS text box properties. You can customize more as you need... </blockquote>

Säätämällä taustan ja lainausmerkkien väriä saat seuraavat tulokset:

Tämä on lainauslainauselementti, joka on mukautettu CSS -tekstiruudun ominaisuuksilla. Voit muokata lisää tarpeen mukaan…

Tämä on lainauslainauselementti, joka on mukautettu CSS -tekstiruudun ominaisuuksilla. Voit muokata lisää tarpeen mukaan…

Tämä on lainauslainauselementti, joka on mukautettu CSS -tekstiruudun ominaisuuksilla. Voit muokata lisää tarpeen mukaan…

Lue lisää mukautettujen bootstrap -tyylisten lainausmerkkien luomisesta sivustollesi.

Valikkolaatikot

Tekstiruutuja voidaan käyttää valikoiden tai luetteloidun sisällön näyttämiseen, mikä säästää paljon tilaa sivustossasi. Tässä näytämme kaksi tällaista laatikkoa perusasioina, itse asiassa voit tehdä paljon enemmän.

Valikkoruudun 1 CSS:

.container-box { width: 300px; padding: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .block { display: block; width: 100%; padding-right: 0; padding-left: 0; background-color: #5cb85c; } .item-list { display: inline-block; padding: 6px 12px; margin-bottom: 5px; font-size: 20px; font-weight: 600; line-height: 28px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: lightyellow; }

HTML -valikko 1:

<div class="container-box"> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> </div>

Valikkoruutu 1 on alla julkaistulla sivustolla:

Valikkoruudun 2 CSS:

.box-column { width: 350px; border: 1px groove; padding: 5px; } .color-box { padding: 0; margin: 0; list-style: none; } .color-box li { color: #fff; padding: 10px 10px 10px 15px; background-color: brown; margin-bottom: 3px; font-size: 26px; }

Valikkoruudun 2 HTML:

<div class="box-column"> <h3>Opening Hours</h3> <ul class="color-box"> <li>Breakfast: 8AM - 11AM</li> <li>Grill Menu: 12AM - 12PM</li> <li>Live Music: 8AM - 11AM</li> </ul> </div>

Valikkoruutu 2 näyttää tältä:

Aukioloajat

  • Aamiainen: klo 8.00–11.00
  • Grillivalikko: klo 12.00-12.00
  • Elävää musiikkia: klo 8.00–11.00

Johtopäätös:

Tekstiruutujen luomiseen yksinkertaisella CSS: llä on lukuisia mahdollisuuksia. Yllä on vain muutama esimerkki, ja voit muokata taustaa, reunuksia, värejä ja tekstiä tarpeen mukaan. Voit pelata näillä perusesimerkeillä ja rakentaa lisää mukautettuja tekstiruutuja tarpeisiisi.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja