कधीकधी हेडर किंवा साइडबार (किंवा कदाचित दोन्ही) वेबसाइटवर निश्चित करणे आवश्यक असते. म्हणजेच, तुमचे अभ्यागत कितीही स्क्रोल करत असले तरी, सामग्री हलवेल आणि निश्चित घटक नेहमी त्याच स्थितीत राहील. खरं तर, यात काहीही क्लिष्ट नाही आणि आज मी तुम्हाला घटकांची स्थिती कशी निश्चित करावी हे उदाहरणासह दर्शवेल.

आमचा धडा सुरू करण्यापूर्वी, मी असे म्हणू इच्छितो की अशा प्रकारे आपण केवळ शीर्षलेख किंवा साइडबारचे निराकरण करू शकत नाही. तुम्ही पण करू शकता निश्चित स्थितीफूटरसाठी किंवा कदाचित तुम्हाला बाजूला कुठेतरी काहीतरी बटण बनवायचे आहे जे नेहमी दृश्यमान असेल. सर्वसाधारणपणे, हे सर्व आपल्याला त्याची आवश्यकता का आहे यावर अवलंबून असते.

या धड्यात, मी हेडर आणि साइडबार निश्चित करणे दर्शवेल (जरी साइडबारच्या जागी काही प्रकारचे बॅनर किंवा सदस्यता फॉर्म असू शकतात, उदाहरणार्थ).

बरं, चला सुरुवात करूया!

वेब पृष्ठावरील शीर्षलेख आणि साइडबारची स्थिती निश्चित करणे

1. तुम्हाला सर्वप्रथम आमच्या पेजसाठी html फाईल तयार करायची आहे. येथे मी एक अतिशय सोपी पृष्ठ रचना तयार करेन. यात टॅगमध्ये तीन हेडिंग असलेले हेडर असेल शीर्षलेख; टॅगमध्ये ठेवलेल्या लिंक्स आणि कॅप्शनसह साइडबार बाजूला; नेव्हिगेशन लिंक्स स्वतः टॅगमध्ये स्थित असतील nav; टॅगमधील पृष्ठ सामग्री लेखआणि टॅगमध्ये तळटीप तळटीप.

तुम्ही बघू शकता, मी उदाहरणात html5 टॅग वापरतो. हे महत्त्वाचे नाही आणि काही कारणास्तव आपण ते वापरू इच्छित नसल्यास, आपण सुरक्षितपणे टॅग वापरू शकता div, त्यांना योग्य अभिज्ञापक नियुक्त करताना. हे घटकांच्या निर्धारणावर कोणत्याही प्रकारे परिणाम करणार नाही, मला काळजी नाही या प्रकरणात html5 वापरणे अधिक सोयीचे आहे.

आपण टॅग वापरत असल्यास divअभिज्ञापकांसह, नंतर स्टाईल शीट फाईलमध्ये योग्य बदल करण्यास विसरू नका (जेव्हा आम्ही त्यावर पोहोचतो). उदाहरणार्थ, आपण टॅगऐवजी वापरल्यास शीर्षलेख, टॅग div id="शीर्षलेख", नंतर स्टाईल शीटमध्ये तुम्ही यासाठी गुणधर्म निर्दिष्ट कराल #हेडर(…शैली…), साठी नाही शीर्षलेख (...शैली...).

सामग्री म्हणून, मी विशेषतः Lorem Ipsum (मजकूर तयार करण्यासाठी एक संसाधन) मध्ये अधिक परिच्छेद व्युत्पन्न केले जेणेकरून आम्हाला नंतर स्क्रोल करण्याची आणि आमच्या घटकांचे निर्धारण तपासण्याची संधी मिळेल.

तर, टिप्पण्यांसह html फाईलची सामग्री येथे आहे:

पृष्ठावरील घटक निश्चित करणे

निश्चित शीर्षलेख असलेली वेबसाइट

ही टोपी नेहमी इथेच राहील...

तुम्ही कितीही स्क्रोल करा!

आमच्या साइटचा साइडबार

लक्ष द्या! हा साइडबार देखील जागीच राहील... कारण आम्ही ते निश्चित केले आहे

