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

看见了就想说 發表於 2021-9-5 00:59:00

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

<h1 class="md-end-block md-heading">前端学习4百度页面添加CSS样式210904</h1>
<h3 class="md-end-block md-heading">一.查看并实现各个小细节出的功能把，功能导向</h3>
 细一点就好
<h4 class="md-end-block md-heading">1.标签上的小图标：</h4>
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230935377-1439297995.png" alt="image-20210904104925212">
把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></pre>
<h5 class="md-end-block md-heading">（1）常用的图标网站：</h5>
1.网址：iconfont-阿里巴巴矢量图标库 又叫阿里巴巴矢量图库，是阿里出的一款免费图标库
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230933856-1288540203.png" alt="image-20210904105539005">
 查看百度页面前端代码,用的这种svg格式，下载这种就行把。注意：图标可以供学习使用，但是不可以商用，以防避免造成侵犯作者知识产权。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg</pre>
 但是使用了，没有显示，就把百度页面代码粘锅来，仍不行。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">    <link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"> </pre>
 后来试了下。本地的图片只要在当前页面下可以使用，而且，网上的图片也可访问。至于上面百度原封代码粘锅来无法使用，就不清楚了。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> <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" /></pre>
<h4 class="md-end-block md-heading">2.将网站链接文字改成黑色无下划线以及悬浮时显示蓝色：</h4>
旧：
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230928981-639534263.png" alt="image-20210904111149251">
百度：
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230926949-1330773925.png" alt="image-20210904111254803">
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230925356-1291744704.png" alt="image-20210904111520498">
 
<h5 class="md-end-block md-heading">（1）两种处理上色和去下滑线:</h5>
 一是直接在应用目标上加样式(改颜色：超链接标签添加颜色: color='black' ; 去掉下划线：text-decoration='none')
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><a href="#" style="color:black;text-decoration:none;">新闻</a> </pre>
 二是，写到样式里，应用目标都用这个样式
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><head> ... <style>    a {    color:black;    text-decoration: none;  }    </style> </head></pre>
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230923122-2041212539.png" alt="image-20210904115703492">
 像了一点，不过字体好像也有要求。用snipnaste取了下色：34, 34, 34
 修改上面格式。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  color:rgb(34, 34, 34); </pre>
<h5 class="md-end-block md-heading">（2）以及文字大小、字体类型</h5>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  font-size:13px;</pre>
 字体类型差不多，不用改变，改变的话→<code>font-family:"字体类型", Times, serif;</code>
<h5 class="md-end-block md-heading">（3）悬浮</h5>
 悬浮的时候用下面这些。好像只用到hoverl了，因为hover是悬浮变蓝。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  a:visited {      text-decoration: none;  }  a:hover {      color:rgb(49, 94, 251);      text-decoration: none;  }  a:active {      text-decoration: none;  }    </style></pre>
<h5 class="md-end-block md-heading">（4）加按钮</h5>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">css中按钮有四种状态 普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框 下面的例子中.btn1用focus按钮会按下，不弹起 　　　　　　.btn2用active按钮点击按下，会弹起</pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">.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; }</pre>
w3c
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">.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; }</pre>
 
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  /*按钮类型*/  .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; }</pre>
 
<h5 class="md-end-block md-heading">（5）二级菜单</h5>
 
<h3 class="md-end-block md-heading">今天先不加位置了，统一加位置感觉加不好了。明天学下。</h3>
<h4 class="md-end-block md-heading">（4）html 里加空格</h4>
 
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230920947-930197044.png" alt="image-20210904225956168">
<img src="https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230919267-393418386.png" alt="image-20210904230003381">
 
遇到的问题：
<h4 class="md-end-block md-heading">1.发现无法给连接a标签设置两种格式</h4>
 。。。肯定的，就像给一面墙刷漆一样，再刷就盖过去了。但是可以通过给a标签加类grey_link,然后把grey_link给到a标签就好了。
<h4 class="md-end-block md-heading">2.html如何给文字加框框</h4>
 
<h4 class="md-end-block md-heading">3.html如何设置图片大小</h4>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> <img src="..." style="width: 30px; height: 30px" ></pre>
<h4 class="md-end-block md-heading">4.图片设置链接</h4>
 
<h4 class="md-end-block md-heading">5.css ul不换行的实现方法</h4>
 css ul不换行的实现方法：1、设置足够宽的宽度，然后将li的float属性设置为left；2、通过“white-space:nowrap;”处理块元素中的空白符和换行符。 
来源：https://www.cnblogs.com/Doner/p/15228467.html

頁: [1]

琼殿技术论坛's Archiver

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