سوال در مورد CSS [بایگانی]

neo1989021

پنج شنبه 12 اسفند 1389, 12:18 عصر

دوستان سلام. من مشغول یاد گرفتن CSS هستم.
یه سوالی برام پیش اومده.
من می خواهم دو تا style بنویسم که اولی رنگ لینک و ابی کنه و و وقتی موس رفت روش قرمز بشه و دومی رنگ لینک مشکی بشه و وقتی موس رفت روش مثلا سفید بشه.

<style>
.style1
{

}
.style2
{

}
</style>

neo1989021

پنج شنبه 12 اسفند 1389, 12:50 عصر

کسی نیست کمکم کنه؟

hamiii

پنج شنبه 12 اسفند 1389, 13:20 عصر

سلام
ببین همون چیزیه که میخوای:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOVER test</title>
<style>
.style1 a:link{ color: blue;}
.style1 a:hover{ color:red ;}

.style2 a:link{ color: black;}
.style2 a:hover{ color:gray ;}

</style>

</head>
<body>
<div class="style1"><a href="#">لینک اول</a></div>
<div class="style2"><a href="#">لینک دوم</a></div>
</body>
</html>

neo1989021

پنج شنبه 12 اسفند 1389, 14:02 عصر

دادا مشکلم حل شد بسیار تشکر
فقط یه سوالی
این سایت و ببین zabet.ir
اگه بخواهم منوهام شبیه مونهای این سایت در قسمت بالا بشه باید چیکار کنم؟
در حالت hover کلش به یه رنگی در میاد و همه چی توش ترازه.

hamiii

جمعه 13 اسفند 1389, 11:15 صبح

برای ایجاد لیستها میتونید از لیستهای غیر سفرشی (unorderlist) و لیست آیتم ها (listitems) استفاده کنید.
برای لیستهای افقی باید لیست آیتم ها را به یک سمت شناور کنید.

در حالت hover کلش به یه رنگی در میاداز ویژگی display:block استفاده شده.

تو مثال زیر یه نمونه ساده و کامل منوی افقی رو برات گذاشتم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List</title>
<style>
body{ background:#ddd; margin:100px 30%; font-family:tahoma; font-size:9pt}
.menu { padding:0 80px 12px 0; width:500px; margin:90px 0 0 -40px; float:left; background:url(images/menu-shadow.png) no-repeat bottom;}
.menu ul { float:right; padding:0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a { float:left; margin:0 1px 0 0; padding:5px 5px 7px 5px; color:#c0ad9d; font-size:12px; text-decoration:none; background:#1e1611; border:1px solid #473a2e}
.menu ul li a p { padding:5px 15px; margin:0}
.menu ul li a:hover { color:#c0ad9d; background:#ae3a01 url(images/nav-gradient.jpg) no-repeat center top; border:1px solid #e76f14}
.menu ul li a.active { color:#fff; background:#ae3a01 url(images/nav-gradient.jpg) no-repeat center top; border:1px solid #e76f14}

</style>

</head>

<body>
<div class="menu">
<ul>
<li><a href="#"><p>تماس</p></a></li>
<li><a href="#"><p>فروشگاه</p></a></li>
<li><a href="#"><p>درباره</p></a></li>
<li><a href="#"><p>سفارش</p></a></li>
<li><a href="#"><p>خدمات</p></a></li>
<li><a href="#"><p>خانه</p></a></li>
</ul>

</div>

</body>
</html>

67075