येथे मी विशेषतः ठेवीन अधिक सामग्री, त्यामुळे तुम्ही स्क्रोल करू शकता!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at Sem NEC NISL ultricies dignissim quis a velit. Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam. नाम परुस दिम, सगित्तिस वोलुत्पात वाहन एसी, एडिपिसिंग एसी उर्ना. अलिक्वम रुट्रम डिग्निसिम ॲकम्सन. डोनेक पल्विनर सेम व्हिटा डोलर सोडलेस लोबोर्टिस इगेट इन मेटस. Suspendisse ac augue at mi lacinia commodo eget interdum diam. Praesent felis erat, mollis nec est quis, malesuada congue felis. Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. Quisque vehicula eros sit amet leo feugiat, in rutrum diam vulputate. Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. Nulla vestibulum felis id bibendum accumsan.

सोलिसिटुडिन फॅरेट्रा मध्ये iaculis arcu मध्ये. सोयीस्कर. Proin diam neque, viverra pretium mauris sit amet, placerat viverra orci. इंटिजर ससिपिट कॉन्ग्यू ऑडिओ, आयडी इजेस्टास इप्सम अल्ट्रिकेस व्हेल. Donec porttitor convallis adipiscing. Duis sollicitudin libero id sollicitudin mattis. वेस्टिबुलम पेलेंटेस्क इरॉस डुई, सस्पिपिट आर्क्यु एलिमेंटम नॉन. पूर्णांक sagittis nec risus ac suscipit.

Aenean a nunc id nunc ornare varius. Donec volutpat nisi et metus pulvinar pellentesque. Etiam porta mauris nec consectetur sagittis. Nunc ligula risus, sollicitudin at lacus eu, sodales vehicula quam. सस्पेंडिस वेनेनाटिस सेपियन सेड रुट्रम लॉरेट. सस्पेंडिस फॅसिलिसिस रिझस ए ऑग्यू फॅसिलिसिस स्क्लेरिसिक. पेलेंटेस्क ट्रिस्टिक टेलस एसी बिबेंडम रुट्रम. Etiam nulla urna, molestie id bibendum sodales, rutrum nec sapien. सोयीस्कर. आमच्यासाठी सादर करा. Phasellus ultrices leo id dui condimentum, et pharetra magna lacinia. Nulla बस amet sagittis tortor.

Vivamus id neque magna. Phasellus suscipit orci quis tortor accumsan, vitae vestibulum leo ultrices. डोनेक विवेरा लोरेम वेल पुरस वेस्टिबुलम सस्पिट. Sed congue erat tincidunt nibh ultrices tempor. hac habitasse platea dictumst मध्ये. नाम नॉन पेलेंटेस्क डॉलर. फेसेलस एलिमेंटम लॉबोर्टिस ऑर्की आणि पोस्यूअर. Ut eget felis accumsan, sollicitudin ante quis, venenatis felis. Ut nec mi ornare, ultricies orci vel, pharetra odio. मॉरिस अल्ट्रिकेस फेलिस क्विस नुल्ला ऑर्नारे, व्होलुटपॅट फॅसिलिसिस लिबेरो मोलेस्टी. Ut sodales pellentesque arcu. हे सर्व सामान्य आहे. Ut laoreet massa risus, quis facilisis ligula ullamcorper at. नुल्लम एनईसी वेलीट इन सेम सेम्पर ऑरनारे.

फ्यूस ए डिक्टम लिओ, ut sagittis mi. क्युराबिटर टेम्पस एलिमेंटम लॉबोर्टिस. Duis ultricies tincidunt enim, porta turpis condimentum pellentesque मध्ये. Nulla augue libero, accumsan nec imperdiet ut, hendrerit at erat. hac habitasse platea dictumst मध्ये. सस्पेंडिस ullamcorper venenatis est non pulvinar. Pellentesque NEC placerat elit. Maecenas बसू मी enim. In ut velit nec leo sagittis vehicula nec a mi. सस्पेंडिस ut vehicula arcu, vitae dictum Magna. Maecenas odio ante, luctus nec hendrerit et, pellentesque a mi. फॅसिबस ऑरसी लक्टस आणि अल्ट्रासेस पॉस्युअर क्यूबिलिया क्यूरेमध्ये वेस्टिबुलम ॲन्टे इप्सम प्रिमिस; Nunc id condimentum eros. Nulla lobortis congue libero, eget tincidunt dolor venenatis in. ऑक्टर ऑर्कीकडे आहे.

