የድር ጣቢያ ገጽ አባላትን ለማሽከርከር በጣም ቀላል መንገድ - ጥቂት የሲ.ኤስ.ኤስ ቅጦችን ይተግብሩ ፡፡ ከዚህ ትምህርት ጋር መተዋወቅ ያልተለቀቀ የካርድ አድናቂ ፣ የተበተኑ የወደቁ ቅጠሎችን ወይም ቄንጠኛ ፎቶዎችን በገጹ ላይ ባለው አልበም ውስጥ ለማስቀመጥ ያስችልዎታል ፡፡ ትምህርቱ የፎቶ አልበም አፈፃፀም ምሳሌን ይ andል እና ለሁሉም ዘመናዊ አሳሾች መፍትሄውን ከግምት ውስጥ ያስገባ ነው ፡፡
አስፈላጊ ነው
አራት ፎቶግራፎች እስከ 450 ፒክስል ስፋት
መመሪያዎች
ደረጃ 1
ይህ ምሳሌ በሚሽከረከሩ ፎቶዎች ቄንጠኛ የአልበም ገጽ በመፍጠር ላይ ያተኩራል ፡፡
በቅድሚያ ምስሎችን (ስፋት 400 ፒክስል) ከአድራሻዎች ጋር አዘጋጅቻለሁ-
ለወደፊቱ እንደ መታወቂያ መታወቂያዎችን እንደ ስማቸው እንመድባቸዋለን ፡፡
ደረጃ 2
በመጀመሪያ ፣ የዲቪ መለያውን በመጠቀም ለፎቶ አልበማችን ማገጃ እናዘጋጃለን ፣ እንዲሁም የ img መለያ በመጠቀም ፎቶዎችን እንጨምርበታለን (እያንዳንዱ ምስል በራሱ የዲቪ መለያ ውስጥ መዘጋት አለበት) ፣ እንደዚህ
እባክዎ ልብ ይበሉ ለጠቋሚው አንድ መለያ ለብተናል -. በመለያው ፣ css ን በመጠቀም ማገጃውን ማመልከት እንችላለን ፡፡
ደረጃ 3
በመቀጠልም የሲ.ኤስ.ኤስ ቅጦችን ወደ ማገጃው ማዘጋጀት ያስፈልግዎታል ፡፡ የቅጦች ዝርዝር: "አቀማመጥ: ዘመድ;" - የቤታችንን የላይኛው ግራ ጥግ መነሻውን ያዘጋጃል; "ህዳግ: 50px auto;" - የእኛን “50 ፒክስል” መነሻ ከቀሪው ገጽ ይዘት በላይ እና በታች ያዘጋጃል ፣ እንዲሁም አውቶማቲክ ኢንደክሽን ወደ ቀኝ እና ወደ ግራ ያዘጋጃል ፣ በዚህም ማገጃችንን በማዕከሉ ውስጥ ያስተካክላል ፣ ስፋት 900px ፣ ቁመት 650px; - በቅደም ተከተል ስፋቱን ወደ 900 ፒክስል እና ቁመቱን ደግሞ 650 ፒክስል ያደርገዋል ፡፡
የተገለጹት የቅጦች ዝርዝር በዚህ መንገድ መቀመጥ አለባቸው-
# ፎቶ_ገጽ {
አቀማመጥ: ዘመድ;
ህዳግ: 0 ራስ;
ስፋት: 900px;
ቁመት 650 ፒክስል;
ጽሑፍ-አሰልፍ: መሃል;
}
የ "# ፎቶ_ገጽ" አጠቃቀምን ልብ ይበሉ - የማገጃ መታወቂያውን የምንመለከተው በዚህ መንገድ ነው ፡፡
ደረጃ 4
አሁን በፎቶ_ገጽ ማገጃው ውስጥ ለእያንዳንዱ ምስል አጠቃላይ ቅጦችን እንመድባለን ፡፡ እነዚህ የተጠጋጉ ማዕዘኖች ፣ ግራጫ ድንበር ፣ ነጭ ጀርባ ፣ መደረቢያ እና የጣለ ጥላ ናቸው ፡፡
ይህ የፎቶግራፍ ውጤት ይፈጥራል
# ፎቶ_ገጽ img {
ድንበር-ራዲየስ 7px;
ድንበር: 1 ፒክስል ጠንካራ ግራጫ;
ዳራ #ffffff;
መቅዘፊያ: 10px;
የሳጥን-ጥላ: 2 ፒክስል 2 ፒክስል 10 ፒክስል # 697898;
}
የ "#photo_page img" አጠቃቀምን ልብ ይበሉ - ይህ በፎቶ_ገጽ ማገጃው ውስጥ ያሉትን ሁሉንም ምስሎች ይመለከታል
ደረጃ 5
ይህን የመሰለ አጭር ዘይቤ ማከልም አስፈላጊ ነው-
# ፎቶ_ገጽ ዲቪ {
ተንሳፋፊ: ግራ;
}
በፎቶ_ገጽ ማገጃው ውስጥ ያሉትን ሁሉንም ብሎኮች ወደ ግራ ያጠፋል።
ደረጃ 6
የትምህርቱ መካከለኛ ደረጃ አሁን ተጠናቀቀ ፡፡ ስራዎ በቅጽበታዊ ገጽ እይታ ውስጥ ካለው ምስል ጋር ተመሳሳይ ከሆነ ስህተት አልሰሩም እና ወደሚቀጥለው እርምጃ መቀጠል ይችላሉ።
ደረጃ 7
አሁን የተለጠፉትን ፎቶዎች ለማዞር እንዞራለን ፡፡ ለዚህም እኛ የምንለውጠው የትራንስፎርሜሽን ዘይቤ ነው ፡፡ በአሁኑ ጊዜ በንጹህ አሠራሩ ውስጥ ጥቅም ላይ አይውልም ፣ ግን መጀመሪያ ላይ ለእያንዳንዱ አሳሽ ቅድመ ቅጥያ ብቻ ፣ እንደዚህ ፡፡
-webkit-transform: ማሽከርከር (ዋጋ);
-ሞዝ-ትራንስ: ማሽከርከር (ዋጋ);
-o-transform: ማሽከርከር (እሴት);
ይህ ለአሳሾች የማሽከርከር ዘይቤ ነው-ጉግል ክሮም ፣ ማዚላ ፣ ኦፔራ (በቅደም ተከተል) ፡፡ “እሴት” ከሚለው ቃል ይልቅ መጨረሻ ላይ አንድ ቁጥርን እንደዚህ እናደርጋለን ፣
90 ደግ - በሰዓት አቅጣጫ 90 ዲግሪ አሽከርክር ፡፡
-5deg - በተቃራኒ ሰዓት አቅጣጫ -5 ዲግሪዎች ይሽከረከሩ።
ወዘተ
ደረጃ 8
ቅጥ ለፎቶ ፎቶ_1:
# ፎቶ_1 {
-webkit-transform: ማሽከርከር (5deg);
-ሞዝ-ለውጥ: ማሽከርከር (5deg);
-o-transform: ማሽከርከር (5deg);
}
የመጀመሪያው ምስል 5 ዲግሪ ዞሯል ፡፡
ደረጃ 9
ቅጥ ለፎቶ ፎቶ_2:
# ፎቶ_2 {
-webkit-transform: ማሽከርከር (-3deg);
-ሞዝ-መለወጥ: ማሽከርከር (-3deg);
-o-transform: ማሽከርከር (-3deg);
}
ሁለተኛው ምስል ዞሯል -3 ዲግሪዎች.
ደረጃ 10
ቅጥ ለፎቶ ፎቶ_3:
# ፎቶ_3 {
-webkit-transform: ማሽከርከር (-2deg);
-ሞዝ-ትራንስ: ማሽከርከር (-2deg);
-o-transform: ማሽከርከር (-2deg);
}
ሦስተኛው ምስል ዞሯል -2 ዲግሪዎች ፡፡
ደረጃ 11
ቅጥ ለፎቶ ፎቶ_4:
# ፎቶ_4 {
-webkit-transform: ማሽከርከር (8deg);
-ሞዝ-ትራንስ: ማሽከርከር (8 ደግ);
-o-transform: ማሽከርከር (8deg);
}
አራተኛው ምስል 8 ዲግሪ ይሽከረከራል ፡፡
ደረጃ 12
የምስሎችን አቀማመጥ እንዴት ማስተካከል እንደሚችሉ እስቲ እንመልከት ፡፡ ለምሳሌ ፣ የመጀመሪያውን ምስል 20 ፒክስልን ከላይ እና ከግራ በኩል 10 ፒክስልን ለማካካስ ይፈልጋሉ ፡፡ በዚህ አጋጣሚ የሕዳግ ዘይቤን መጠቀም ያስፈልግዎታል ፡፡ ለጉዳያችን ለመጠቀም ትክክለኛው መንገድ ይኸውልዎት-
# ፎቶ_1 {
ህዳግ: 20px -10px -20px 10px;
-webkit-transform: ማሽከርከር (5deg);
-ሞዝ-ለውጥ: ማሽከርከር (5deg);
-o-transform: ማሽከርከር (5deg);
}
የቅጡ የመጀመሪያ እሴት የላይኛው ህዳግ መሆኑን እባክዎ ልብ ይበሉ; ሁለተኛው ደግሞ በቀኝ በኩል ያለው ኢንደስት ነው ፡፡ ሦስተኛው ከታችኛው ክፍል ነው ፡፡ አራተኛ - ግራ ገብ።
አስፈላጊ-በእኛ ሁኔታ ፣ የታችኛው ህዳግ ከከፍተኛው ህዳግ አሉታዊ እሴት ጋር እኩል ነው ፡፡በገጽዎ ላይ ካለው ምስል በታች ነጭ ቦታን ካዩ የምስሉን ታችኛው ክፍል የበለጠ አሉታዊ በሆነ መልኩ ለማስገባት ይሞክሩ ፡፡
ደረጃ 13
ስራው ተጠናቅቋል ፣ ቅጽበታዊ ገጽ እይታን አቀርባለሁ (በደረጃ 12 ውስጥ በተገለጸው የመጀመሪያ ምስል ላይ ያለውን ለውጥ ከግምት ውስጥ በማስገባት) ፡፡
እርስዎን ለማስማማት ቦታ በሌላቸው ማናቸውም ምስሎች ላይ የመግቢያ ዘይቤን ያክሉ።
