ma jeceshahay inaad ogaato sida bartamaha sawirka DIV? Dhex dhexaadinta sawirka DIV waxay faa'iido u yeelan kartaa hagaajinta muuqaalka iyo abaabulka boggaaga internetka, iyo inaad muujiso sawirka aad rabto inaad muujiso. Dhexda sawirka DIV ma adka, laakiin waxay ku xiran tahay dhowr arrimood, sida nooca sawirka, xajmiga DIV, qaabka DIV, iwm.
Qodobkaan waxaan ku sharixi doonaa sida loo xudeeyo sawirka DIV iyadoo la isticmaalayo HTML iyo CSS, kuwaas oo ah luqadaha barnaamijyada loo isticmaalo abuurista iyo naqshadeynta bogagga shabakadda. Waxaan ku tusi doonaa dhowr hab iyo tusaaleyaal si aad u doorato midka kugu habboon.
Waa maxay DIV
Div waa curiye HTML ah oo loo isticmaalo ku samee qaybo ama weel bogga shabakadda. Tani waxay ka koobnaan kartaa waxyaabo kale, sida qoraal, sawiro, xiriirin, iwm. Sidoo kale tani waa curiye block ah, taas oo macnaheedu yahay in ay qaadayso dhammaan ballaca bogga iyo taas waxaad qeexi kartaa dhererkiisa iyo ballaciisa. Div waa curiye guud, taas oo macnaheedu yahay in aanu lahayn macne gaar ah. Sababtan awgeed, waxaa badanaa loo adeegsadaa fasalka ama sifooyinka aqoonsiga, si loo siiyo div magac ama qayb. Waxa kale oo inta badan lagu isticmaalaa qaabka qaabka ama xaashida qaabka CSS, si ay muuqaal ama naqshad u siiyaan div.
Div waxa loo adeegsadaa habaynta iyo habaynta waxa ku jira bogga shabakadda, iyo in lagu dabaqo sifooyinka qaabka. Div-ga waxaad samayn kartaa sanduuq ay ku jiraan walxo kale, kaas oo noqon kara mid toosan, mid dhexe, midab leh, hadh, iwm. Qaabka ayaa sidoo kale loo isticmaali karaa samee tiirar ama saf, si loo qaybiyo waxa ku jira hab habaysan oo dabacsan. Guud ahaan waxa kale oo loo isticmaali karaa in lagu abuuro muuqaal ama saamayn is dhexgalka, sida animations, kala guurka, isbedel, iwm.
Sida loo xudeeyo sawirka jiifa
Dhexda sawirka toosan ee DIV macneheedu waa toosin sawirka xarunta ballaca DIV. Waxaa jira dhowr siyaabood oo tan loo sameeyo, laakiin kuwa ugu caansan waa kuwan soo socda:
- Isticmaalka qoraalka-toosin: hantida dhexe. Hantidan waxa lagu dabaqaa cunsurka DIV oo sababa in dhammaan walxaha ku jira DIV ay si toos ah u siman yihiin. Tusaale ahaan:
- Isticmaalka hantida margin: auto. Hantidan waxa lagu dabaqaa curiyaha IMG oo waxa uu keenaa in sawirku yeesho margins bidix iyo midig oo isku mid ah, isaga oo dhexda u taagan. Si ay tani u shaqeyso, sawirku waa inuu lahaadaa ballac qeexan oo ah nooca block ama uu leeyahay muuqaalka guriga: block. Tusaale ahaan:
- Isticmaalka hantida beddelka: translateX(). Hantidan waxa lagu dabaqaa qaybta IMG oo waxay sababtaa in sawirka uu si siman u socdo masaafo gaar ah booskiisii hore. Si aad u dhexda ka dhigto, waa inaad 50% ballaceeda midig u soo guurtaa. Si ay tani u shaqeyso, sawirku waa inuu lahaadaa ballac qeexan oo ah nooca block ama uu leeyahay muuqaalka guriga: block. Tusaale ahaan:
Sida sawirka toos loogu dhex dhigo
U dhex dhig sawirka si toos ah DIV macneheedu waa toosin sawirka ku yaal bartamaha dhererka DIV. Waxaa jira dhowr siyaabood oo loo sameeyo, laakiin kuwa ugu caansan waa kuwan soo socda:
- Isticmaalka hantida toosan ee toosan: dhexe. Hantidan waxa lagu dabaqaa qaybta IMG oo waxay sababtaa in sawirku u dhexeeyo toosan marka loo eego gunta qoraalka. Si loo shaqeeyo, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu noqdaa nooc khad ah ama uu leeyahay bandhiga: hantida gudaha. Tusaale ahaan:
- Isticmaal hantida margin-sare iyo margin-hoose. Guryahaan waxaa lagu dabaqaa curiyaha IMG waxayna keenaan sawirku inuu yeesho isku mid ah xaga sare iyo hoose, isagoo si toos ah u dhexdanaya. Si loo shaqeeyo, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu lahaadaa dherer qeexan oo ah nooca block ama uu leeyahay bandhigga: hantida xannibaadda. Tusaale ahaan:
- Isticmaalka hantida beddelka: translateY(). Markan waxa lagu dabaqaa curiyaha IMG waxayna sababtaa in sawirku si toosan u socdo masaafo cayiman oo u jirta booskiisii hore. Si aad u dhexda toosan, waa in aad 50% dhererkeeda hoos ugu dhaqaaqdaa. Si ay tani u shaqeyso, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu lahaadaa dherer qeexan oo ah nooca block ama uu leeyahay bandhiga: hantida block. Tusaale ahaan:
Sida sawirka loogu dhejiyo labada faasas
Dhex dhexaadinta sawirka labada faasas ee DIV macnaheedu waa toosi sawirka dhexda ballaca iyo dhererka labadaba ee DIV, tani waa tan ugu adag. Waxaa jira dhowr siyaabood oo loo sameeyo, laakiin kuwa ugu caansan waa kuwan soo socda:
- Isticmaalka qoraalka-toosin: hantida dhexe iyo toosan-align: hantida dhexe. Guryahani waxay khuseeyaan curiyaha DIV iyo curiyaha IMG siday u kala horreeyaan, waxayna keenaan in sawirku noqdo mid dhexda u toosan si toosan iyo toosan labadaba. Si ay tani u shaqeyso, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu noqdaa nooc khad ah ama uu leeyahay bandhiga: hantida gudaha. Tusaale ahaan:
- Isticmaalka hantida margin: auto. Halkan waxa lagu dabaqaa curiyaha IMG oo keenaysa in sawirka uu yeesho margin siman dhammaan afarta dhinac, iyada oo udub dhexaad u ah labada faasas. Si loo shaqeeyo, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu lahaadaa ballac iyo dherer la qeexay oo ah nooca block ama uu leeyahay bandhigga: hantida block. Tusaale ahaan:
- Isticmaalka hantida beddelka: tarjum(). Xaaladdan oo kale waxaa lagu dabaqaa qaybta IMG waxayna keentaa sawirku inuu ka guuro meel fog oo ka mid ah booskiisii asalka ahaa ee labada faashad. Si aad u dhexda u dhigto, waa inaad u rarisaa 50% ballaceeda midig iyo 50% dhererkeeda hoos. Si loo shaqeeyo, cunsurka DIV waa inuu lahaadaa dherer qeexan iyo curiyaha IMG waa inuu lahaadaa ballac iyo dherer la qeexay oo ah nooca block ama uu leeyahay bandhigga: hantida xannibaadda. Tusaale ahaan:
Xarunta sawir kasta
Dhex dhexaadinta sawirka DIV waxay noqon kartaa mid faa'iido leh si aad u wanaajiso muuqaalka iyo habaynta mareegahaaga, iyo si loo muujiyo sawirka aad rabto inaad muujiso. Dhex dhexaadinta sawirka DIV ma aha mid adag, laakiin waxay ku xidhan tahay dhawr arrimood sida nooca sawirka, cabbirka DIV, qaabka DIV, iwm.
Qodobkaan Waxaan sharaxnay sida loo xudeeyo sawirka DIV iyadoo la adeegsanayo HTML iyo CSS, kuwaas oo ah luqadaha barnaamijyada loo isticmaalo abuurista iyo naqshadeynta bogagga shabakadda. Waxaan ku tusnay habab iyo tusaaleyaal kala duwan oo aad ka dooran karto. midka adiga kugu habboon.
Waxaan rajeyneynaa in aad jeceshay maqaalkan oo aad baratay sida sawirka looga dhex dhigo DIV. Haddii aad hayso wax su'aalo ah ama talo ah, noogu dhaaf faallooyinka. Waxaad sidoo kale la wadaagi kartaa maqaalkan asxaabtaada ama qoyskaaga kuwaas oo sidoo kale jecel HTML ama CSS. Aan shaqada helno oo jadwal u galno!