[Share] code html, css, navigation cho web/wap, thanh header chuẩn đẹp, cực hay

Demo

Navigation 1

HTml viết

<ul class="style1"> <li><A href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Introduce</a></li> <li><a href="#">Game</a></li> <li><a href="#">Education</a></li> <li><a href="#">Entertainment</a></li> </ul>

Css viết:

.style1 {list-style-type:none; padding:2px 2px; clear:both; overflow:hidden; margin:auto; max-width:700px; text-align:center; } .style1 li { transition:0.8s ease; padding:10px 25px; background:#528B8B; color:#ffffff; text-align:center; float:left; border:1px #ddd solid; } .style1 li:hover {background:#43CD80;} .style1 li a {color:#ffffff; font-size:big; font-weight:bold; text-decoration:none; transition:0.5s ease; } .style1 li a:hover {color:red; text-shadow:1px 2px 3px blue, 1px 2px 3px green; }

Navigation 2

Html viết:

<ul class="style2"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Introduce</a></li> <li><a href="#">Game</a></li> <li><a href="#">Education</a></li> <li><a href="#">Entertainment</a></li> </ul>

Css viết:

.style2 {list-style-type:none; padding:2px 2px; clear:both; overflow:hidden; margin:auto; max-width:700px; text-align:center;} .style2 li { margin:5px; padding:10px 20px; float:left; background:#8B4513; transition:0.8s ease; border-radius:8px; box-shadow:5px 5px 5px #999; border:1px solid #cdcdcd; } .style2 li a {color:#fff; font-size:big; font-weight:bold; text-decoration:none; transition:0.5s ease; } .style2 li:hover{background:#FFE4C4;} .style2 li a:hover {color:#008000; text-shadow:1px 2px 3px blue, 1px 2px 3px yellow;}

Navigation 3

HTml viết:

<ul class="style3"> <li><A href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Introduce</a></li> <li><a href="#">Game</a></li> <li><a href="#">Education</a></li> <li><a href="#">Entertainment</a></li> </ul>

Css viết:

.style3 {list-style-type:none; clear:both; overflow:hidden; margin:auto; max-width:700px; text-align:center; } .style3 li{ background:#FAFAD2; transition:0.8s ease; padding:10px 20px; color:#ffffff; text-align:center; float:left; border:1px #ddd solid; margin:3px 5px; border-radius:5px; box-shadow:inset 0px 0px 15px 5px #CD853F; } .style3 li a {color:#A0522D; font-size:big; font-weight:bold; text-decoration:none; transition:0.5s ease; } .style3 li:hover {background:#F0F8FF; box-shadow:inset 0px 0px 15px 5px #8470FF; } .style3 li a:hover{color:#191970;}