HTML5教程

前端学习4百度页面添加CSS样式210904

本文主要是介绍前端学习4百度页面添加CSS样式210904，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端学习4百度页面添加CSS样式210904

一.查看并实现各个小细节出的功能把，功能导向

细一点就好

1.标签上的小图标：

image-20210904104925212

把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
（1）常用的图标网站：

1.网址：iconfont-阿里巴巴矢量图标库 又叫阿里巴巴矢量图库，是阿里出的一款免费图标库

image-20210904105539005

查看百度页面前端代码,用的这种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.将网站链接文字改成黑色无下划线以及悬浮时显示蓝色：

旧：

image-20210904111149251

百度：

image-20210904111254803

image-20210904111520498

 

（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>

image-20210904115703492

像了一点，不过字体好像也有要求。用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 里加空格

 

image-20210904225956168

image-20210904230003381

 

这篇关于前端学习4百度页面添加CSS样式210904的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航