በዲቪ ላይ የተመሠረተ ድር ጣቢያ በጣም መሠረታዊዎች -7 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:35

ይህ አስተማሪ ድር ጣቢያዎችን በዲቪዲዎች እንዴት እንደሚገነቡ መሰረታዊ ነገሮችን ያሳየዎታል። ለአቀማመጥ የሚያገለግሉ ሰንጠረ evilች ክፉዎች ስለሆኑ!: p ይህንን አስተማሪ ለመረዳት ፣ መሰረታዊ html እና css ን ማወቅ ያስፈልግዎታል። የሆነ ነገር ካልገባዎት ለመጠየቅ ነፃነት ይሰማዎ። የእኔ የግል መነሻ ገጽ እንዲሁ እንደዚህ ዓይነቱን የዲቪ መዋቅር ይጠቀማል።

ደረጃ 1 መሰረታዊ ፋይሎችን ይፍጠሩ

በመጀመሪያ የእርስዎን html ፋይል ይፍጠሩ። በጣም መሠረታዊ የሆኑትን እንጨምረዋለን። Css ፋይል ለአሁን። html ፋይል ባዶ ይሆናል። ሙከራ የ html ፋይልዎን እንደ አንድ ነገር ያስቀምጡ። html። እርስዎ እራስዎ ስሙን መምረጥ ይችላሉ። የእርስዎ css ፋይል እንደ.css መቀመጥ አለበት። በ html ፋይል ውስጥ እንደተጠቀሰው ተመሳሳይ ስም መስጠትዎን ያረጋግጡ። በዚህ ሁኔታ “style.css” ውስጥ። እኛ በአሳሽዎ ውስጥ ቅድመ -እይታ ሲደረግ አሁን ባዶ ባዶ የኤችቲኤምኤል ገጽ አለን።

ደረጃ 2 ለመሠረታዊ ቀለሞች ፣ ቅርጸ -ቁምፊዎች ፣…

