Div негізіндегі веб-сайттың негіздері: 7 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:28

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

1 -қадам: Негізгі файлдарды жасаңыз

Алдымен html файлын жасаңыз. Біз оған негіздерді қосамыз. CSS файлы қазір бос болады.html файлы енді мынаны қамтиды: тест html файлын нәрсе.html ретінде сақтаңыз. Сіз атауды өзіңіз таңдай аласыз. Сіздің CSS файлыңыз.css ретінде сақталуы керек. Html файлында көрсетілгендей атау беріңіз. Бұл жағдайда «style.css». Бізде браузерде алдын ала қаралған кезде бізде бос HTML -парақ бар.

2 -қадам: Негізгі түстер, қаріптер үшін негізгі тегті өңдеңіз …

Біз html файлын сол күйінде қалдырамыз және тек CSS файлын өңдейміз. Келесі кодты CSS файлыңызға қосыңыз: body {background: #444444; font-family: вердана, arial, sans-serif; түсі: #444444; қаріп өлшемі: 12 пиксель; margin: 0px;} Бұл кодтың көмегімен біз дене тегінің барлық қасиеттерін анықтаймыз. Барлық мазмұн негізгі тегте болғандықтан, бұл параметрлер бүкіл бетке әсер етеді. Фон мен қаріп түсі (түсі) қою сұрға, қаріптер тобы (шрифт-отбасы) верданаға орнатылған. Егер біздің веб -сайтты қарау үшін пайдаланылатын компьютерде «verdana» қарпі болмаса, ол біздің сайтты «arial» қаріпінде көрсетеді. Сіз тізімге басқа қаріптерді қоса аласыз. «Sans-serif»-бұл сіз берген қаріп болмаған кезде қолданылатын жалпы тип. Қаріп өлшемі (қаріп өлшемі) 12 пиксельге орнатылған. Бұл абсолютті мән. Егер сіз басқа қаріп өлшемдерін өңдегіңіз келсе (тақырыптар, абзацтар, мәзір элементтері сияқты …) сіз «px» орнына «em» қатысты бірлігін қолдана аласыз. Осылайша, егер сіз веб -сайтыңыздың өлшемін өзгерткіңіз келсе, тек шрифт өлшемін өзгертуге тура келеді. Бұл сайт терезенің жоғарғы жағына жабысатынына көз жеткізу үшін жасалады.

3 -қадам: тақырыбы мен мазмұны бар контейнер қосу

Енді контейнерді қосамыз. Бұл біздің веб -сайтымызды қамтитын орталықтандырылған div. Бұл контейнерге біз тағы екі div қосамыз; мазмұн бөлімі мен тақырып div. Осы біздің html файлы келесідей болады: тест Мазмұн тақырыбы Біз келесі кодты CSS файлымызға қосамыз: div#container {width: 800px; маржа: 0 пиксель автоматты; фон: #FFFFFF; толтыру: 0px;} div#мазмұн {ені: 800px; үстіңгі қабат: 100 пиксель; фон: сары;} div#тақырып {ені: 800 пиксель; биіктігі: 100 пиксель; фон: көк; лауазымы: абсолютті; жоғарғы: 0px;}. clearfix: кейін {мазмұны: «.»; көрсету: блок; биіктігі: 0; түсінікті: екеуі де; көріну: жасырын;}. clearfix {көрсету: кірістірілген-блок;}/* IE Mac жүйесінен жасыру \*/. clearfix {көрсету: блок;} div#контейнері бізде «контейнер» идентификаторы бар div тегінің бар екенін білдіреді. Біз бірнеше түстер қосамыз және «маржа: 0px авто;» Біздің контейнер беттің ортасында екеніне көз жеткізу үшін тақырыптың басқа мазмұнның үстінде орналасқанына көз жеткізу үшін мазмұнға үстіңгі және үстіңгі деректемеде «top: 0px» бар абсолютті мән беруіміз керек. жағымсыз түстер. Бұл түстерді оқуды жеңілдету үшін және әр түрлі дивизияларды көру үшін. Біздің навигация мен мазмұнды бөлу (келесі қадамда қосылады) айналадағы бөлімнен шықпайтынына көз жеткізу үшін бізге бұл таңғажайып тазарту коды қажет болады.

4 -қадам: Навигация мен нақты мазмұн үшін мазмұн бөлімінде екі дивизия жасаңыз

Енді контентке тағы екі div қосамыз. Бірі навигация үшін, екіншісі нақты мазмұн үшін. Мазмұн белгісі арасында; сіз жаңа кодты қосасыз:

Навигация Негізгі мазмұн Біз навигацияны және негізгі мазмұнды көрсету үшін кейбір CSS кодын қосамыз; div#nav {width: 200px; қалқу: солға; фон: қызғылт;} div#maincontent {ені: 600px; қалқу: оңға; фон: қызғылт;} Бұл екі диванның өзгермелі екенін ескеріңіз. Егер біз алдыңғы қадамда қосымша тазарту кодын қоймаған болсақ, divs айналадағы div -дан тыс қалқып шығатын еді. Clearfix әдісімен біз бұлай болмайтынына көз жеткіземіз.

5 -қадам: Навигацияға құрылым үшін қосымша бөлімдер қосыңыз

Енді біз веб -парақта қандай да бір құрылымды жасау үшін «nav» div -ге қосымша divs қосамыз. Келесі кодты өзгертіңіз:

• Фу
• Бар

Біз енді «navblock» div қалай көрсетілетінін анықтау үшін кодтың бір бөлігін жарнамалайтын боламыз. Мұның себебі қарапайым; идентификаторы бар divs тек бір рет көрсетіледі (шарлау блогы, үстіңгі деректеме, төменгі деректеме,…). Сыныптары бар дивтерді бірнеше рет көрсетуге болады. Мұнда біз сыныпты қолданамыз. Кейінірек біз басқа шарлау блогын қосқымыз келсе, on.div.navblock {width: 180px; маржа: 5 пиксельдік авто; шекара: 1 пиксельді қызыл;} Егер біз басқа шарлау блогын қосқымыз келсе, сізге жаңа… құрылым қосуға тура келеді, енді сіздің кодыңыз келесідей болады;

• Фу
• Бар
• Бу
• Алыста

6 -қадам: Негізгі мазмұндағы құрылымға қосымша дивизия қосыңыз

Енді біз maincontent div үшін дәл осылай жасаймыз. Код енді келесідей көрінеді:

Lorem ipsum dolor sit amet,…

Тағы да, біз div -ді қалай көрсету керектігін анықтау үшін CSS файлына кодтың бір бөлігін қосамыз: div.contentblock {width: 580px; маржа: 5 пиксельдік авто; шекара: 1 пиксель ақ түсті;} Біз енді келесі мазмұнды бөлікке келесі «…» қосу арқылы басқа мазмұн блогын қоса аламыз;

Lorem ipsum dolor sit amet,…

Nunc cursus, жай ғана негізгі ереже,…

7 -қадам: Сайтты сәл ұсқынсыз етіңіз

Енді қызықты бөлігі; Түстер. Енді бізде негізгі div құрылымы болғандықтан, біз түстерді сәл хаотикалық/ұсқынсыз нәрсеге өзгерте аламыз … Тек CSS файлындағы түстермен ойнаңыз. Міне суретте көрсетілген веб -беттің толық html файлы.: тест

• Фу
• Бар
• Бу
• Алыста

Lorem ipsum dolor sit amet,…

Nunc cursus, жай ғана негізгі ереже,…

Тақырып Бұл толық CSS файлы: body {background: #444444; font-family: вердана, arial, sans-serif; түсі: #444444; қаріп өлшемі: 12 пиксель; маржа: 0px;} div#контейнер {ені: 800px; маржа: 0 пиксель автоматты; фон: #FFFFFF; толтыру: 0px;} div#мазмұн {ені: 800px; үстіңгі қабат: 100 пиксель; фон: #FFFFFF;} div #header {ені: 800px; биіктігі: 100 пиксель; фон: #888888; лауазымы: абсолютті; жоғарғы: 0px;} div#nav {ені: 200px; қалқу: солға; фон: #FFFFFF;} div #maincontent {ені: 600px; қалқу: оңға; фон: #DDDDDD;} div.navblock {ені: 180px; маржа: 5 пиксельдік авто; шекара: 1px қатты #DDDDDD;} div.contentblock {ені: 580px; маржа: 5 пиксельдік авто; шекара: 1px қатты #FFFFFF;}. clearfix: кейін {мазмұны: «.»; көрсету: блок; биіктігі: 0; түсінікті: екеуі де; көріну: жасырын;}. clearfix {көрсету: кірістірілген-блок;}/* IE Mac-тан жасыру \*/. Әрине, өңдер, түстер, қаріп өлшемдері, жақсы көрінетін шарлау блогы сияқты әлі де көп нәрсе бар … Бірақ бұл нұсқаулар тек div құрылымы туралы. Егер сіз басқа да нұсқауларды көргіңіз келсе, сіз әрқашан сұрай аласыз. Уақыт таба аламын ба, көремін.