ምስል ወደ አንድ የድረ-ገጽ ገጽ ግራ ገጽታ ለመደርደር CSS ን መጠቀም
ዛሬ ማንኛውንም የድረ ገጽ ገጽ ውስጥ ይመልከቱ እና እነዛን ገጾች በብዛት የያዘ የጽሁፍ እና ምስሎችን ጥምረት ታያለህ. ጽሑፍን እና ምስሎችን ወደ አንድ ገጽ ማከል በጣም ቀላል ነው. ጽሑፉ እንደ አንቀጽ, ዝርዝሮች እና ርእሶች ያሉ መደበኛ ኤችቲኤምኤል መለያዎችን በመጠቀም ኮድ የተሰየመ ሲሆን ምስሎቹ ን በመጠቀም በመጠቀም ይካተታሉ.
ያንን ጽሑፍ እና እነዚያ ምስሎች በአንድ ላይ በደንብ ለመስራት ያላቸው ችሎታ ታላላቅ የድር ዲዛይነሮችን ይለያል! ጽሁፎችዎ እና ምስሎችዎ አንድ ላይ ሆነው እንዲታዩ ብቻ አይደለም, ይህም በነባራዊ ደረጃ ክፍሎች በነባሪነት እንዴት እንደሚያስተካክለው ነው. አይሆንም, ጽሁፉ እና ምስሎች እንዴት እንደሚፈስሱ እንዲቆጣጠሩ ይፈልጋሉ, በመጨረሻም በዌብ ሳይትዎ የእይታ ንድፍ.
ከገጹ ግራ በኩል ጋር የተዛመደ ምስል ሲኖር የዚያ ገፅ ጽሁፍ በዙሪያው ሲዘዋወር ለህትመት ዲዛይን እንዲሁም ለድረ-ገፆች የተለመደ የዲዛይን ህክምና ነው. በድር ደረጃ ውስጥ ይህ ውጤት ምስሉ ተንሳፈፍ ተብሎ ይታወቃል . ይህ ቅኝት በ "ሲት ፍላፍት" የሲሲል ንብረቶች ታይቷል . ይህ ባህሪ በስተግራ ግራ-ቀረጻ ምስል በስተቀኝ በኩል ወደ ቀኝ በኩል ይፈስሳል. (ወይም በስተግራ በኩል በትክክለኛ የተስተካከለ ምስል ዙሪያ.) ይህን የምስል ተፅዕኖ እንዴት ማግኘት እንደሚቻል እንመልከታቸው.
በ HTML ጀምር
እርስዎ ማድረግ ያለብዎ የመጀመሪያው ነገር ከሌሎች ጋር አብረው የሚሰሩ ኤችቲኤምኤል አላቸው. ለ ምሳሌአችን, የጽሑፉን አንቀፅ እንጽፋለን እና በአንቀጹ መጀመሪያ ላይ ምስልን እንጨምራለን (ከጽሁፍ በፊት, ግን ከመከፈቱ
መለያ በኋላ). የኤች ቲ ኤም ኤል ማርቆሻ ምን ይመስላል:
በነባሪ, የእኛ ድረ-ገጽ ከጽሁፍ በላይ ካለው ምስል ጋር ይታያል. ይህ የሆነው ምስሎች በኤች ቲ ኤም ኤል ውስጥ የእርምጃ ደረጃዎች ስለሆኑ ነው. ይህ ማለት አሳሽ በነባሪነት ከምስል ኤለመንት በፊት እና በኋላ የእርዳታ መስመሮችን ያሳያል. ወደ ሲኤስኤስ በማዞር ይህን ነባሪ እይታ እንለውጣለን. መጀመሪያ ግን, የክፍል እሴታችንን ለእታችን የምስል ክፍል እንጨምራለን. ያ ክፍል በኋሊ በሲሲሲዎቻችን ውስጥ የምንጠቀምበት "መንጠቆ" ሆኖ ያገለግላል.
ይህ "የተረፈ" ክፍል በራሱ በራሱ ምንም እንደማያደርግ ልብ ይበሉ! የፈለጉትን ቅኝላችን ለማሟላት, CSS ቀጣይ መጠቀም ያስፈልገናል.
የ CSS ባህሪያት
በተሰየመው የእኛ ኤችቲኤምኤል, የ "ግባ" ክፍፍል ባህሪን ጨምሮ, አሁን ወደ ሲኤስኤስ ልንገባ እንችላለን. ምስሉን ወደ ወረቀት ወደ ሚያሳጥነው ወረቀት ላይ እንጨምርና ከዚያም ምስሉን ለመጠቅለል የሚያመላክተው ጽሁፍ በጣም በቅርበት ወደ ጎን አይተላለፍም. እዚህ CSS ሊጽፉ ይችላሉ:
.lft {float: left; ጥቅል: 0 20px 20px 0; }ይህ ቅጥ በስተግራ ያለውን ምስል ያንሳፈፍ እና ትንሽ ምስል ማስተካከያ (አንዳንድ የሲ ኤስ ኤስ ጽሑፍን በመጠቀም) በምስሉ ቀኝ እና ግርጌ ላይ ይጨምረዋል.
ይህንን ኤችቲኤምኤል በአሳሽ ውስጥ ያለውን ገጽ ገምግሞ ከነበረ, ምስሉ አሁን ከግራ ጋር የተገጣጠመው ሲሆን በሁለቱ መካከል ባለው አግባብ ከሆነ የዓረፍተ ነገሩ ጽሑፍ በቀኝ በኩል ይታያል. እኛ የምንጠቀመው "የቀረው" የክፍል እሴት የዘፈቀደ ነው. "ልንወጣው" ምንም ስለማይሠራ አንድ ነገር ልንጠራው እንችላለን. ይሄ ሊሰሯቸው የሚፈልጓቸውን የሚታዩ ለውጦችን የሚወስን የ CSS ባህሪ ጋር የሚሰራ የኤችቲኤምኤል መደብ ክፍል እንዲኖረው ይፈልጋል.
እነዚህን ቅደም ተከተሎች ለማግኘት የሚያስችሉ የተለያዩ ዘዴዎች
የምስል ክፍሉ ለክፍል ባህሪ የመሰጠት አቀራረብ እና በመቀጠል ጠቅላላ የሲ.ኤስ. ቅጣትን በመጠቀም ኤለመንት የሚንሳፈፈው ይህ "ግራ የተያያዘ ምስል" እይታ ሊያከናውኑ የሚችሉበት አንድ መንገድ ብቻ ነው. በተጨማሪም የክፍለ ጊዜውን ዋጋ ከቅጽበት መውሰድ እና በሲአይኤስ ውስጥ ቅጥ ሊሰጡት ይችላሉ. ለምሳሌ, ያ ምስሉ "ዋና-ይዘት" የክፍል እሴትን የመከፋፈያ ክፍል ውስጥ ያለበትን አንድ ምሳሌ እንመልከት.
ይህን ምስል ለመመዘን, ይህን ሲኤስኤስ መጻፍ ይችላሉ:
.main-content img {float: left; ጥቅል: 0 20px 20px 0; }በዚህ የሶሴዮር ውስጥ, ልክ እንደበፊቱ ተንጸባርቋል. ነገር ግን ለትክክለታችን ተጨማሪ የክፍል እሴት ማከል አያስፈልገንም. ይህንን በደረጃ መለየት አነስተኛውን የኤች.ቲ.ኤም.ኤል ፋይል ለመፍጠር ሊያግዝ ይችላል, ይህም ለማቀናበር ቀላል እና አፈጻጸምን ለማሻሻል ይረዳል.
በመጨረሻም በቅጥያዎ ውስጥ ቀጥታ እስዎ ወደ ኤችቲኤምኤል መለያዎ ማከል ይችላሉ.
ይህ ዘዴ " የመስመር ውስጥ ቅጦች " ይባላል. የአንድን አባል ዘመናዊ መዋቅራዊ መዋቅርን ስለሚያመለክት ይህ አይፈለግም. የድር ምርጥ ልምዶች የአንድ ገጽታ አቀማመጥ እና አወቃቀር እንደነበሩ መወሰን አለባቸው. ይሄ ገጽዎ አቀማመጦቹን መለወጥ እና ከተለመደው ድር ጣቢያ ጋር ያሉ የተለያዩ ማያ ገጽ መጠኖችን እና መሣሪያዎችን ሲፈልጉ ይህ በጣም ጠቃሚ ነው. በኤችቲኤምኤል የተጣመረ የገጹን ቅጥ መፈለግ ለእነዚያ የተለያዩ ማያ ገጾች እንደ አስፈላጊነቱ የገጽዎን ገጽታ የሚያስተካክሉ ሚዲያ ጥያቄዎችን ለመፍጠር በጣም አስቸጋሪ ያደርገዋል.
የመጀመሪያ ጽሑፍ በጄኒፈር ክርኒን. በ Jeremy Girard የተስተካከለው 4/3/17.