html 列导航包括导航,Html 导航

首页，来一个比较简单的例子热热身，相信有点css基础的人都可以看懂的。自所以，写一些教程，或许这样的教程已经泛滥啦，但是，还是想理理自己的思想来帮助自己及引导初学者更好的理解css。

1、竖直排列导航

先上html代码吧！

 1  2  3 

 4  5 竖直排列导航 6  7  8  9 

 10  首页 11  关于我们 12  新闻资讯 13  案例解决方案 14  在线留言 15  招贤纳士 16  联系我们 17 18 

 19  20 

一个很常见的html，相信很多人都没任何的问题。

接着就上css吧

@CHARSET "UTF-8"; *{ margin:0 auto;padding:0;} #menu{ float:lef width:140px; background-color:#ccc; padding:8px; } #menu a,#menu a:visited{ display:block; text-decoration:none; padding:4px 12px; background-color:#fff; color:#000; margin:8px 0 0 0; border-left:8px solid #f00; border-right:8px solid #f00; } #menu a:hover{ border-left:8px solid #ff0; border-right:8px solid #ff0; }

觉的这个例子不需要我将太多，直接上效果图：

这个例子就到这里就OK,下面重点讲述下面这个例子，或许，并不是很难，但需要掌握css一个细节或者技巧，先上效果图吧！

或许很多人都会认为，这个太容易实现啦，但是，我如果问，不借用如任何图片，你将如何实现这个效果，如果实现不了，就往下看吧，如果你可以，就当复习一下或者点击右上角的关闭按钮就可以啦！

老规矩，先上html，其实是和上面的html是一样的。不过还是重复一下，为了不必再倒回去看

 1  2  3 

 4  5 竖直导航 6  7  8  9 10 

 11  首页 12  关于我们 13  新闻资讯 14  案例解决方案 15  在线留言 16  招贤纳士 17  联系我们 18 19 

 20  21 

接着上css，看上去速度确实比较快哦，不过放心，细节部分会重点讲。

 1 .menu{ 2 float:left; //这个只是为了和另外一个导航排在一列而已，上面的例子也有这行代码，单独做导航，完全可以把这句去掉 3 margin-left:20px; 4 width:140px; 5 border:1px solid #ccc; 6 } 7 .menu a,.menu a:visited{ 8 color:#000; 9 display:block; 10 text-decoration:none; 11 padding:2px 8px; 12 border:8px solid #fff; 13 line-height:25px; 14 15 } 16 .menu a:hover{ 17 color:#f00; 18 background:#cc0; 19 border-color:#ccc #cc0; 20 }

对于那个折角是如何实现的，在鼠标移上前，a标签是有一个border属性的，只是因为和背景颜色一样，看不出效果而已，如果边框的宽度比较宽的话，两条相交的边框颜色不一样的就会产生一个折角。童鞋们可以自己单独做一个实验，四条边如果其中有一条和背景色不一样(其余三条和背景色一样)，就会产生一个三角形，后期也会讲到这个效果，回到这个导航，当鼠标移上去的时候，左右的边框的颜色和背景色是一样的，上下边框和背景是不一样的，首先，上和左边的边框会产生一个角有两个颜色，图片是黄色和灰色。不知道童鞋们有木有理解，下次的会讲如何利用css制作三角形。

这章就到这里啦！

2013-12-09 21:21 by dreamhappy, 284 阅读, 2 评论, 收藏, 编辑

程序中的编码是一个一直需要注意的问题，这几个问题你有没有注意到：

后台

1 ASP.NET 后台 当ASP.NET在填充Request.QueryString, Request.Form时，使用的解码方法是HttpUtility.UrlDecode

2 ASP.NET在填充QueryString,Form时，会访问Request.ContentEncoding做为解码时使用的字符编码

app.Request.ContentEncoding = System.Text.Encoding.UTF8;

前台

1  JQuery 在ajax提交时，在内部实现时，已经调用了encodeURIComponent()函数。

以下两种方法本质上是一样的

第一张图：

参考