CSS მაგიდა დიზაინი. მაგალითები რეგისტრაციის

მიღების მაგიდები CSS - გაკვეთილი საინტერესო და საპასუხისმგებლო. მიდგომა ამ ბიზნესის უნდა კომპეტენტურად, ცოდნა ყველა შესაძლო სტილის. გარდა ამისა, აუცილებელია ფლობდეს გრძნობა სილამაზის, რათა არ დააშინოს off მათი შემოქმედების სია.

მაგიდები გარდაქმნა თითქმის ყველაფერი. ლამაზი დიზაინი მოიცავს გამოყენება CSS მაგიდები დიზაინი საზღვრები, მაგიდა ფონზე, საკანში ფონზე, უფსკრული მათ და სხვა. განვიხილოთ ყველაზე ძირითადი.

table border

CSS მაგიდის სტილი დიზაინი ყოველთვის მოიცავს თამაში სასაზღვრო (ჩარჩო). ყველა default მაგიდები არ კონტურები ჩარჩო. რომ არის, ეს უდრის 0 პიქსელი. მაგრამ ეს შეიძლება შესწორებული მიერ ქონების საზღვარზე.

თქვენ შეგიძლიათ მიუთითოთ გარე ჩარჩო მთელი რეისები

მაგიდა {border: 3px მყარი შავი; }

მადლობა ამ ხაზის ყველა მაგიდები საიტზე, რომელიც იყენებს ამ სტილის არის შავი კარკასი. გაითვალისწინეთ, რომ საზღვარი მხოლოდ კიდეები, მაგრამ არა შიგნით მაგიდასთან. იყიდება საკანში ხაზები და ჩარჩო სხვაგვარად.

ე, td {border: 3px მყარი შავი;}

სისქე და ფერი, შეგიძლიათ მიუთითოთ ნებისმიერი. გაითვალისწინეთ, რომ საზღვრები არ გაორმაგდა, როდესაც splicing საკნები.

სიტყვა ნიშნავს მყარი უწყვეტი რეგისტრაცია. თქვენ შეგიძლიათ მიუთითოთ სხვა ფასეულობები.

ეს არის ყველაზე ხშირად გამოყენებული მყარი ჩარჩო, რადგან ის გამოიყურება უფრო მიმზიდველი და არ გადაიტანოს ყურადღება ძირითადი შინაარსის საიტი.

საზღვრის ქონება შეიძლება იყოს მითითებული ასევე ფორუმში. საზღვრის შეიძლება მხოლოდ მითითებული ზედა, ქვედა, მარცხენა ან მარჯვენა მხარეს. იმის გამო, რომ ზოგიერთ შემთხვევაში ეს არ არის მიზანშეწონილი ვარიანტი ჩარჩოს მთელი მაგიდა ერთდროულად.

მაგიდა {სასაზღვრო-top: 1px მყარი წითელი; }

ასე რომ, შეგიძლიათ ჩარჩოს ზედა მაგიდასთან მხოლოდ. მსგავსად ნებისმიერი სხვა პარტიები, ნაცვლად მხოლოდ ზედა მისწერე: მარჯვენა, მარცხენა და ქვედა.

მაგიდა header

მაგიდა header შეიძლება მითითებული გამოყენებით tag <წარწერა>. ეს tag შეიძლება იყოს CSS დარეგისტრირდეთ ბევრი თვისებები ჯარიმის tuning. ცენტრის მაგიდა დიზაინი არის კარგი, რადგან არ არის გამორიცხული, მანევრირება ელემენტები გზა გსურთ.

ეს სათაური გამოისახება ისევე, როგორც სტანდარტული წიგნები (როგორიცაა "ცხრილი 1").

თქვენ შეგიძლიათ მიუთითოთ მდებარეობა სათაური და საკუთრების წარწერა მხარეს (ზედა ან ქვედა). ისეთ მარცხენა ან მარჯვენა განისაზღვრება ქონება text-align.

ფონზე მაგიდები