मी फूटरचे निराकरण केले नाही, परंतु मला वाटते की हे कसे केले जाऊ शकते हे तुम्हाला आधीच समजले आहे!

2. तुमच्या लक्षात आले असेल की स्टाईल शीट फाइल आधीच समाविष्ट केलेली आहे, ती तयार करणे बाकी आहे.

म्हणून, “fix.css” नावाची css फाईल तयार करा (तुम्ही तिला वेगळे नाव देऊ शकता, परंतु नंतर href विशेषतामध्ये बदलण्यास विसरू नका. लिंक टॅग, ज्यामध्ये स्टाईल शीट फाइल समाविष्ट आहे) आणि आमच्या html फाईल प्रमाणेच डिरेक्टरीमध्ये सेव्ह करा.

चला css फाईल उघडू, आत्ता ती ब्राउझरमध्ये अशी दिसू द्या.

चला शैलींमध्ये प्रवेश करूया आणि सर्वकाही त्याच्या जागी ठेवूया.

प्रथम, मी एक नियम लिहीन जेणेकरुन माझे सर्व html5 घटक ब्लॉक घटक म्हणून प्रदर्शित केले जातील (या घटकांना समर्थन न देणाऱ्या जुन्या ब्राउझरसाठी हा एक उपाय आहे. तुम्ही html5 टॅग वापरत नसल्यास, तुम्हाला लिहिण्याची गरज नाही. ही ओळ). मी टॅगसाठी एक नियम देखील सेट करेन शरीर: आम्ही त्याला रुंदी, मध्यभागी संरेखन, सीमा आणि पार्श्वभूमी रंग देऊ.

लेख, बाजूला, तळटीप, शीर्षलेख, एनएव्ही (प्रदर्शन: ब्लॉक;) मुख्य भाग (रुंदी: 980px; समास: 0 स्वयं; सीमा: 1px घन #333; पार्श्वभूमी:#ffdfbf;)

पृष्ठ आता असे दिसले पाहिजे.

आम्ही पृष्ठ केंद्रस्थानी ठेवले आहे, आता हेडरच्या शैलीकडे जाऊ.

आमचे शीर्षलेख निश्चित करण्यासाठी, आपल्याला त्याची उंची, रुंदी सेट करणे आणि लिहिणे आवश्यक आहे स्थिती: निश्चित. या प्रकरणात, आम्हाला टॅगच्या रुंदीइतकीच रुंदी आवश्यक आहे शरीर, म्हणजे, 980px, आणि मी 300px मूल्याच्या समान उंची घेतली.

आता प्रॉपर्टीबद्दल बोलूया स्थिती. केव्हा साठी स्थितीदिलेले मूल्य निश्चित, नंतर घटक निश्चित केला आहे ठराविक जागापृष्ठे तसेच मूल्यासह स्थिती: निश्चितसारख्या गुणधर्मांचा वापर करून आपण घटकाची स्थिती समायोजित करू शकतो वर, उजवीकडे, तळाशीआणि बाकी(परंतु टोपीच्या बाबतीत आम्हाला याची गरज भासणार नाही). या पोझिशनिंगसह एक घटक विंडोच्या निर्देशांकांशी जोडलेला असतो आणि पृष्ठ स्क्रोल करताना तो जागीच राहतो.

मी आमच्या हेडरला एक रंग, एक फ्रेम देखील देईन आणि त्यातील मजकूर मध्यभागी ठेवू.

आणि या टप्प्यावर, आपल्या पृष्ठावरील शीर्षके आणि परिच्छेद टॅग शैलीबद्ध करूया. येथे काही विशेष नाही - आम्ही फक्त फॉन्ट शैली, रंग आणि काही इंडेंट सेट करू.

हा कोड तुमच्या सीएसएस फाइलमध्ये जोडा:

शीर्षलेख(उंची:300px; रुंदी:980px; सीमा-तळा:1px ठोस #333; पार्श्वभूमी:#ECB035; मजकूर-संरेखित: केंद्र; स्थिती: निश्चित;) शीर्षलेख h1, शीर्षलेख h2, शीर्षलेख h3, लेख p, तळटीप p, बाजूला p(font-family:Arial, Helvetica, sans-serif; color:#336;) शीर्षलेख h1(मार्जिन-टॉप:0px; पॅडिंग-टॉप:50px;)

जर आपण आत्ता आमचे पेज बघितले तर आपल्याला खालील गोष्टी दिसतील.

3. टोपी निश्चित आहे. तुम्ही पेज खाली स्क्रोल करू शकता आणि ते हलणार नाही याची खात्री करा.

परंतु, जसे आपण आधीच लक्षात घेतले असेल की, आमची काही सामग्री शीर्षलेखाखाली गेली आहे - हे असेच असावे, हे या स्थितीचे वैशिष्ट्य आहे. लवकरच आम्ही सर्वकाही त्याच्या जागी ठेवू.

आत्तासाठी, आमचा साइडबार स्टाईल करणे सुरू करूया, ज्याचे आम्ही निराकरण देखील करणार आहोत.

आम्हाला साइडबारसाठी रुंदी देखील परिभाषित करणे आवश्यक आहे, त्यास एक निश्चित स्थान देणे आवश्यक आहे आणि येथे आम्ही गुणधर्म देखील वापरू. शीर्ष, कारण आम्हाला साइडबार ब्लॉकची स्थिती समायोजित करायची आहे आणि हेडरच्या खाली हलवावे लागेल (अन्यथा हेडरच्या मागे राहील). मी त्यासाठी घेतले शीर्षमूल्य 330px (300px आमच्या शीर्षलेखाची उंची आहे आणि + आणखी 30 पिक्सेल जेणेकरून हेडर आणि साइडबार एकमेकांना चिकटणार नाहीत).

पोझिशनिंगसाठी हे मूलभूत आहे. उर्वरित शैली रंग, सीमा, मजकूर पॅडिंग, मजकूर आकार इ. जोडतात.

हा कोड तुमच्या स्टाईलशीट फाइलमध्ये जोडा.

बाजूला (स्थिती:निश्चित; रुंदी:200px; पार्श्वभूमी:#99C; top:330px; सीमा:1px डॅश #333;) बाजूला h2(font-family:Arial, Helvetica, sans-serif; font-size:16px; पॅडिंग: 10px;) p(padding-left:30px; font-size:14px; padding-right:10px;) बाजूला li(list-style-type: none; font-family:Arial, Helvetica, sans-serif;) बाजूला a(मजकूर-सजावट:काहीही नाही; रंग:#FFF;)

आणि हेच आपल्याला मिळते.

4. आपण पाहू शकता की घटक निश्चित केले आहेत, तथापि, आमच्या सामग्रीचा मजकूर त्यांच्या खाली शांतपणे स्थित आहे, जणू ते तिथेच नव्हते.

हे निराकरण करणे खूप सोपे आहे, कारण आम्हाला आमच्या शीर्षलेखाची उंची आणि साइडबारची रुंदी तसेच पृष्ठाची रुंदी माहित आहे. पृष्ठाची रुंदी 980px आहे आणि साइडबारची रुंदी 200 आहे. म्हणून, आम्ही सामग्री ब्लॉकची रुंदी 700px वर सेट करू शकतो आणि डाव्या किनारी 230 px (30 px) पासून इंडेंट करू शकतो जेणेकरुन सामग्री ब्लॉक साइडबारला "चिकटून" राहणार नाही ). आणि हेडरची उंची 300px आहे हे जाणून, आम्ही शीर्ष इंडेंट 300px वर देखील सेट करू शकतो (येथे आम्ही अधिक घेत नाही, कारण लेखाच्या सुरुवातीला शीर्षस्थानी आधीच शीर्ष इंडेंट आहे).

आम्ही तळटीपासाठी (फक्त त्याचे स्वरूप निश्चित करण्यासाठी) साध्या शैली देखील सेट करू.

तुमच्या स्टाईलशीट फाइलमध्ये कोडचा शेवटचा तुकडा जोडा आणि परिणाम पहा.

लेख(रुंदी:700px; पॅडिंग-टॉप:300px; पॅडिंग-डावीकडे:230px;) तळटीप(मजकूर-संरेखित:केंद्र; रुंदी:980px; उंची:30px; पार्श्वभूमी:#ECB035; समास-टॉप:30px;)

आता तुम्ही स्क्रोल आणि स्क्रोल करू शकता आणि तुमचे हेडर आणि साइडबार नेहमी तुमच्या डोळ्यांसमोर असतील.

मी इथेच संपवतो. तुम्ही नेहमीप्रमाणे, धड्याच्या स्त्रोतांमध्ये स्त्रोत फाइल्स शोधू शकता आणि धड्याच्या सुरूवातीस "डेमो" बटणावर क्लिक करून तुम्ही हे पृष्ठ तुमच्या ब्राउझरमध्ये पाहू शकता.

मला आशा आहे की धडा तुमच्यासाठी उपयुक्त होता! मी तुमच्या अभिप्रायाची वाट पाहत आहे! बटणे वापरून मित्रांसह धडा सामायिक करा सामाजिक नेटवर्क(मी खूप आभारी राहीन).

आणि तुम्ही ब्लॉग अपडेट्सची सदस्यता घेतली नसेल तर सदस्यता घ्या. हे पुढे आणखी मनोरंजक असेल.

तुम्हाला शुभेच्छा, मित्रांनो, चांगला वसंत मूड आणि यशस्वी प्रकल्प!

अण्णा कोटेलनिकोवा तुमच्यासोबत होती. पुन्हा भेटू!

सर्वांना नमस्कार. आज मी शोध क्वेरींची आकडेवारी पाहिली ज्याद्वारे लोक ब्लॉगवर जातात आणि असे आढळले की असे अनेक आहेत जे अजिबात संबंधित नाहीत. नाही, ब्लॉग नाही तर लेख.

त्यांच्यापैकी एक साइट शीर्षलेख कसे निश्चित करावे? मी ताबडतोब परिस्थिती दुरुस्त करण्याचा आणि एक लेख लिहिण्याचा निर्णय घेतला, कारण विषय संबंधित आहे आणि या क्षेत्रात प्रश्न आहेत.

सर्वसाधारणपणे, पृष्ठ स्क्रोल करण्याचे अनेक मार्ग आहेत. तुम्ही जावास्क्रिप्ट वापरू शकता, पण मी या विषयात फारसा बलवान नाही आणि फक्त ते शिकत आहे. म्हणून, आत्तासाठी, आम्ही CSS सह करू. देव आशीर्वाद, साइट शीर्षलेख निश्चित करा(आणि फक्त टोपीच नाही तर इतर कोणताही घटक), तुम्ही ते “थोड्या रक्ताने” करू शकता :)

खरं तर, पृष्ठ स्क्रोल करताना घटक निश्चित करण्याची पद्धत अगदी सोपी आहे आणि ही समस्या किती सहजपणे सोडवली जाते हे तुम्हाला आश्चर्य वाटेल.

पृष्ठ स्क्रोल करताना शीर्षलेख निश्चित करणे

शीर्षलेख निश्चित करण्यासाठी, तुम्हाला दोन ब्लॉक तयार करावे लागतील. एक म्हणजे टोपी मध्यभागी ठेवण्यास सक्षम असणे. आणि त्यात एक मूल आहे, ज्याची नोंद केली जाईल. चला सुरवात करूया...

हे खूप सोपे आहे html रचना! आता शैली जोडूया!

#headerMain ( width:920px; height: 195px; margin:0px auto; z-index:0; ) #header ( width:920px; height: 195px; पार्श्वभूमी: url(../img/bg-header.jpg) नाही -पुनरावृत्ती; स्थिर; 9999;

आता हेडर स्क्रीनच्या शीर्षस्थानी निश्चित केले जाईल आणि स्क्रोल करताना हलणार नाही.

मला वाटते की तुमच्यापैकी बऱ्याच जणांनी आधीच लक्षात घेतले आहे की ट्रेंडमध्ये आता अधिकाधिक चिकट डिझाइन घटक समाविष्ट आहेत जे वापरकर्ता पृष्ठ स्क्रोल करत असताना दृश्यमान राहतात. माझ्या मते, हे खूप सोयीस्कर आहे, विशेषतः जर ते साइट नेव्हिगेशन असेल. नेमके हेच उदाहरण आपण आज करणार आहोत. ॲनिमेशनसह JQuery आणि CSS3 वापरून ॲनिमेटेड वेबसाइट हेडर कसे बनवायचे ते आपण शिकू.

नेहमीप्रमाणे, हे कोडच्या किमान ओळींमध्ये केले जाते आणि ते अगदी सोपे आहे आणि त्याच वेळी खूप प्रभावी आहे. बरं, आता धड्यापासून सुरुवात करूया.

पण प्रथम मी http://www.webdesignerdepot.com चे खूप आभार मानू इच्छितो आणि आता आपण सुरुवात करूया.

Ι

HTML

एचटीएमएल कोड खूप, अगदी सोपा आहे, आम्हाला फक्त यासाठी टॅग सेट करणे आवश्यक आहे आणि नंतर त्यांच्यामध्ये साइट सामग्री लिहा:

हे सर्वात सोपे उदाहरण असल्याने, येथे आम्ही फक्त h1 टॅगमध्ये मजकूर जोडला आहे, परंतु तुम्ही प्रतिमा, किंवा, उदाहरणार्थ, साइट नेव्हिगेशन देखील वापरू शकता.

jQuery कोड

CSS सर्वात जास्त आहे सर्वोत्तम मार्गसध्या ॲनिमेशन आणि संक्रमणाची अंमलबजावणी करत आहे. म्हणून आम्ही कमीतकमी स्क्रिप्ट्स वापरू, आणि फक्त पृष्ठ स्क्रोल करताना ॲनिमेशनचे ट्रिगरिंग परिभाषित करण्यासाठी.

जेव्हा पृष्ठ स्क्रोल स्थिती मूल्य 1 पेक्षा जास्त असते, तेव्हा याचा अर्थ असा होतो की वापरकर्त्याने पृष्ठ स्क्रोल केले आहे आणि आपल्याला साइट शीर्षलेख टॅगमध्ये "चिकट" वर्ग जोडण्याची आवश्यकता आहे. अशा प्रकारे साइट हेडर ट्रिगर आणि निश्चित केले जाते.

आणि येथे कोड स्वतः आहे:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("चिकट"); ) else( $("header").removeClass ("चिकट");

मध्ये वापरा हे लक्षात घेणे महत्वाचे आहे या उदाहरणातफार चांगली कल्पना नाही, कारण जर ब्राउझरमध्ये स्क्रिप्ट्सचा वापर अक्षम केला असेल, तर साइट हेडर फक्त निश्चित केले जाईल आणि तेच.

CSS

CSS कोडमध्ये 2 भाग असतील. पहिला कोड मानक साइट शीर्षलेखासाठी जबाबदार असेल, जो डीफॉल्ट स्थितीत आहे. जेव्हा वापरकर्ता पृष्ठ स्क्रोल करतो तेव्हा शीर्षलेख प्रदर्शित करण्यासाठी दुसरा कोड जबाबदार असेल. चला डीफॉल्ट कोड कसा दिसतो ते पाहू:

शीर्षलेख (स्थिती: निश्चित; रुंदी: 100%; मजकूर-संरेखित: केंद्र; फॉन्ट-आकार: 72px; रेखा-उंची: 108px; उंची: 108px; पार्श्वभूमी: #335C7D; रंग: #fff; फॉन्ट-फॅमिली: "PT Sans ", sans-serif;)

आता सर्वात जास्त मनोरंजक मुद्दा: जेव्हा वापरकर्ता पृष्ठ खाली स्क्रोल करतो, तेव्हा .स्टिकी क्लास लागू होईल, ज्यामध्ये आम्ही CSS सक्षम असलेले पूर्णपणे वैविध्यपूर्ण प्रदर्शन देऊ शकतो. आम्ही एक निश्चित स्थान देखील सेट करू जेणेकरून आमची साइट शीर्षलेख नेहमी दृश्यमान असेल.

यासह CSS नियम, जे खाली आहेत, आम्हाला स्क्रोल करताना हेडरचे क्षेत्रफळ कमी करायचे आहे, रंग बदलायचा आहे आणि अर्थातच फॉन्ट कमी करायचा आहे. येथे कोड स्वतः आहे:

Header.sticky ( फॉन्ट-आकार: 24px; लाइन-उंची: 48px; उंची: 48px; पार्श्वभूमी: #efc47D; मजकूर-संरेखित: डावीकडे; पॅडिंग-डावीकडे: 20px; )

हे सर्वात सोपे उदाहरण आहे ज्याद्वारे तुम्हाला कामाचे सार समजले पाहिजे. हे सर्व आपल्या साइटच्या डिझाइनवर अवलंबून असते.

बरं, आता वापरून आपल्या संक्रमणामध्ये काही ॲनिमेशन जोडूया. हा कोड आहे:

संक्रमण: सर्व 0.4s सहज;

Ι

निष्कर्ष

मला आशा आहे की ही पद्धत साइटसाठी सोयीस्कर आणि सोप्या नेव्हिगेशनच्या अंमलबजावणीशी संबंधित अनेक प्रश्न सोडवेल. याशिवाय ही अंमलबजावणीअतिशय साधे आणि स्पष्ट.

तुमच्या विनंतीनुसार निश्चित शीर्षलेखआढळले 256 परिणाम

• हा धडा तुम्हाला एक टेबल कसा बनवायचा ते सांगेल निश्चित टोपी, आणि सुंदर प्रभावसेल निवड.

  अनुपालन: 7

• एक निश्चित नेव्हिगेशन बार अनेकदा विविध संसाधनांवर आढळतो. ही कार्यक्षमता वर्डप्रेसमध्ये प्रतिकृती बनवणे अगदी सोपे आहे. एक निश्चित पॅनेल तुमच्या वाचकांना त्वरीत नेव्हिगेट करण्यात मदत करेल मनोरंजक विभागपृष्ठावरील कोठूनही.

  अनुपालन: 7

• आजच्या ट्यूटोरियलमध्ये आपण वेबसाइट किंवा ब्लॉगसाठी एक निश्चित नेव्हिगेशन बार तयार करू.

  सामना: 6

• आजच्या ट्यूटोरियलमध्ये आपण एक अर्धपारदर्शक निश्चित ब्लॉक तयार करू जो नेहमी दृश्यमान राहील.

  सामना: 6

• साइटवर कोठे ठेवले आहे याची पर्वा न करता वापरकर्त्याचे लक्ष वेधण्यासाठी निश्चित संदेश बार हे एक उत्कृष्ट साधन आहे. हे पॅनल इव्हेंट, उत्पादन, बोनस आणि इतर चांगल्या बातम्या घोषित करण्याचे उत्कृष्ट कार्य करते. वर्डप्रेससाठी अनेक प्लगइन आहेत जे वापरण्यास आणि सानुकूलित करण्यास सोपे आहेत.

  सामना: 6

• आज, स्क्रीन रिझोल्यूशन 320px (iPhone) ते 2560px ( मोठा मॉनिटर) किंवा आणखी. आता वापरकर्ते केवळ त्यांच्या PC द्वारेच नाही तर वापरून देखील इंटरनेट वापरतात मोबाइल उपकरणेजसे की iPad किंवा Playbook. अशा प्रकारे, पारंपारिक दृष्टिकोन निश्चित आकारपान यापुढे कायदेशीरदृष्ट्या सक्षम नाही. वेब डिझाइन प्रत्येक गोष्टीशी जुळवून घेण्यासारखे असावे. डिस्प्ले रिझोल्यूशनशी जुळण्यासाठी घटकांचे लेआउट स्वयंचलितपणे समायोजित केले पाहिजे. या ट्यूटोरियलमध्ये आम्ही तुम्हाला HTML5 आणि CSS3 मीडिया क्वेरीसह कार्य करून क्रॉस-ब्राउझर डिझाइन कसे तयार करायचे ते दाखवू.

  अनुपालन: 4

• IN हा धडाआम्ही करू नेव्हिगेशन बार, जे तुम्ही पृष्ठ सामग्रीवर स्क्रोल करत असताना जागीच राहते. आणि, अर्थातच, आम्ही देखावा आणि कार्यक्षमता सुधारण्यासाठी काही युक्त्या वापरू.

  अनुपालन: 4

• जेव्हा आपल्या साइटची फ्रेम नसते निश्चित रुंदीपिक्सेलमध्ये, परंतु टक्केवारी म्हणून सेट केले आहे, नंतर या प्रकरणात साइट शीर्षलेख तयार करताना समस्या उद्भवतात. मी या व्हिडिओ ट्यूटोरियलमध्ये या समस्यांचे निराकरण कसे करावे याबद्दल बोलतो.