前端学习4百度页面添加CSS样式210904
一.查看并实现各个小细节出的功能把，功能导向
细一点就好
1.标签上的小图标：
把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
（1）常用的图标网站：
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" />
2.将网站链接文字改成黑色无下划线以及悬浮时显示蓝色：
旧：
百度：
（1）两种处理上色和去下滑线:
一是直接在应用目标上加样式(改颜色：超链接标签添加颜色: 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);
（2）以及文字大小、字体类型
font-size:13px;
字体类型差不多，不用改变，改变的话→font-family:"字体类型", Times, serif;
（3）悬浮
悬浮的时候用下面这些。好像只用到hoverl了，因为hover是悬浮变蓝。
a:visited {
text-decoration: none;
}
a:hover {
color:rgb(49, 94, 251);
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
（4）加按钮
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;
}
今天先不加位置了，统一加位置感觉加不好了。明天学下。
（4）html 里加空格