ساخت منو افقی در طراحی سایت دوشنبه, 17 مهر 1396 , 0 نظر

ساخت منو در طراحی سایت ها از موارد ضروری و همیشگی است زیرا تمام سایت ها به یک منو نیاز دارند . از جمله منوهای پرکاربرد در طراحی سایت منوی افقی است .

ساخت منو برای کاربران مبتدی ممکن است کمی مشکل باشد . با توجه به این موضوع میخواهم یک منو ساده به صورت افقی برای شما طراحی کنم تا به صورت دقیق نحوه و چیدمان منو را یاد بگیرید . معمولا وقتی کاربران یک تمرین را به صورت دقیق از ابتدا خوب متوجه شوند در مراحل بعدی راحت تر می توانند تمرین های بعدی را انجام بدهند .

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

 

 

 

 

 

 

 

   <!DOCTYPE html>

   <html>

   <head>

   </head>

   <body>

   </body>

   </html>

2. سپس با استفاده از تگ UL  و LI  لینکهای مورد نظر را درون دیویژن که ایجاد کرده ایم تایپ میکنم .از تگ Ul برای نمایش لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.این تگ شامل خاصیت TYPE می باشد که مواردی را در خود جای داده است.در کل این تگ علامات و نشانه های ما را در قسمت مورد نظر نمایش می دهد.
فرض کنید می خواهید 5 منو را به صورت افقی در وب سایت ایجاد کنید . عنوان منو باید بین تگ UL و با استفاده از تگ Li نشانه گذاری شود . به منوهای زیر نگاه کنید .

 

<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li><a href="#contact">Contact</a></li>

  <li><a href="#about">About</a></li>

  <li><a href="#about">shop</a></li>

</ul>

 

حالا اگر این صفحه را به عنوان index.html ذخیره کنید و خروجی را در مرورگر مشاهده کنید منوی شما باید به این شکل باشد

 .

 

حالا میخواهم نقطه های قبل از منو همراه با فاصله از طرفین را با استفاده از style تغییر بدهم .

 

 

 

 

 

 

<style>

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

 

خروجی در مرورگر باید به شکل زیر باشد.

 

 حالا برای اینکه منوها در یک خط قرار بگیرد باید از تگ زیر در style استفاده کنید .

 

 

 

 

li {

    display: inline;

}

برای ایجاد فاصله همچنین تغییر رنگ از تگهای زیر استفاده میکنم . شما می توانید رنگ ، نوع فونت و نحوه قرارگیری لینک در منو را نیز تغییر بدهید .

 

 

 

 

 

 

 

 

 

 

a {

    width: 60px;

    background-color: #97bf21;

    float:left;

    font-size:20px;

    color: #ffffff;

    font-weight: bold;

    padding: 4px;

    text-align: center;

}






قلاب هایی که ده ها میلیارد تومان ماهی صید میکنند

اگر کسب و کار آزاد دارید و یا اینکه کارآفرین هستید حتما کلمه بازاریابی و روشهای بازاریابی را شنیده اید و میدانید بازاریابی و تبلیغات ، دو پایه اصلی فروش هستند.تا به امروز در مورد تبلیغات و مفاهیم آن مطالبی منتشر کردم و امروز میخواهم در مورد تکنیک بسیار مهم  قلاب در بازاریابی و تبلیغات اینترنتی صحبت کنم.

چگونه با تولید محتوا دیگران را به خود وابسته کنیم

آیا تا به حال اسم  شهرزاد قصه گو را شنیده ای ؟ آیا تا به حال قصه ای جذاب شنیده ای ؟ طوری که میخکوب داستانش شده باشی ؟ آیا میخواهی همانند آنها داستانی از شکست ها و موفقیت افسانه ای خود را تعریف کنی ؟ همان داستانی که میتواند مریدان و شاگردان زیادی را به دور تو جمع کند .

رازهای طراحی عنوان جذاب

مقاله ای علمی و پرمحتوا مینویسی ولی هیچ کس  آن را نمیخواند .

به همکاری چند نفر از دانشمندان حوزه  پزشکی مجله ای برای دانشجویان تولید ، چاپ و نتشر می کنید ولی دریغ از یک خرید !



نظرهای شما

دوست عزیز ، نظر خودت را برایمان ارسال کن