TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Opplæring i CSS -tekstboks

3

Tekstbokser brukes til å vise frem forskjellige typer innhold som infomeldinger, menyer, sosiale widgets, blokkeringstitler, etc. Så langt har vi ikke merket noe tema som standard som tilbyr tilpassbare tekstbokser, og du må lage din egen som passer dine behov. I denne artikkelen vil vi lage forskjellige typer tekstbokser for forskjellige formål, og du kan kopiere og lime inn koden på nettstedet ditt for å legge til widgeten.

Inline tekstboks

Når du bare vil lage en eller to tekstbokser, er den anbefalte måten å bruke innebygd CSS på elementnivå i stedet for å legge til CSS på nettstednivå. Nedenfor er en eksempelkode for å konvertere et avsnitt til en boks med bakgrunn.

<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>

Du kan bare legge til koden hvor som helst på sidens brødtekst, og den vil se ut som nedenfor på det publiserte nettstedet:

Dette er en eksempeltekstboks med bakgrunnsfarge lagt til med innebygd CSS. Dette er den enkleste måten å legge til tekstbokser på nettstedet ditt.

Du kan tilpasse bakgrunnsfargen og skriftattributtene for å justere boksen på nettstedet ditt.

Tekstbokser som infomeldinger

Informasjonsmeldinger er nyttige for å vise forskjellige stiler av meldinger til publikum som advarsel, varsel, kunngjøring, fare, etc. Vi bruker fantastiske ikoner for å legge til ikoner foran teksten, og CSS for infomeldingsboksen er gitt nedenfor:

<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; }

HTML -koden for infomeldingsboksen er som nedenfor:

<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>

Du kan legge til forskjellige typer meldinger ved å legge til det nødvendige ikonet, og nedenfor er noen av eksemplene på infomeldingsbokser:

Dette er infoboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er hjelpeboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er tipsboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er opplysningsboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er suksessboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er fareboksen – Du kan legge inn så mye eller så lite informasjon!

Dette er advarselsboksen – Du kan legge inn så mye eller så lite informasjon!

Finn ut mer om hvordan du oppretter meldingsbokser.

Blokker sitater med tekstboks

Blokk sitater på nettstedet ditt kan dekoreres med tekstbokser slik at det ser attraktivt og vakkert ut på nettstedet. Nedenfor er et eksempel på å tilpasse blokkeringssitater med CSS:

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 -koden skal være som nedenfor:

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

Ved å justere bakgrunnen og sitatfargen kan du oppnå følgende resultater:

Dette er blokktilbudselementet tilpasset CSS -tekstboksegenskaper. Du kan tilpasse mer etter behov …

Dette er blokktilbudselementet tilpasset CSS -tekstboksegenskaper. Du kan tilpasse mer etter behov …

Dette er blokktilbudselementet tilpasset CSS -tekstboksegenskaper. Du kan tilpasse mer etter behov …

Finn ut mer om hvordan du lager egendefinerte sitatblokk -sitater for nettstedet ditt.

Menybokser

Tekstbokser kan brukes til å vise menyer eller oppført innhold for å spare mye plass på nettstedet ditt. Her viser vi to slike bokser som grunnleggende, faktisk kan du gjøre mye mer.

CSS for menyboks 1:

.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 for menyboks 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>

Menyboksen 1 vil være som nedenfor på det publiserte nettstedet:

CSS for menyboks 2:

.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; }

HTML for menyboks 2:

<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>

Menyboksen 2 ser slik ut:

Åpningstider

  • Frokost: 08.00 – 11.00
  • Grillmeny: 12.00 – 12.00
  • Levende musikk: 08.00 – 11.00

Konklusjon:

Det er mange muligheter for å lage tekstbokser med enkel CSS. Over er bare noen få eksempler, og du kan tilpasse bakgrunnen, kantene, fargene og teksten etter behov. Du kan leke med disse grunnleggende eksemplene og bygge flere tilpassede tekstbokser for ditt behov.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon