Lekerekített sarkok a CSS és HTML
Nagyon gyakran, webes tervezők munkáját megváltoztatja az alakját geometriai formák, képek, fotók, stb így lekerekített sarkokkal. Ez adja a projekt teljesség és szép design.
Vannak különböző módon lehet átalakítani a bonyolultsága a végrehajtása egy normális téglalap négyszög lekerekített sarkokkal. Megnézzük a két legnagyobb egyszerűen és gyorsan, és megtanulják, hogy nem a kép és a keret a kép körül, lekerekített sarkok a website design és weboldalakat:
1. lekerekített sarkok CSS és HTML-kódot a bejegyzés style.css stíluslap.
2. sarkok kerekítés HTML kódot anélkül írásmóddal fájlt.
3. Képek, lekerekített sarkokkal. A keret a kép körül HTML.
1. lekerekített sarkok CSS és HTML-kódot a bejegyzést a stíluslap style.css
Vegyük az első eljárás egy téglalap, lekerekített sarkokkal CSS és HTML-kódot a bejegyzés style.css stíluslap.
Mi az a CSS
CSS - Cascading Style Sheets van (Cascading Style Sheets - CSS), egy speciális kódot. Vele, akkor lehet változtatni a betűtípust. alakja és színe elemekkel. A webes alkalmazások pozícióba elemek az oldalon. tartalmaznia háttérképeket. CSS3 legújabb verzióját a CSS fejlesztés.
Munka CSS és HTML kódok és fájlok egyszerű és megfizethető. A lényeg, hogy mindent nagyon lassan és óvatosan.
Készítsen téglalap kerettel CSS
Ábrázolni egy egyszerű online geometriai téglalap, meg kell leírni annak paramétereit: hosszúság, magasság, alakú, színes, a háttér színét a blokk, és ha szükséges, keretstílusokhoz (vastagság, szín, stb.) Mert ebben a formában a következő CSS egység, amely ismerteti stílusok (paraméterek) a téglalap:
A színkód megadott hexadecimális lehet hat karakterből áll (a teljes szám), vagy három karakter (rövidítve kód). Hogy csökkentse a színkódot is lehet abban az esetben, véletlen az első számjegy a második, harmadik, negyedik és ötödik-hatodik. Például # BB00CC rövidített kód felírható # b0c. A betűk A, B, C, D és F egy színkódot, kizárólag latinul.
Jelentés 3px a határ menti attribútum jelzi a szélessége a keret.
Miután belépett a fájlt style.css stílusok tudjuk mutatni a téglalap bárhol az oldalon. Ehhez helyezze a HTML tag azon a helyen, ahol megjelenik egy téglalap. A címke így néz ki:
Ennek eredményeként a kibocsátó szerezni egy téglalapot a kerettel.
Hogyan lehet lekerekített sarkok CSS
Hogy kerek a sarkokat segítségével border-radius attribútumot.
Mi csak hozzá az attribútumot. Ez általában kijelzi az eredményt a kerekítés az újabb verziójú böngésző, de sok felhasználó még mindig a régebbi verziók, ahol ez a tulajdonság nem működik megfelelően. Ezért a kompatibilitás, akkor adjunk hozzá még néhány leírások attribútum közvetlenül össze van kötve adott böngészők, a mi blokk style.css fájlt, hogy a következő kódot:
HTML-div tag ad nekünk egy téglalap keretben lekerekített sarkok:
Hogyan szöveget egy keretben
A szállás egy téglalapot szövegének meg kell adni a CSS blokk attribútum szövegét francia széleihez padding. és HTML-címke tartalmazza a kívánt szöveget, például „pib9.ru”. Így CSS készülék a következő formában:
és HTML-tag a kérdés a szöveg fog kinézni:
Kapunk egy négyszög lekerekített sarkok és a szöveget:
Ha a kódot, hogy távolítsa el a szélesség és a magasság a téglalap méretét leírását attribútumokat. lehet kapni ezeket a formákat, lekerekített sarkok:
Ebben az esetben, hogy a forma közepes méretei: hosszúság mezőt megfelel a szélesség és a magasság változik, ahogy az öntőforma töltési tartalmát.
Kerekítés kiválasztott szögek
A leírásban a stílusok 10px paraméter attribútum azt jelzi, border-radius görbületi sugárral rendelkezik, amely változtatható kiválasztja a kívánt egy. Ha 0, a kerekítés fog bekövetkezni. Ez a tulajdonság kihasználni, amikor szükség van, hogy a kiválasztott sarkok kerekítés.
Írja ki az értékeket görbületi sugara minden mutató szög nulla, ha megszünteti a kerekítés. Például törli kerekítés a harmadik és negyedik sarkot. A kód így fog kinézni:
Visszaszámlálás szögek az óramutató járásával megegyező irányba, kezdve a bal felső sarokban, azaz.:
2. A jobb felső sarokban.
3. jobb alsó sarkában.
4. A bal alsó sarokban.
Így kapjuk négyszög lekerekített kiválasztott csak a felső sarkokban.
2. sarkok kerekítés HTML kódot anélkül írás stílusa fájl
Tekintsük a második Eljárás egy téglalap, lekerekített sarkokkal a HTML-kód használatával nélkül írásmóddal fájlt.
HTML lekerekített sarkok
Van egy kis funkció, amely tovább egyszerűsíti a teljes folyamatot - egy HTML lekerekített sarkokkal. A település kialakulását HTML kódot írt ugyanabban a stílusban, mint a kódok CSS. Ugyanazt a jellemzőkkel rendelkezik, mint a CSS blokk, és nincs szükség a felvételi egység style.css fájlt. Egy szó - teljesen kicseréli a kódot HTML CSS kódot.
Ahelyett, hogy a CSS blokk egy HTML script, ami be van helyezve a hely, ahol meg kell adni a lekerekített téglalap:
Az első módszer, hogy kerek a sarkokat lehet használni, ha egy és ugyanazon formában megváltoztatása nélkül stílusok egynél többször használják. A második módszer a formák, stílusok, amelyeket egyszer használható.
3. Képek, lekerekített sarkokkal. A keret a kép körül HTML
Azt is szeretné, hogy hasznos információkat. Gyakran használ képek website design. Nagyon szeretnék, hogy azok még szebb, megváltoztatja alakját, keretezés keret a gyönyörű színek és különböző szélességben. Ez felveti a kérdést: „Hogyan kerekíteni a sarkokat a kép?”.
Ez nagyon egyszerű, és most meg kell tanulni.
Fordítsa el a képet az oldalon, így a hátteret magának a háttérben div tag. Kapunk az alábbi kódot és a kép:
Az attribútum url ( „”) be egy linket a kép.
Fejezze be a sarkokat a képkeret azzal a kiegészítéssel,
Kerekítési a sarkokban CSS és HTML, és adjunk hozzá egy keret lehet tenni két módon, a fent leírtak szerint.
Az első módszer a jelen cikk kódot képeket a stílus fájl és a címke div HTML-kód jelenik meg az alábbiak szerint:
Felhívjuk figyelmét, hogy bizonyos tulajdonságokat lehet egy fájlban tárolják a stílusok és néhány tag div. A mi esetünkben, a méret a kép szélesség és magasság egészül ki a HTML kódot.
HTML kódot a második módszer használata nélkül a CSS fájl ebben a cikkben ismertetett a következő:
Ennek eredményeként a kódok a két módon tudjuk ugyanazt az eredményt kapjuk - a kép lekerekített sarkokkal:
Sarkok kerekítés a kiválasztott képeket
Változó sugarak sarkából a kép szélességét és színét a keret lehet beszerezni nem hagyományos képek az oldalt az oldal. Íme néhány példa a kódokat, amelyek megkapták a következő nagyon szép képek formájában.
Link a kép és a méret, amit megtehetsz Adminpanelen: Média => Könyvtár és közel a kiválasztott kép sajtó: Edit.
A következő cikkben fogunk tanulni, hogyan kell használni a kapott téglalap lekerekített sarkokkal és a keret, mint a háttér az előfizetési űrlapot HTML. Kapsz kész szkripteket aranyos RSS előfizetés formájában, ami lehet elhelyezni oldalsávon egy cikkben, vagy bármely más helyre a honlapon.
Mintegy 11 IE verzió támogatja ismert nyelvek és változatok, bár az ígéret ...
Az anyag nagyon hasznos. Köszönjük!
Michael, akkor létrehozhat egy lebegő menüben a HTML és CSS. Ehhez a fájlban header.php egy tag
írja le a menü blokként elem, egyfajta blokk vezérli stílusokat.
Stílusok fájlban van leírva style.css stíluslapot, feltétlenül adja meg a paramétereket:
margin-top - Beállítja a behúzás a felső széle az elem;
helyzet - állítja az utat a pozicionáló elem képest a böngésző ablakot, vagy egyéb tárgyak egy weblapon. Állítsa be az értéket rögzítettek;
z-index paraméter meghatározza a helyét a lebegő menüben előtt minden elemét (a felső réteg), valamint elemeket egy internetes oldalon kerülnek rétegeket.
Köszönöm a mágikus :) Nem hiszem, hogy minden olyan egyszerű, hogy lesz)
És hogyan kell csinálni közvetlenül a felirat keretek vízszintes vonalat húzott a kódot, például.
Tekintettel arra, hogy nem vagyok egy profi web, és nem az életkor (68 év), nem volt képes ezt a feladatot. Bár szinte minden teendő az oldalon a saját kezével.
Úgy vélem, ez a fejlesztés a kód lesz hasznos, nem csak nekem.
Remélem, hogy segítsen.
Jacob a kereten lehetetlen, hogy a szöveget. Képaláírás a kép lehet végezni a kép alatt a következő:
Kapunk a következő eredménnyel:
Akkor egy címkét a kép tetején. Ez a címke
helyezni a tag