一、Js的几种调用方法（参考总结的）
1、a href="javascript:js_method();"
这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发windowonbeforeunload事件，在IE里面更会使gif动画停止播放。W3C标准不推荐在href里面执行javascript语句
2、 a href="javascript:void(0);" onclick="js_method()"
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个 *** 作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3、a href="javascript:;" onclick="js_method()"
这种方法跟跟2种类似，区别只是执行了一条空的js代码。
4、a href="#" onclick="js_method()"
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5、a href="#" onclick="js_method();return false;"
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
综合上述，在a中调用js函数最适当的方法推荐使用：
[javascript] view plain copy
<a href="javascript:void(0);" onclick="js_method()"></a>
<a href="javascript:;" onclick="js_method()"></a>
<a href="#" onclick="js_method();return false;"></a>
二、href="#"的作用
a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。
[javascript] view plain copy
<span style="font-size:14px;"><a href="#">回到最顶端</a></span>
三、href="URL"的作用
1、URL为绝对URL
此时指向另一个站点，比如href=">实现这个效果 我给你2种方法！ 第一 用dl dt dd结构 <dl> <dt>前面的小图标</dt> <dd>文字</dd> </dl> 在写样式控制 第二 给li里面的文字（a标签）定义背景 这个 应该很实用！ 结构 <ul class="style"> <li><a href="#"> wenzi </a></li> </ul>样式style li a {background:url(前面小的路径) no-repeat 3px 3px(定义小的位置，可以自己调试)；padding-left：10px（要是小后面的文字离近了可以这样定义）；
在UI设计中，我们经常会遇到各种各样的图标，导航栏区域的图标、金刚区图标、tab栏图标等，在不同的产品、不同功能模块的图标样式也是不同的，有面性、线性、线面结合、异性等等。通过对常见图标类型进行归纳，以及对 不同图标不同使用场景进行设计规范总结 ，我们在做UI设计时才会更加得心应手，更加注重设计规范。
面性图标是几种图标中最强的一种，其次是线面结合图标，最后是线性图标。面性图标的突显性更强。 对于如何选取哪一种图标，应该首先站在信息层级上去考虑。
11功能入口
在首页金刚区中常采用面性图标进行 功能、业务的导流及流量分发 ，比如美团、链家、淘宝等。但是也有些产品金刚区采用线性图标。
☛那么为什么有的产品金刚区采用面性图标有的采用线性图标？
——考虑该模块是否为该功能的核心出入口。如果整个产品此功能70%以上都是通过此模块进入的，那么建议采用面性图标；如果此功能还可以通过其他多个模块进入，就可以采用线性图标。
▶设计解析
a内图标与底板保持一定的呼吸感
也就是说里面的图标不能太大，撑太满，要有一定的留白呼吸感。
市场上一般有两种处理方法：一是二者之间的比例约等于 0618（内图标与底板的比） ；而是两者比例接近 1:2（装饰元素与整个图标的比）。
b图标的色彩保持四色原则与饱和度统一、渐变统一
金刚区的图标色彩可以根据其 业务属性 进行色彩选择，如外卖相关的可以选择橙色，健康环保的可以选蓝色绿色等等。在一个模块色彩最好不超过四种颜色。
在色彩上的处理也应保持所有图标在 视觉处理上是统一的 。比如色彩选取区域、渐变方向等。
c简约挖空
简约挖空能让图标更加 精致与出彩 。如何做到让图标简约，首先得在造型上简约，其次再进行适当的挖空处理，进行点缀弱化。值得借鉴的产品美团与支付宝。
标题点缀的意义在于能让用户在快速阅读中，快速找到心仪板块。
▶设计解析
a五分原则。根据亲密性原则，让图标离文字更近，离页边更远，两种的比例为1:2。
b图标与文字高度保持一致，或比文字略小。这样看上去才更平衡。
c图标极简原则。此场景图标一定要简约，不能太复杂，达到区分性即可。
列表流图标能让列表内容更加丰富，吸引用户去阅读与快讯定位心仪内容。值得借鉴ios设置页面。
▶设计解析
a上下间距保持一致，左右间距保持一致。
b图标略高于文案
c业务属性相同的图标色彩上保持一致，图标的视觉处理保持一致
d图标简约
☛ 为什么有的产品个人中心有统一底板，有的却没有？？
—— 在视觉呈现上追求 统一感 ，可采用底板；追求图标的 辨识度 不用底板
14选中状态
常见于tab栏的选择状态，或者点赞、收藏等此类按钮点击后的状态。能区分于其他图标，让用户明白此时的位置与记录自己的 *** 作状态。
▶设计解析
a选中颜色使用品牌色
b统一设计范围与视觉比重（采用图标栅格系统进行处理）
c视觉处理保持统一
▶利于图标栅格系统进行图标视觉比重处理
这是很多初级设计师常常忽略的一个设计重点。导致设计处理的图标视觉比重不一致。图标栅格系统能很好的规避这个问题。
ant design里面有对图标的设计规范有很好的说明
图标栅格系统资源分享链接： >
▶白色面性微渐变
内图标采用白色到背景色的微渐变比直接用白色看上去更 具有质感与细节 。
▶色块不透明度叠加
色块不透明的叠加类图标更具有 空间感 ，更丰富。
▶ 微投影图标
加上图标颜色的微投影，让图标更细腻精致
21功能入口
非主流业务入口、或者平台工具类产品使用居多。
▶设计解析
a视觉比例统一，利用图标栅格系统去设计
b颜色符号业务色
c圆角数值不宜过大，一般3-4px
22辅助功能按钮
辅助功能按钮如feed流里面的点赞、评论、转发等功能。线性的辅助功能图标比面性辅助图标呼吸感更强。
▶设计解析
a视觉比例统一，利用图标栅格系统去设计
b线条简练，描边粗细统一
c图标高度略大于文案，或保持一样的高度 （参考微博）
23列表流
▶设计解析
a上下边距与页边距保持一致
b线条简练，描边粗细统一，圆角统一
c图标高于文案
24选中状态
对于选中状态的处理建议还是选用面性图标。
▶设计解析
a选中颜色使用品牌色
b统一设计范围与视觉比重（采用图标栅格系统进行处理）
c视觉处理保持统一
▶选中图标定制化（趣味性）
▶断点处理（形状拼接处进行断点处理，处理一定要克制）
▶粗像素（更加个性化、突出）
在Web前端开发中，a标签是用来定义超链接的元素，可以通过href属性来设置链接地址。在浏览器中，a标签的默认样式由浏览器厂商定义，因此不同的浏览器可能存在一些差异。通常情况下，a标签的默认样式如下：
```css
a {
color: #0000EE;
text-decoration: underline;
cursor: pointer;
}
```
其中，`color` 属性用于控制链接文本的颜色，`text-decoration` 属性用于控制是否添加下划线，`cursor` 属性用于改变鼠标指针的形状。这些默认样式可以通过CSS样式表进行覆盖和修改，以达到个性化的设计效果。
需要注意的是，为了提高可访问性，开发者需要遵循无障碍设计的原则，在a标签中使用明确且有意义的文本内容作为链接文本，并避免使用与链接无关的图标或文字等内容。同时，也需要考虑各种用户设备和浏览器对a标签的显示效果和交互方式的差异，并进行测试和优化。1、这个A是形状及位置公差（简称形位公差）中的基准标记，图中的另一处还应有一个对应的符号，作为基准所在地。
2、图中这种画法完全符合国标中有关形位公差标注的要求，是自动形成的，可以省略很多不必要的查询，不建议改变此标注。
3、如要有其他不符合国标规定的的标注，请将此标注有关的所有关联取消即可。有两种方法：a 是行内标签，不能设置高宽和外边距margin，但能使用内边距padding
如果你不固定大小 ，应用padding;
需要用固定大小，把它变成行内块标签display: inline-block,这样后就可以设置高宽了，
移动10px;也有两种：
这10px算a标签内，就用padding-left:10px;
这10px不算在a标签内，就用margin-left: 10px;注意：需设置成行内块元素才可以设置外边距，否则无效；
自己试试吧！！！将小图标集成在一个里，然后充分利用css的css sprite精准定位（X、Y坐标）。
你可以将a标签的宽度和高度写死，然后对应的a标签里定位相应的图标（css背景定位）。
补充一下：可以考虑下bootstrap图标字体 fontAwesome替代传统的式的图标。
如果还有疑问欢迎讨论。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）