የኤችቲኤምኤል ፋይሉን እንዳለ እንተወዋለን እና የ css ፋይልን ብቻ እናስተካክለዋለን። የሚከተለውን ኮድ ወደ የእርስዎ css ፋይል ያክሉ - አካል {ዳራ ፦ #444444 ፤ ቅርጸ-ቁምፊ-ቤተሰብ-verdana ፣ arial ፣ sans-serif; ቀለም: #444444; የቅርጸ-ቁምፊ መጠን-12 ፒክስል; margin: 0px;} በዚህ ትንሽ ኮድ ሁሉንም የአካል መለያ ባህሪያትን እንገልፃለን። ሁሉም ይዘቱ በአካል መለያ ውስጥ ስለሆነ ፣ እነዚህ ቅንብሮች መላውን ገጽ ይነካል። ዳራ እና የቅርጸ-ቁምፊ ቀለም (ቀለም) ፣ ወደ ጥቁር ግራጫ (ግራጫ) ተቀናብሯል። ለድር ጣቢያችን ለመመልከት ያገለገለው ኮምፒተር “ቬርዳና” ቅርጸ -ቁምፊ ከሌለው ጣቢያችንን በ “arial” ቅርጸ -ቁምፊ ውስጥ ያሳያል። በዝርዝሩ ውስጥ ተጨማሪ ቅርጸ -ቁምፊዎችን ማከል ይችላሉ። “ሳንስ-ሴሪፍ” እርስዎ ያቀረቡት ቅርጸ-ቁምፊ በማይገኝበት ጊዜ ጥቅም ላይ የሚውል አጠቃላይ ዓይነት ነው። የቅርጸ-ቁምፊ መጠን (ቅርጸ-ቁምፊ-መጠን) ወደ 12 ፒክሰሎች ተቀናብሯል። ይህ ፍጹም እሴት ነው። ሌሎች የቅርጸ-ቁምፊ መጠኖችን (እንደ ራስጌዎች ፣ አንቀጾች ፣ የምናሌ ንጥሎች ፣ …) ማርትዕ ከፈለጉ በ “ፒክስ” ምትክ አንጻራዊ አሃዱን “em” ን መጠቀም ይችላሉ። በዚህ መንገድ ፣ ድር ጣቢያዎን መጠኑን መለወጥ ከፈለጉ ፣ የሰውነት ቅርጸ -ቁምፊ መጠንን ብቻ መለወጥ አለብዎት። ኅዳጉ ለአራቱ የሰውነት መለያዎች ሁሉ ወደ 0px ተቀናብሯል። ይህ የሚደረገው ጣቢያው በመስኮቱ አናት ላይ ተጣብቆ እንዲቆይ ለማድረግ ነው።

ደረጃ 3: ከርዕሰ እና ይዘት ጋር መያዣን ማከል

አሁን መያዣውን እንጨምራለን። ይህ በቀላሉ የእኛን አጠቃላይ ድር ጣቢያ የሚይዝ ማዕከላዊ ማእከል ነው። በዚህ መያዣ ውስጥ ፣ ሁለት ተጨማሪ ዲቪዎችን እንጨምራለን የይዘት ዲቪ እና ራስጌ div.የኤችቲኤምኤል ፋይልችን አሁን እንደዚህ ይመስላል - የይዘት ራስጌን ይፈትሹ እኛ የሚከተለውን ኮድ በእኛ css ፋይል ውስጥ እንጨምራለን div#መያዣ {ስፋት 800px; ኅዳግ: 0 ፒክስል አውቶማቲክ; ዳራ - #FFFFFF; padding: 0px;} div#ይዘት {ስፋት 800px; ንጣፍ-ከላይ-100 ፒክስል; ዳራ: ቢጫ;} div#ራስጌ (ስፋት 800px; ቁመት - 100 ፒክሰል; ዳራ: ሰማያዊ; አቀማመጥ: ፍጹም; ከላይ ፦ 0 ፒክስል;} ማሳያ: አግድ; ቁመት: 0; ግልጽ: ሁለቱም; ታይነት: ተደብቋል ፤} አንዳንድ ቀለሞችን እና “ኅዳግ: 0 ፒክስል አውቶማቲክ” እንጨምራለን። መያዣችን በገጹ ውስጥ መሃከል መሆኑን ለማረጋገጥ። ይዘቱ ከሌላው ይዘት በላይ የተቀመጠ መሆኑን ለማረጋገጥ ይዘቱን ከ ‹top: 0px› ጋር ፍጹም እሴት መስጠት አለብን። አታስብ አስቀያሚ ቀለሞች። ቀለሞቹን ለማንበብ እና የተለያዩ ዲቪዲዎችን ለማየት ለማቅለል ብቻ ነው። የእኛ አሰሳ እና የይዘት ዲቪዶች (በሚቀጥለው ደረጃ የተጨመረው) ከአከባቢው ዲቪ እንዳይወድቁ ለማረጋገጥ ይህ እንግዳ የሆነ ግልጽ ፊደል ኮድ ያስፈልገናል።

ደረጃ 4: ለአሰሳ እና ለእውነተኛ ይዘት በይዘት ዲቪ ውስጥ ሁለት መለኮቶችን ያድርጉ

አሁን በይዘት ዲቪ ውስጥ ሁለት ተጨማሪ ዲቪዶችን እንጨምራለን። አንዱ ለአሰሳ እና አንዱ ለትክክለኛው ይዘት። በይዘት-መለያ መካከል; አዲሱን ኮድ ያክላሉ-

አሰሳ ዋና ይዘት አሰሳውን እና ዋናውን የይዘት ዲቪዶችን ለማሳየት አንዳንድ የ css ኮድ እንጨምራለን ፤ div#nav {width: 200px; ተንሳፈፈ: ግራ; ዳራ: ብርቱካናማ;} div#ዋና ይዘት {ስፋት 600px; ተንሳፈፈ: ቀኝ; ዳራ: ሮዝ;} እነዚህ ሁለት ዲቪዎች ሁለቱም የሚንሳፈፉ መሆናቸውን ልብ ይበሉ እኛ በቀድሞው ደረጃ ላይ ተጨማሪውን የመገለጫ ኮድ ባናስቀምጥ ፣ ዲቪዎቹ ከአከባቢው ዲቪ ውጭ ይንሳፈፋሉ። በግልፅ ፊክስ ዘዴ ፣ ይህ እንዳይሆን እናረጋግጣለን።

ደረጃ 5 በአሰሳ ውስጥ ለመዋቅር አንዳንድ ተጨማሪ መለኮቶችን ያክሉ

በድረ -ገፃችን ውስጥ አንዳንድ ዓይነት አወቃቀር ለመፍጠር አሁን ለሁለቱም ለ ‹ናቭ› ዲቪ አንዳንድ ተጨማሪ ድራጎችን እንጨምራለን። የሚከተለውን ትንሽ ኮድ ይለውጡ

• ፉ
• ቡና ቤት

ዲቪው “navblock” እንዴት መታየት እንዳለበት ለመግለፅ አሁን አንድ የኮድ ቁራጭ እናስታውቃለን። ለዚህ ምክንያቱ ቀላል ነው; መታወቂያ ያላቸው ዲቪዎች አንድ ጊዜ ብቻ ይታያሉ (የአሰሳ ማገጃ ፣ ራስጌ ፣ ግርጌ ፣…)። ከክፍሎች ጋር ዲቪዎች ከአንድ ጊዜ በላይ ሊታዩ ይችላሉ። እዚህ አንድ ክፍል እንጠቀማለን። ልክ እንደዚያ ከሆነ በኋላ ሌላ የዳሰሳ ማገጃ ማከል እንፈልጋለን። div.navblock {width: 180px; ኅዳግ: 5 ፒክስል አውቶማቲክ; border: 1px solid red;} ሌላ የአሰሳ እገዳ ማከል ከፈለግን ፣ አዲስ… መዋቅር ማከል ብቻ ነው። የእርስዎ ኮድ አሁን እንደዚህ ይመስላል ፤

• ፉ
• ቡና ቤት
• ቡ
• ሩቅ

ደረጃ 6 በዋና ይዘት ውስጥ ለመዋቅር አንዳንድ ተጨማሪ ዲቪዎችን ያክሉ

አሁን ለዋናው የይዘት ዲቪ ተመሳሳይ ነገር እናደርጋለን። ኮዱ አሁን ይህንን ይመስላል

Lorem ipsum dolor sit amet ፣…

እንደገና ፣ ዲቪው እንዴት መታየት እንዳለበት ለመወሰን አንድ ቁራጭ ኮድ በእኛ css ፋይል ላይ እንጨምራለን- div.contentblock {width: 580px; ኅዳግ: 5 ፒክስል አውቶማቲክ; ድንበር: 1 ፒክሰል ጠንካራ ነጭ;} እንደዚህ ባለው ዋና ይዘት ውስጥ ሌላ “…” ን በማከል አሁን ሌላ የይዘት እገዳ ማከል እንችላለን ፤

Lorem ipsum dolor sit amet ፣…

ቄስ ኩርሰስ ፣ justo eget elementum dictum ፣…

ደረጃ 7 - ጣቢያውን በትንሹ አስቀያሚ ያድርጉት

አሁን አስደሳች ክፍል; …: ሙከራ

• ፉ
• ቡና ቤት
• ቡ
• ሩቅ

Lorem ipsum dolor sit amet ፣…

ቄስ ኩርሰስ ፣ justo eget elementum dictum ፣…

ራስጌ እና ይህ የተሟላ css ፋይል ነው - አካል {ዳራ ፦ #444444; ቅርጸ-ቁምፊ-ቤተሰብ-verdana ፣ arial ፣ sans-serif; ቀለም: #444444; የቅርጸ-ቁምፊ መጠን-12 ፒክስል; ኅዳግ: 0 ፒክስል;} div#መያዣ {ስፋት 800px; ኅዳግ: 0 ፒክስል አውቶማቲክ; ዳራ - #FFFFFF; padding: 0px;} div#ይዘት {ስፋት 800px; ንጣፍ-ከላይ-100 ፒክስል; ዳራ: #FFFFFF;} div #ራስጌ (ስፋት 800px; ቁመት - 100 ፒክሰል; ዳራ - #888888; አቀማመጥ: ፍጹም; ከላይ ፦ 0 ፒክስል;} div#nav {ስፋት ፦ 200 ፒክስል ፤ ተንሳፈፈ: ግራ; ዳራ: #FFFFFF;} div #ዋና ይዘት (ስፋት 600px; ተንሳፈፈ: ቀኝ; ዳራ: #DDDDDD;} div.navblock {ስፋት: 180 ፒክስል; ኅዳግ: 5 ፒክስል አውቶማቲክ; ድንበር: 1 ፒክሰል ጠንካራ #DDDDDD;} div.contentblock {ስፋት: 580px; ኅዳግ: 5 ፒክስል አውቶማቲክ; ድንበር: 1 ፒክሰል ጠንካራ #FFFFFF;}. clearfix: ከ {ይዘት: . ማሳያ: አግድ; ቁመት: 0; ግልጽ: ሁለቱም; ታይነት: ተደብቋል ፤} በእርግጥ እንደ ቀለሞች ፣ ቅርጸ-ቁምፊ መጠኖች ፣ የተሻለ የሚመስል የአሰሳ ማገጃ ፣… ግን ይህ አስተማሪዎች ስለ ዲቪ አወቃቀር ብቻ ነው። ሌሎች ተዛማጅ አስተማሪዎችን ማየት ከፈለጉ ሁል ጊዜ መጠየቅ ይችላሉ። ጊዜ ማግኘት ከቻልኩ እመለከታለሁ።