Background მაგიდა შეიძლება იყოს ნებისმიერი ფერი და ნიმუში. ფერი ადგენს ქონების background-color. სახელები თვისებები სრულად შეესაბამება მიზნებისათვის გამოსვლა. ეს ხელს უწყობს შენახვის ბევრჯერ.

ფერი შეიძლება მითითებული, როგორც სახელი და განსხვავებული კოდირება. გარდა ამისა, თქვენ შეგიძლიათ მიუთითოთ შემდეგი:

• გამჭვირვალე - გამჭვირვალე.
• მემკვიდრეობით - ფერი იგივეა, რომ მშობელი ელემენტს.
• პირველი - იყოს.

ვარიანტი გამჭვირვალობა შეიძლება გამოყენებულ იქნას იმ შემთხვევაში, როდესაც ყველა მაგიდები ტექსტი CSS ფაილი კეთდება ერთი ფერი, მაგრამ ამ შემთხვევაში არ არის საჭირო.

გარდა ამისა, იმ ფონზე, შეიძლება იმიჯი. ამისათვის, სტილი დადგენილი ფონის სურათს ქონება. გზას, როგორც ეს:

url ( 'URL)

გეზი ფაილი შეიძლება იყოს ნათესავი ან აბსოლუტური.

უფრო რთული შევსების შეიძლება გაკეთდეს გრადიენტი:

• წრფივი-გრადიენტი ();
• რადიალური-გრადიენტი ();
• იმეორებს ხაზოვანი-გრადიენტი () და იმეორებს-სხივური-გრადიენტი () - გრადიენტი განმეორდეს.

ფონზე საკანში

გარდა ამისა, ფონზე ზოგადად, თქვენ შეგიძლიათ მიუთითოთ ზოლიანი ფონზე სვეტების ან რიგები. რეგისტრაციის ქონება გამოიყენება ძალიან ხშირად, რადგან ვიზუალური გამოყოფის ხაზები ადვილი წასაკითხი ინფორმაცია.

გარდა ამისა, ცვალებადობა, და თქვენ შეგიძლიათ მიუთითოთ რაოდენობის კონკრეტული სვეტის ან row. მაგალითად, როგორც ეს:

• tr: nth ბავშვის (თუნდაც) {...} - დააკონკრეტა მორიგეობითი;
• tr: nth-შვილი (1) {...} - მითითებით თვისებები კონკრეტული ზედიზედ;
• td: nth ბავშვის (თუნდაც) {...} - მითითებით მონაცვლეობით სვეტები;
• td: nth-შვილი (1) {...} - მითითებით თვისებები კონკრეტული სვეტი.

გარდა ამისა თანმიმდევრობით და ციფრები შეიძლება მითითებული - პირველი (td: პირველი შვილი) და ბოლო (td: ბოლო შვილი).

უფსკრული საკნები

In CSS, მაგიდის დიზაინი საშუალებას გაძლევთ ამოიღონ ფართების შორის საკნები. By default ისინი. მაგალითად, თუ თქვენ ჩარჩო მაგიდასთან გარეშე შექმნის შორის მანძილი საზღვრები, ეს იქნება აქ ეს შედეგი.

ვეთანხმები, ეს გამოიყურება ძალიან ლამაზი და ეს არ არის მოსახერხებელი წაიკითხა. მომხმარებელი ექნება ტალღური თვალში გამო. ამოიღონ ეს ხარვეზები შეიძლება წერილობით მხოლოდ ასეთი ხაზი მაგიდასთან სტილი:

სასაზღვრო-დაშლის: დაშლის

მაგრამ ეს ასევე ხდება, რომ მანძილი, პირიქით, უნდა გაიზარდოს. უფრო მეტიც, ზომა ხარვეზები შეიძლება განისაზღვროს, როგორც შორის სვეტები და ხაზებს შორის. მიუთითებს იმაზე, რომ მნიშვნელობა (ნაცვლად დაიშალოს):

სასაზღვრო-დაშლის: ცალკე

მაგრამ ამგვარი ქმედება მიუთითებს, რომ აუცილებელია ცალკე საკნებში. როგორც ეს იყო მათი წილი, მითითებული დამატებით ქონებად:

სასაზღვრო-spacing: 20px.

თუ გსურთ მიუთითოთ განსხვავებული შორის მანძილი რიგები და სვეტები, ეს მიუთითებს იმაზე, ორი რამ:

სასაზღვრო-spacing: 10px20px.

განსხვავება ბრაუზერები

გაითვალისწინეთ, რომ CSS დიზაინი მაგიდები შეიძლება სხვადასხვა, დამოკიდებულია ბრაუზერში. განსაკუთრებით ცუდი არის საქმე ძველი ვერსიები, რომ ინოვაციების CSS არ არის მხარდაჭერილი.

აღნიშნული მაგალითია ჩარჩო thicknesses ციფრული ღირებულებებს.

ამ მაგალითად, სისქე ფარგლებში მუდმივები.

საზღვრის სტილის ასევე მნიშვნელოვნად განსხვავდება.

აქედან გამომდინარე, განვითარება ყოველთვის ვხედავ შედეგი სხვადასხვა ბრაუზერებში.

In CSS დიზაინი მაგიდები რეკომენდებულია ტიპის ბრაუზერი. განსაკუთრებით დიდი პრობლემა გამოყენებული იქნება მომხმარებლების ძველი ვერსიის Internet Explorer.

ძალიან გაფართოებული ავტორებმა შეიძლება, დამოკიდებულია ბრაუზერის დაკავშირება სრულიად განსხვავებული CSS ფაილი. და ვინმე აკეთებს გამშვები თითოეული ან რამდენიმე კონკრეტული სტილი (კლასი).

ყველაზე პრობლემები წარმოიქმნება ჩრდილში.

CSS: Table ფორმატი მაგალითები

რეგისტრაციის შეიძლება საკმაოდ მრავალფეროვანი. ეს ყველაფერი დამოკიდებულია მთელი საიტი და მისი დიზაინი. ყველა უნდა გაერთიანდეს და მრავალფეროვანი ფერები. გარდა ამისა, ეს ხდის დიდი როლი და გემოს დეველოპერი. გრძნობა სილამაზის არის ყველა განსხვავებული.

ჩვენ გაძლევთ გარკვეული მაგალითები სხვადასხვა მაგიდები. ფიგურა ზემოთ გვიჩვენებს გამოყენების tilt და ითამაშოს ფონის ფერი და საზღვარი.

ბევრი იქნება საინტერესო მაგალითია ლამაზი სუფთა დიზაინი, რომელიც არ გაჭრა თვალის მომხმარებლებს. ამ განსახიერება არის შესაბამისი თითქმის ნებისმიერ სიტუაციაში.

კიდეები შეიძლება გაკეთდეს მომრგვალებული. ეს გამოიყურება საკმაოდ ლამაზი.

დასკვნა

როგორც ხედავთ, გამოჩენა მაგიდები CSS არსებობს მრავალი ინსტრუმენტები. ყოველი პარამეტრი ასევე დიდი ღირებულების პარამეტრები. თუ თქვენ იყენებთ მას ერთდროულად, შეგიძლიათ შექმნათ შედევრები. განსაკუთრებით თუ ადაპტური დიზაინი ყველა ბრაუზერები.

მთავარია დიზაინი - არ overdo ეს ეფექტი. ყველაფერი უნდა გაკეთდეს ზომიერი. თავდაპირველად, განლაგება ექსპერიმენტი და გამოიყენოთ ყველა მათი ცოდნის დაუყოვნებლივ. შედეგად მაგიდა გადაჯერებული თვისებები. სცადეთ თავიდან ასაცილებლად ეს შეცდომები.

უფრო მეტიც, ზოგიერთი პარამეტრების ერევა ერთმანეთს. მაგალითად, არ არის საჭირო მიუთითოთ ფონის ფერი მაგიდა, ხოლო თუ არსებობს მაინც მითითებული ფონის გამოსახულება, რომელიც გადახურვა მითითებული ფერი.