آموزش: آیا طراحی منو(شبیه Header سایت google) رو خوب و استاندارد انجام دادم؟ [بایگانی]

davood59

پنج شنبه 07 شهریور 1392, 19:03 عصر

سلام دوستان؛ وقتتون بخیر و خوشی باشه.
لطفا به این کدها دقت کنید:

<style type="text/css">
*
{
margin:0px;
padding:0px;
}
body
{

}
#main
{
background-color:White;
}
#header
{
padding:6px;
background-color:#303030;
}

#menu
{
padding:2px 0px 0px 2px;

}

ul#menu
{
font-family:Arial;
font-size:13px;
font-weight:bolder;
}

ul#menu li
{
padding-left:8px;
padding-right:8px;
list-style-type:none;
display:inline;
}

ul#menu li a
{
color:#C0C0C0;
text-decoration:none;
}

ul#menu li a:hover
{
color:#F0F0F0;
}
</style>
و اینهم کد HTML :

<body>
<div id="main">
<div id="header">
<ul id="menu">
<li><a href="">+You</a></li>
<li><a href="">Search</a></li>
<li><a href="">Images</a></li>
<li><a href="">Maps</a></li>
<li><a href="">Play</a></li>
<li><a href="">YouTube</a></li>
<li><a href="">News</a></li>
<li><a href="">Gmail</a></li>
<li><a href="">Drive</a></li>
<li><a href="">Calendar</a></li>
<li><a href="">More</a></li>
<li><a href=""></a></li>

</ul>
</div>
</div>
</body>

1- اولاً خوب و استاندارد طراحیش کردم؟ یعنی از نظر بکارگیری تگها و موارد دیگه؟
2- اگه بخوام فلش پایینی که کنار More در سایت اصلی گوگل هست رو بذارم باید از چه کدی استفاده کنم؟ آیا باید از عکس استفاده کنم؟
3- الان شما اگه google رو باز کنید، بطور پیش فرض لینک مربوط به گزینه Search سفید شده که به معنی بودن شما تو اون صفحه هستش، من هم اگه بخوام این کار رو انجام بدم و شما در ابتدا و وقتی که صفحه رو باز می کنید، یکی از لینکهای مورد نظر متمایز (یا انتخاب شده) باشه، از چه کدی باید استفاده کنم؟
ممنونم.

</div>

dreadful

پنج شنبه 07 شهریور 1392, 21:31 عصر

1- استانداردشو من نمی دونم !
اون main چی کار میکنه ؟
( تازه کارم )

ولی

رنگ استفاده شده تو منو ها C0C0C0 نیست !
اینه : BBBBBB !!!!!
رنگ hover هم FFFFFF هست :)
با برنامه هایی مثل pixie و ... میتونی رنگ یک نقطه از صفحه رو بگیری (خیلی به درد می خوره ، حد اقل واسه من !)

2- برای کشیدن اون مثلث از این کد استفاده کن ( یه DIV با کلاس arrow-down درست کنید)

.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-top: 5px solid #BBBBBB;
}

3-
واسه اون لینکت یه کلاس دیگه تعریف کن و بهش یه خاصیت دیگه بده

<body>
<div id="main">
<div id="header">
<ul id="menu">
<li><a href="">+You</a></li>
<li><a class="in_this_page" href="">Search</a></li>
<li><a href="">Images</a></li>
<li><a href="">Maps</a></li>
<li><a href="">Play</a></li>
<li><a href="">YouTube</a></li>
<li><a href="">News</a></li>
<li><a href="">Gmail</a></li>
<li><a href="">Drive</a></li>
<li><a href="">Calendar</a></li>
<li><a href="">More</a></li>
<li><a href=""></a></li>

</ul>
</div>
</div>
</body>

.in_this_page
{
color: #FFFFFF;
}