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

1、竖直排列导航

先上html代码吧！

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>竖直排列导航</title> 6 <link href="cs.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 <div id=menu> 10 <a href="#">首页</a> 11 <a href="#">关于我们</a> 12 <a href="#">新闻资讯</a> 13 <a href="#">案例解决方案</a> 14 <a href="#">在线留言</a> 15 <a href="#">招贤纳士</a> 16 <a href="#">联系我们</a> 17 18 </div> 19 </body> 20 </html>

一个很常见的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一个细节或者技巧，先上效果图吧！

aaarticlea/png;base64,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" alt="" border="0" />

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

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>竖直导航</title> 6 <link href="cs.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 10 <div class=menu> 11 <a href="#">首页</a> 12 <a href="#">关于我们</a> 13 <a href="#">新闻资讯</a> 14 <a href="#">案例解决方案</a> 15 <a href="#">在线留言</a> 16 <a href="#">招贤纳士</a> 17 <a href="#">联系我们</a> 18 19 </div> 20 </body> 21 </html>

接着上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()函数。

2 参考这个问题，ajax请求中可以做一些自定义设置 jquery ajax发送Post请求，如何添加请求头

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

第一张图：

参考

解决ASP.NET中的各种乱码问题

Html 导航的更多相关文章

  1. “四核”驱动的“三维”导航 -- 淘宝新UI（需求分析篇）

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

  2. ABP文档 - 导航

    文档目录 本节内容: 创建菜单 注册导航供应器 显示菜单 每个web应用都有一些菜单用来在页面/屏幕之间导航,ABP提供了一个通用的基础框架创建并显示菜单给用户. 创建菜单 一个应用可能由不同模块组成 ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. GJM ： C#设计模式汇总整理——导航 【原创】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  5. SAP CRM 显示消息/在消息中进行导航

    向用户展示消息,在任何软件中都是十分重要的. 在SAP CRM WEB UI中展示消息,不是一项很难的任务,只需要创建消息并在之后调用方法来显示它 消息类和消息号: 我在SE91中创建了如下的消息类和 ...

  6. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  7. ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...

  8. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  9. BootStrap_03之组件（手风琴、导航）

    1.BootStrap组件--按钮组: .btn-group>.btn*5: .btn-group-justified: .btn-group-lg/sm/xs: .btn-group-vert ...

  10. css3圆环百分比，菜单栏定位导航

    前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

随机推荐

  1. ubuntu 14.04 hadoop eclipse 0配置基本环境

    动人的hadoop第二天.构造hadoop该环境还花了两天时间,在这里写自己配置的过程,我希望能帮助! 我将文中用到的全部资源都分享到了  这里,点开就能下载,不须要一个个的找啦! 当中有<Ha ...

  2. NYNU_省赛选拔题(3)

    题目描述 二叉树,若其与自己的镜像完全相同,就称其为镜像树. 是一棵镜像树:而 不是镜像树.现给你一棵二叉树,请你判断其是不是镜像树. 输入 第一行是一个整数数T,表示测试数据有多少组每组数据第一行是 ...

  3. Android批量图片加载经典系列——使用二级缓存、异步网络负载形象

    一.问题描写叙述 Android应用中常常涉及从网络中载入大量图片,为提升载入速度和效率,降低网络流量都会採用二级缓存和异步载入机制.所谓二级缓存就是通过先从内存中获取.再从文件里获取,最后才会訪问网 ...

  4. jsmart 前结合案例

    前绑定jsmart这是一个不错的选择.之前通过经常使用的项目中的.最近涉及的领域的后端部.jsmart有些使用相对较少,主要是因为他想引用文件,我写的模板,在一个简单的项目,直接使用js界,很复杂的前 ...

  5. Delegate,Action,Func,Predicate的使用与区别

    C#4.0推出后,类似Linq,Lamda表达式等许多新的程序写法层次不穷.与之相关的Delegate,Action,Func,Predicate的使用和区别也常常让大家迷惑,此处就结合实际的应用,对 ...

  6. hive 的分隔符、orderby sort by distribute by的优化

    一.Hive 分号字符 分号是SQL语句结束标记,在HiveQL中也是,可是在HiveQL中,对分号的识别没有那么智慧,比如: select concat(cookie_id,concat(';',' ...

  7. form表单target的用法，实现无刷新提交页面

    form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action=&qu ...

  8. Android Fragment与Activity之间的数据交换（Fragment从Activity获取数据）

    Fragment与Activity之间的数据交换,通常含有3: 一.Fragment从Activity获取数据(仅本文介绍了一个第一): 两.Activity从Fragment获取数据: 三.Frag ...

  9. 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

  10. 【百度地图API】手机浏览器抓包工具及其使用方法

    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...