Элементтерді көлденең және тігінен туралауға болады әртүрлі жолдармен. Әдісті таңдау элемент түріне (блок немесе кірістірілген), оның орналасу түріне, өлшеміне және т.б.

1. Блоктың ортасына көлденеңінен туралау/1.1-бет. Егер блоктың ені болса: div ( ені: 300px; жиегі: 0 auto; /*элементті негізгі блоктың ішінде көлденеңінен ортасына қойыңыз*/ )

Кірістірілген элементті осылай теңестіргіңіз келсе, оны келесідей көрсетуге орнату керек: block;

1.2. Егер блок басқа блоктың ішінде кірістірілген болса және ені жоқ/көрсетілген болса: .wrapper (мәтінді туралау: орталық;) 1.3. Егер блоктың ені орнатылса және оны негізгі блоктың ортасына бекіту қажет болса: .wrapper (позиция: салыстырмалы; /* блокты оның ішінде абсолютті орналастыра алатындай етіп ата-аналық блок үшін салыстырмалы орналасуды орнатыңыз * /) .box ( ені: 400px; позиция: абсолютті ; сол жақ: 50%; жиегі-сол: -200px; /*блокты енінің жартысына тең қашықтыққа солға жылжытыңыз*/ ) 1.4. Егер блоктардың ені көрсетілген болмаса, оларды негізгі орауыш блогын пайдаланып ортаға қоюға болады: .wrapper (мәтінді туралау: орталық; /*блоктың мазмұнын ортаға қою*/) .box ( дисплей: кірістірілген блок; / *блоктарды бір қатарға көлденең орналастырыңыз*/ margin-right: -0,25em; /*блоктар арасындағы оң жақ жиекті алып тастаңыз*/ ) 2. Тігінен туралау 2.1. Егер мәтін бір жолды алып жатса, мысалы, түймелер мен мәзір элементтері үшін: .button ( биіктігі: 50 пиксель; жол биіктігі: 50 пиксель; ) 2.2. Блокты негізгі блок ішінде тігінен туралау үшін: .wrapper (позициясы: салыстырмалы;) .box (биіктігі: 100px; орны: абсолютті; жоғарғы: 50%; жиегі: -50px 0 0 0; ) 2.3. Кесте түрі бойынша тік туралау: .wrapper (дисплей: кесте; ені: 100%; ) .box ( дисплей: кесте-ұяшық; биіктік: 100px; мәтінді туралау: орталық; тік туралау: орта; ) 2.4. Егер жәшікке ені мен биіктігі берілсе және оның негізгі өрісінің ортасына орналасуы қажет болса: .wrapper (позиция: қатысты; ) .box ( биіктігі: 100px; ені: 100px; орны: абсолютті; жоғарғы: 0; оң жақта: 0; төменгі жағы: 0; маржа: auto; CSS3 түрлендіру арқылы беттің/блоктың ортасында абсолютті орналасу:

өлшемдер элемент үшін көрсетілген болса

div (ені: 300px; /*блоктың енін орнату*/ биіктігі:100px; /*блоктың биіктігін орнату*/ түрлендіру: аудару(-50%, -50%); позиция: абсолютті; жоғарғы: 50 % сол жақ: 50% ;

егер элементтің өлшемдері болмаса және бос болмаса

Мұндағы кейбір мәтін h1 (шегі: 0; түрлендіру: аудару(-50%, -50%); позиция: абсолютті; жоғарғы: 50%; сол жақта: 50%; )

2.5. Абсолютті блокты орналастыру

беттің ортасында орналасқан

div (ені: 500px; биіктік: 100px; /* егер биіктік анық орнатылмаса, ол 100% болады */ позиция: абсолютті; жоғарғы: 0; төменгі: 0; сол жақта: 0; оң жақта: 0; шет: авто ;)

блоктың ортасында

.wrapper (позиция: абсолютті; ) .box ( ені: 100px; биіктік: 100px; /* егер биіктік анық орнатылмаса, ол 100% болады */ позиция: абсолютті; жоғарғы: 0; төменгі: 0; сол жақта: 0 оң жақ: 0 маржа: авто;

Бетті орналастырған кезде жиі туралау қажет CSS орталығы-жол: мысалы, негізгі блокты орталықтандыру. Бұл мәселені шешудің бірнеше нұсқасы бар, олардың әрқайсысын ерте ме, кеш пе кез келген макет дизайнері пайдалануы керек.

Мәтінді ортаға туралау

Көбінесе сәндік мақсатта мәтінді ортасына туралау қажет, бұл жағдайда орналасу уақытын азайтуға мүмкіндік береді. Бұрын мұнымен жасалды HTML пайдалану-атрибуттар, бірақ енді стандарт мәтінді стиль кестелері арқылы туралауды талап етеді. Шеттерін өзгерту қажет блоктардан айырмашылығы, CSS-де мәтінді орталау бір жолды пайдаланып орындалады:

• мәтінді туралау:ортаға;

Бұл қасиет мұра болып табылады және ата-анадан барлық ұрпаққа беріледі. Тек мәтінге ғана емес, басқа элементтерге де әсер етеді. Бұл әрекетті орындау үшін олар кірістірілген (мысалы, аралық) немесе кірістірілген блок (дисплейі бар кез келген блоктар: блок сипаттары жинағы) болуы керек. Соңғы опция сонымен қатар элементтің ені мен биіктігін өзгертуге және шегіністерді икемді түрде реттеуге мүмкіндік береді.

Көбінесе беттерде туралау тегтің өзіне тағайындалады. Бұл кодты бірден жарамсыз етеді, себебі W3C align төлсипатын ескірген. Оны бетте пайдалану ұсынылмайды.

Блокты ортасына туралау

Егер сізге div ортасын қою қажет болса, CSS өте ұсына алады ыңғайлы жол: сыртқы жиектерді пайдаланыңыз. Шегіністерді блок элементтері үшін де, кірістірілген блок элементтері үшін де орнатуға болады. Сипат мәні 0 (тік толтыру) және авто (автоматты көлденең толтыру) болуы керек:

• маржа: 0 авто;

Енді бұл опция абсолютті жарамды деп танылды. Сыртқы толтыруды пайдалану кескінді ортаға қоюға да мүмкіндік береді: ол беттегі элементтің орналасуына байланысты көптеген мәселелерді шешуге мүмкіндік береді.

Блокты солға немесе оңға туралаңыз

Кейде CSS ортасына туралау қажет емес, бірақ екі блокты қатар қою керек: біреуі сол жақ жиекте, екіншісі оң жақта. Осы мақсатта үш мәннің бірін қабылдай алатын float қасиеті бар: сол, оң немесе ешбір. Сізде қатар қою керек екі блок бар делік. Содан кейін код келесідей болады:

• .left (жүзу: солға;)
• .right(жүзу: оңға)

Егер алғашқы екі блоктың астында орналасуы керек үшінші блок болса (мысалы, төменгі колонтитул), онда оған анық сипат беру керек:

• .left (жүзу: солға;)
• .right(жүзу: оңға)
• төменгі деректеме (таза: екеуі де)

Факт сол және оң жақ кластары бар блоктар жалпы ағыннан шығып кетеді, яғни барлық басқа элементтер тураланған элементтердің бар болуын елемейді. clear:both қасиеті төменгі деректемеге немесе кез келген басқа блокқа ағыннан шығып кеткен элементтерді көруге мүмкіндік береді және сол жақта да, оң жақта да қалтқыға тыйым салады. Сондықтан, біздің мысалда төменгі деректеме төмен жылжиды.

Тігінен туралау

CSS әдістерін пайдалана отырып, орталыққа туралауды орнату жеткіліксіз болатын кезде, сонымен қатар еншілес блоктың тік орнын өзгерту қажет; Кез келген кірістірілген немесе кірістірілген блок элементі жоғарғы немесе төменгі жиекте, негізгі элементтің ортасында немесе кез келген жерде кірістірілуі мүмкін. Көбінесе бұл үшін блокты орталыққа туралау қажет, вертикалды туралау атрибуты қолданылады; Біреуі екіншісінің ішіне салынған екі блок бар делік. Осы уақытта ішкі блок— inline-block элементі (дисплей: inline-block). Сіз еншілес блокты тігінен туралауыңыз керек:

• үстіңгі туралау - .child(vertical-align:top);
• орталыққа туралау - .child(вертикальді туралау:орта);
• төменгі теңестіру - .child(вертикальді туралау:төменгі);

Мәтінді туралау немесе тік туралау блок элементтеріне әсер етпейді.

Түзетілген блоктармен мүмкін проблемалар

Кейде CSS көмегімен div ортасына қою аздап қиындық тудыруы мүмкін. Мысалы, float пайдалану кезінде: үш блок бар делік: .бірінші, .екінші және .үшінші. Екінші және үшінші блоктар біріншіде жатыр. Екінші класы бар элемент солға реттелген, ал соңғы блок оңға реттелген. Тегістеуден кейін екеуі де ағыннан шығып кетті. Егер негізгі элементте биіктік орнатылмаса (мысалы, 30em), онда ол енді еншілес блоктарының биіктігіне дейін созылмайды. Бұл қатені болдырмау үшін "аралықты" пайдаланыңыз - .екінші және .үшіншіні көретін арнайы блок. CSS коды:

• .секунд(жүзу:солға)
• .үшінші(жүзу:оңға)
• .clearfix(биіктігі:0; анық: екеуі де;)

Pseudo-class:after жиі пайдаланылады, ол сонымен қатар жалған бос орын жасау арқылы блоктарды орнына қайтаруға мүмкіндік береді (мысалда контейнер класы бар div ішінде.бірінші орналасады және құрамында.сол және.оң болады) :

• .left(жүзу:сол)
• .right(жүзу: оңға)
• .контейнер:кейін(мазмұн:""; дисплей:кесте; таза:екеуі;)

Жоғарыда келтірілген опциялар ең көп таралған, бірақ бірнеше нұсқалары бар. Сіз әрқашан эксперимент арқылы псевдо-кеңістікті жасаудың ең қарапайым және ыңғайлы әдісін таба аласыз.

Макет дизайнерлері жиі кездесетін тағы бір мәселе - кірістірілген блок элементтерін теңестіру. Олардың әрқайсысынан кейін бос орын автоматты түрде қосылады. Теріс шегініске орнатылған маржа сипаты мұнымен күресуге көмектеседі. Басқа әдістер бар, олар әлдеқайда аз қолданылады: мысалы, нөлдік бұл жағдайда, тектік элементтің қасиеттерінде font-size: 0 жазылады. Блоктардың ішінде мәтін болса, қажетті қаріп өлшемі кірістірілген блок элементтерінің сипаттарында әлдеқашан қайтарылған. Мысалы, font-size:1em. Бұл әдіс әрқашан ыңғайлы емес, сондықтан сыртқы шегіністер бар опция әлдеқайда жиі қолданылады.

Блоктарды туралау әдемі және функционалды беттерді жасауға мүмкіндік береді: бұл жалпы макеттің орналасуын, интернет-дүкендердегі өнімдердің орналасуын және визитка веб-сайтындағы фотосуреттерді қамтиды.

Windows : Internet Explorer 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx және 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx және 9.0+, SeaMonkey 1.0+ [2].

HTML көмегімен браузер терезесінің көрінетін аймағында бет мазмұнын орталықтандыру - CSS жоқ. Веб-беттің мазмұны орналасатын контейнер ені мен биіктігі бойынша ортаға тураланады: [Мысал бетін ашу].

Сондай-ақ Netscape 2.02 - 4.80 және Offbyone нұсқаларында. Netscape 2.02 - 4.80 нұсқаларында бұл бағдарламалар айналдыру жолақтары үшін орынды сақтайтындықтан, бет мазмұнын шолғыш терезесінің көрінетін аймағының жоғарғы сол жақ бұрышына біршама жылжыту бар.

Сондай-ақ Netscape 2.02 - 4.80. Netscape 2.02 - 4.80 нұсқаларында бұл бағдарламалар айналдыру жолақтары үшін орынды сақтайтындықтан, бет мазмұнын шолғыш терезесінің көрінетін аймағының жоғарғы сол жақ бұрышына біршама жылжыту бар.

Алиоск субдитос және тақырып

DOS жүйесінде скриншоттарды түсіруге арналған бірнеше бағдарламалар бар. Мысалы, SNARF. Бұл қолданбаны пайдаланып, біз көп жағдайда скриншоттарды жасай алдық. Сондай-ақ, SNARF түсірген скриншоттардың (.BMP файлдары) сапасы тексерілген бағдарламалардың ішінде ең жақсысы болып шықты: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. SNARF қолданбасын әдепкі параметрлермен пайдалану оңай, бірақ кемшілігі бар - SNARF әрқашан скриншотты пайдаланушы орналасқан қалтаға сақтайды. Бұл ыңғайсыз немесе қолайсыз болуы мүмкін. Және мұны өзгертудің айқын жолы жоқ. Дегенмен, уақытша шешім бар. Түпнұсқа идея осы сілтемеден табылды. Оның негізінде мыналар пайда болды: 1. SNARF [Жүктеу] 2. Қолдану мәтіндік редактор SNARF.EXE файлын мәтіндік режимде ашыңыз, snarf000.bmp тауып, s:scn000.bin деп өзгертіңіз 3. Жасау пакеттік файл, мысалы S.BAT, онда SNARF.EXE іске қосу жолына қосымша, SNARF іске қосылған кезде скриншоттар сақталатын қалтаға апаратын жол үшін жалған S: дискісін жасау пәрмені болады. Қалта және оған апаратын жол кез келген нәрсе болуы мүмкін: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. SNARF: S [немесе S.BAT] іске қосыңыз 5. Скриншотты түсіру үшін: Alt + S екі болсын дыбыстық сигналдар. Біріншісі басында, екіншісі процестің сәтті аяқталуының белгісі ретінде. Скриншоттар түсірілгеннен кейін олар сақталған қалтаға өтіп, файл кеңейтімін .BIN-тен .BMP SNARF - тегін бағдарламаға ауыстыру керек.

Мәтін мен кескіндерді қамтитын CSS блок элементін тік туралау. Блоктық және кірістірілген элементтердің әртүрлі комбинациялары үшін жұмыс істейді. Мысал: CSS Vertical Alignment CSS HTML/XHTML Vertical Alignment. Код: CSS тік туралау Vertical Alignment CSS CSS. Код: .parent (позиция: қатысты; сол жақта: 0px; жоғарғы: 0px; биіктік: 200px; дисплей: кесте;) .child (позиция: қатысты; сол жақта: 0px; жоғарғы: 0px; дисплей: кесте ұяшығы; тік туралау : орта;).childcontent (позиция: салыстырмалы; сол жақта: 0px; жоғарғы: 0px;) Ескертпе: .parent және .childcontent солға туралануы мүмкін («float: сол жақ;») немесе тураланбаған, бірақ осылайша тік CSS туралаужұмыс істеді, .child "float: left;" жоқ болуы керек. [ 1 ] Сондай-ақ Netscape 6.01+, Mozilla 0.6+ нұсқаларында. [ 2 ] Сондай-ақ Netscape 6.01+, Mozilla 0.6+ нұсқаларында.

Егер сіз html негізінде жасалған кез келген веб-сайтты кесіп алсаңыз, онда сіз белгілі бір қабатты құрылымды көресіз. Оның үстіне, өзімен бірге сыртқы түріұқсас болады қабат торт. Егер сіз солай ойласаңыз, сіз ұзақ уақыт бойы тамақ ішпеген шығарсыз. Сондықтан алдымен аштықты қанағаттандырыңыз, содан кейін сайтыңызда div қабатын қалай орталықтандыру керектігін айтамыз:

Тегті қолдану арқылы макеттің артықшылықтары

Веб-сайт құрылымының екі негізгі түрі бар:

• Кестелік;
• Блоктау.

Интернет пайда болған кезде де кестелік макет басым болды. Оның артықшылықтары көрсетілген позициялаудың дәлдігін қамтиды. Бірақ, соған қарамастан, оның айқын кемшіліктері бар. Олардың негізгілері кодтың көлемі және төмен жылдамдықжүктеп алулар.

Кесте макетін пайдаланған кезде веб-бет толығымен жүктелмейінше көрсетілмейді. Div блоктарын пайдаланған кезде элементтер бірден көрсетіледі.

Жоғары жүктеу жылдамдығынан басқа, веб-сайттың блоктық құрылысы дыбыс деңгейін бірнеше есе азайтуға мүмкіндік береді html коды. Соның ішінде CSS сыныптарын пайдалану арқылы.

Дегенмен, кестелік орналасуды беттегі деректерді көрсетуді құрылымдау үшін пайдалану керек. Оны пайдаланудың классикалық мысалы - кестелерді көрсету.

Тегтерге негізделген блок конструкциясы қабат-қабат деп те аталады, ал блоктардың өзі қабаттар деп аталады. Себебі белгілі бір сипат мәндері пайдаланылғанда, оларды Photoshop-тағы қабаттарға ұқсас бір-бірінің үстіне қоюға болады.

Орналастыру құралдары

Блок орналасуында каскадты стиль кестелерін пайдаланып қабаттарды орналастырған дұрыс. Орналасуға жауапты негізгі CSS қасиеті - float.
Меншік синтаксисі:
қалқымалы: сол жақ | дұрыс | ешқайсысы | мұрагер
Қайда:

• сол жақ – элементті экранның сол жақ шетіне туралаңыз. Қалған элементтердің айналасындағы ағын оң жақта орын алады;
• оң жақта – оң жақта туралау, басқа элементтердің айналасында ағын – сол жақта;
• жоқ – орау рұқсат етілмейді;
• inherit – негізгі элементтің мәнін мұраға алады.

Осы сипатты пайдаланып divs орналастырудың жеңіл мысалын қарастырайық:

#left ( ені: 200px; биіктігі: 100px; қалқымалы: солға; фон: rgb(255,51,102); ) #right (ені: 200px; биіктік: 100px; қалқымалы: оң; фон: rgb(0,255,153); ) Сол жақ блок Оң жақ блок

Енді біз үшінші div-ті беттің ортасына орналастыру үшін сол сипатты қолдануға тырысамыз. Бірақ, өкінішке орай, float орталық мәніне ие емес. Ал жаңа блокқа оңға немесе солға туралау мәнін бергенде, ол көрсетілген бағытқа жылжытылады. Сондықтан барлық үш блокқа float: left параметрін орнату ғана қалады:

Бірақ бұл да ең жақсы нұсқа емес. Терезенің өлшемі кішірейген кезде барлық қабаттар бір қатарға тігінен тізіледі, ал өлшемді үлкейткен кезде терезенің сол жақ шетіне жабысады. Сондықтан бізге div ортасына қоюдың жақсы жолы қажет.

Қабаттарды орталықтандыру

Келесі мысалда біз қалған элементтерді орналастыратын контейнер қабатын қолданамыз. Бұл терезе өлшемін өзгерткен кезде блоктардың бір-біріне қатысты қозғалу мәселесін шешеді. Контейнерді ортасына қою жоғарғы жиектен және бүйірлердегі автоматты шеттер үшін маржа сипаттарын нөлге орнату арқылы орындалады (маржа: 0 auto ):

#контейнер ( ені: 600px; жиегі: 0 авто; ) #сол (ені: 200px; биіктік: 100px; қалқымалы: солға; фон: rgb(255,51,102); ) #right (ені: 200px; биіктік: 100px; қалқымалы) : сол жақтағы фон: rgb(0,255,153);

Дәл сол мысал div-ді көлденеңінен қалай ортаға қоюға болатынын көрсетеді. Ал егер сіз жоғарыдағы кодты аздап өңдесеңіз, блоктардың тік туралануына қол жеткізе аласыз. Мұны істеу үшін сізге тек контейнер қабатының ұзындығын өзгерту керек (оны азайтыңыз). Яғни, оның CSS сыныбын өңдегеннен кейін келесідей болуы керек:

Өзгерістерден кейін барлық блоктар ортасында қатаң түрде қатарға тұрады. Олардың орналасуы браузер терезесінің өлшеміне қарамастан өзгермейді. Міне, div-ді тігінен ортаға қою келесідей:

Келесі мысалда біз контейнер ішіндегі қабаттарды ортаға салу үшін бірнеше жаңа CSS сипаттарын қолдандық:

#контейнер (ені: 450 пиксель; биіктік: 150 пиксель; шеті: 0 авто; фон-түсі:#66CCFF; ) #left (ені: 100px; биіктік: 100px; фон: rgb(255,51,102); дисплей: кірістірілген блок; вертикаль бойынша туралау: орта; жиек-сол: 35 пиксель; #центр (ені: 100px; биіктік: 100px; фон: rgb(255,0,0); дисплей: кірістірілген блок; тік туралау: орта; жиегі-сол: 35px; )

CSS сипаттарының қысқаша сипаттамасы және біз осы мысалда div ішінде div ортасына келтіру үшін пайдаланған мәндері:

• дисплей: inline-block – блок элементін сызыққа туралайды және оның басқа элементтің айналасына оралуын қамтамасыз етеді;
• vertical-align: middle – негізгі элементке қатысты ортадағы элементті туралайды;
• margin-left – сол жақ жиекті орнатады.

Қабаттан сілтемені қалай жасауға болады

Біртүрлі естілгенімен, бұл мүмкін. Кейде орналасу кезінде сілтеме ретінде div блогы қажет болуы мүмкін әртүрлі түрлерімәзір. Сілтеме қабатын енгізудің практикалық мысалын қарастырайық:

#layer1( ені: 500px; биіктік: 100px; фон: rgb(51,255,204); жиек: Groove; ) a (дисплей: блок; мәтінді туралау: орталық; биіктік: 100%; түс: rgb(255,0,51) ; ) Біздің веб-сайтқа сілтеме

Бұл мысалда жолды көрсету арқылы: блок, біз блок элементінің мәніне сілтеме орнатамыз. Және div блогының бүкіл биіктігі сілтемеге айналуы үшін биіктік орнатыңыз: 100%.

Блок элементтерін жасыру және көрсету

Блок элементтері ескірген кестелік орналасуға қарағанда интерфейстің функционалдығын кеңейтуге көбірек мүмкіндіктер береді. Көбінесе веб-сайт дизайны бірегей және танымал болады. Бірақ мұндай эксклюзив үшін бос орынның жетіспеушілігімен төлеуге тура келеді.

Бұл, әсіресе, жарнама құны ең жоғары болатын басты бетке қатысты. Сондықтан, басқаны қайда «итеру» мәселесі туындайды жарнамалық баннер. Мұнда сіз div-ді беттің ортасына туралаудан құтыла алмайсыз!

Неғұрлым ұтымды шешім - кейбір блокты жасыру. Міне, осындай іске асырудың қарапайым мысалы:

#layer1( display:block; ені: 500px; биіктігі: 100px; фон: rgb(51,255,204); border:groove; ) show() функциясы (if(layer1=="жоқ") ( layer1="block"; ) else ( layer1="жоқ"; ) document.getElementById("layer1").style.display=layer1 )

Бұл сиқырлы түйме. Оны басу жасырын блокты жасырады немесе көрсетеді.

Бұл мысалда div блоктарының орны ешбір жолмен өзгермейді. Мұнда ол пайдаланылады ең қарапайым функция JavaScript мәнін өзгерту css қасиеттерітүймені басқаннан кейін көрсетіледі (onclick оқиғасы).

Float қасиеті бар мазмұнды көлденең теңестіруді өте оңай жасауға болады, сонымен қатар толық кросс-шолғыш (Opera 8+, Firefox 3+, IE 5.5+ нұсқаларында жұмыс істейді).

div блогын туралау мысалы

Қалқымалы блокты немесе қатардағы бірнеше блоктарды туралау үшін сізге басқа сыртқы блок қажет. Сыртқы блок пен ішкі блоктарға позиция тағайындалады: абсолютті; және қалқымалы: солға; , сыртқы солға тағайындау: 50%; , ал ішкі блоктар үшін оң жақта: 50%; . float пайдалану үшін: right; сыртқы тағайындау құқығын тағайындау қажет: 50%; , ал ішкі блоктар үшін солға: 50%; . Мен центрге тураланған элементтерден кейін сипатты ашық қою арқылы қалтқыларды тазалауды ұсынамын. .

Осылайша сіз келесі орталықтандыруға қол жеткізе аласыз:

Id = block-inner бар ішкі блокта жасыл жиек бар, ал id = блокты сыртқы блокта сынған қызыл жиек бар.

Мазмұнды блоктау

#блок (позиция: қатысты; қалқымалы: солға; солға: 50%; жиек: 1 пиксель сызықша #a00; ) #блок-ішкі (позиция: қатысты; қалқымалы: солға; оңға: 50%; жиек: 2 пиксель тұтас #0a0; толтыру : 10px ) #бет (толып кету: жасырын; )

Мәзір элементін туралау мысалы

Іс жүзінде жоғарыда келтірілген мысалды торап мәзірін көлденеңінен туралау кезінде қолдануға болады. Дегенмен, бұл жеткілікті екенін ескеру қажет үлкен мөлшерлерэлементтер (ені беттің жартысынан көбін алып жатыр), көлденең айналдыру пайда болады. Одан құтылу үшін сыртқы блокта пайдалану керек толып кету қасиеті. Егер мәзір ашылмалы мәзір болса, оның ашылмалы элементтерін осы сыртқы блок кесіп тастауы мүмкін. Бұл мәселені болдырмау үшін толып кету сипатын мүмкіндігінше кең блокқа қолдану керек, мысалы, блоктың өзі сыртқы блок, ол беттің бүкіл мазмұнын жақтайды.

Мысалы, мәзірді келесідей туралауға болады:

ul тізімінің li тармақтарында жасыл жиек, ал ul тізімінде сызықша қызыл жиек бар.

Төмендегі мысалдың HTML коды келесідей:

• Тураланған 1-тармақ
• 2-ші реттелген элемент
• 3-ші реттелген элемент
• Тураланған тармақ 4
• 5-ші реттелген элемент

Төмендегі мысалдың CSS коды келесідей көрінеді:

#мәзір (позиция: қатысты; қалқымалы: солға; солға: 50%; жиек: 1 пиксель сызықша #a00; тізім стилі: жоқ; жиек: 0; толтыру: 0; ) #menu li (позиция: қатысты; қалқымалы: солға; оң жақта: 50% жиек: 2px қатты #0a0; #бет (толып кету: жасырын;

Сондықтан бұл өте қарапайым. Жаңа әдіс-тәсілдерді меңгеруде сәттілік тілеймін.

Байланыс