细一点就好
把favicon.ico图标放到网站根目录下,在网页的<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
1.网址:iconfont-阿里巴巴矢量图标库 又叫阿里巴巴矢量图库,是阿里出的一款免费图标库
查看百度页面前端代码,用的这种svg格式,下载这种就行把。注意:图标可以供学习使用,但是不可以商用,以防避免造成侵犯作者知识产权。
https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg
但是使用了,没有显示,就把百度页面代码粘锅来,仍不行。
<link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
后来试了下。本地的图片只要在当前页面下可以使用,而且,网上的图片也可访问。至于上面百度原封代码粘锅来无法使用,就不清楚了。
<!-- 本地图片加载,位置必须同目录下>--> <link rel="shortcut icon" href="百度.svg" type="image/x-icon" /> <!-- 网络图片加载>--> <link rel="shortcut icon" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" type="image/x-icon" />
旧:
百度:
一是直接在应用目标上加样式(改颜色:超链接标签添加颜色: color='black' ; 去掉下划线:text-decoration='none')
<a href="#" style="color:black;text-decoration:none;">新闻</a>
二是,写到样式里,应用目标都用这个样式
<head> ... <style> a { color:black; text-decoration: none; } </style> </head>
像了一点,不过字体好像也有要求。用snipnaste取了下色:34, 34, 34
修改上面格式。
color:rgb(34, 34, 34);
font-size:13px;
字体类型差不多,不用改变,改变的话→font-family:"字体类型", Times, serif;
悬浮的时候用下面这些。好像只用到hoverl了,因为hover是悬浮变蓝。
a:visited { text-decoration: none; } a:hover { color:rgb(49, 94, 251); text-decoration: none; } a:active { text-decoration: none; } </style>
css中按钮有四种状态 普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框 下面的例子中.btn1用focus按钮会按下,不弹起 .btn2用active按钮点击按下,会弹起
.btn{ appearance: none; background: #026aa7; color: #fff; font-size: 20px; padding: 0.65em 1em; border-radius: 4px; box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2); margin-right: 1em; cursor: pointer; border:0; } .btn1:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .btn1:focus{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2); outline: 0; } .btn2:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .btn2:active{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2); outline: 0; } .btn2:focus{ outline: 0; }
w3c
.button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } .button2 { background-color: white; color: black; border: 2px solid #008CBA; } .button2:hover { background-color: #008CBA; color: white; }
/*按钮类型*/ .button1 { border: none; color: white; } /* Blue */ .button1:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .button1:active{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2); outline: 0; } .button1:focus{ outline: 0; } .btn1:hover{ box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5); } .btn1:focus{ position: relative; top: 4px; box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2); outline: 0; }