និងគំរូរក្នុងការបង្កើត។ខាងក្រោមនេះគឺជាគំនិត
ដ៏តូចមួយក្នុងការធ្វើការរចនាMenu។
<!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>Style-menu</title>
<link rel="stylesheet" a href="css.css" />
</head>
<body>
<ul class="main">
<li class="style1"><a href="#">Home</a></li>
<li class="style2"><a href="#">Home1</a></li>
<li class="style3"><a href="#">Home2</a></li>
<li class="style4"><a href="#">Home3</a></li>
</ul>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
*{
margin:10;
padding:40px;
text-decoration:none;
color:#FFF;
}
ul{
display:block;
list-style:none;
padding: 0 110px;
position: relative;
border:1px solid #000;
}
ul li{
padding:20px;
float:left;
position:relative;
margin:2px;
margin-top:0px;
height:40px;
}
ul li.style1{
background:#060;
border-radius: 2px 2px 10px 10px;}
ul li.style2{
background:#633;
border-radius: 5px 3px 10px 10px;}
ul li.style3{
background:#06C;;
border-radius: 2px 3px 10px 15px;}
ul li.style4{
background:#9C3;
border-radius: 0px 3px 10px 10px;}
ul li.style1:hover{
background:#C03;
border-radius:3px 5px 15px 15px;
text-align:center;
box-shadow:box-shadow: 2px 2px 4px;
cursor:help;}
ul li.style2:hover{
background:#03F;
border-radius:10px 10px 15px 15px;
text-align:center;
font-size:20px;
box-shadow:2px 3px 1px 1px #666666;
cursor:wait;}
ul li.style3:hover{
background:#300;
border-radius:10px 10px 15px 10px;
text-align:center;
font-size:20px;
box-shadow:2px 2px 1px 1px #666666;
cursor:move;}
ul li.style4:hover{
background:#330;
border-radius:10px 10px 10px 10px;
text-align:center;
font-size:20px;
box-shadow:2px 2px 1px 1px #666666;
cursor:crosshair;}
0 comments:
Post a Comment