مشکل با لیست و li [بایگانی]

leontry89

جمعه 11 مهر 1393, 11:35 صبح

دوستان من دو تا مشکل دارم با این کد:
1) با استایل هایی که نوشتم تمام li های موجود تغییر میکنن چطور می تونم کاری کنم که فقط برای یک لیست li ش تغییر کنه
2) تو لیست آخر منوها رو میخوام زیر هم بچینم اما بهم میریزه

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Color Mode Change</title></head><style type="text/css"> .General ul.li {list-style:disc;} .General a:link {color:Green; text-decoration:underline;} .General a:visited {color:RED; text-decoration:none;} .General a:hover {color:RED; text-decoration:none;} .General a:active {color:#FCC; text-decoration:overline;} #leftMenu ul,li {list-style:none; list-style-type:none;} #leftMenu a:link {color:blue; font-family:Arial, Helvetica, sans-serif; margin-top:50px; position:relative; font-size:10pt; background-color:#E7E0F1; padding:18px;} #leftMenu a:visited {color:blue; font-family:Arial, Helvetica, sans-serif; font-size:10pt;} #leftMenu a:hover {color:red; font-family:Arial, Helvetica, sans-serif; font-size:10pt; background-color:#FC9; color:#FFF;} #leftMenu a:active {color:blue; font-family:Arial, Helvetica, sans-serif; font-size:10pt;}</style><body><div id="leftMenu"> <ul type="disc"> <li><a href="http://google.com/">Google Home Page</a></li> <li><a href="http://yahoo.com/">Yahoo Home Page</a></li> <li><a href="http://msn.com/">MSN Home Page</a></li> <li><a href="http://aol.com/">AOL Home Page</a></li> </ul></div></body></html>

SlowCode

جمعه 11 مهر 1393, 12:40 عصر

1- یه کلاس یا id به li مورد نظرت بده و استایل هایی اضافی رو خنثی کن یا استایل دیگه ای بهش بده، مثلا تو کد زیر واسه li سومی رنگ پس زمینه خاکستری دادم.
2- استایل display: block رو به leftMenu a:link اضافه کن.

کد نهایی:

<!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>Color Mode Change</title>
</head>
<style type="text/css">
.General ul.li {list-style:disc;}
.General a:link {color:Green; text-decoration:underline;}
.General a:visited {color:RED; text-decoration:none;}
.General a:hover {color:RED; text-decoration:none;}
.General a:active {color:#FCC; text-decoration:overline;}
#leftMenu ul,li {list-style:none; list-style-type:none;}
#leftMenu a:link {color:blue; font-family:Arial, Helvetica, sans-serif; margin-top:50px; position:relative; font-size:10pt; background-color:#E7E0F1;
padding:18px;display: block;}
#leftMenu a:visited {color:blue; font-family:Arial, Helvetica, sans-serif; font-size:10pt;}
#leftMenu a:hover {color:red; font-family:Arial, Helvetica, sans-serif; font-size:10pt; background-color:#FC9; color:#FFF;}
#leftMenu a:active {color:blue; font-family:Arial, Helvetica, sans-serif; font-size:10pt;}
#leftMenu li.gray a{background: #999;}
</style>
<body>

<div id="leftMenu">
<ul type="disc">
<li><a href="http://google.com/">Google Home Page</a></li>
<li><a href="http://yahoo.com/">Yahoo Home Page</a></li>
<li class="gray"><a href="http://msn.com/">MSN Home Page</a></li>
<li><a href="http://aol.com/">AOL Home Page</a></li>
</ul>
</div>
</body>
</html>