亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

自己在網上找的圖片，代碼可行，供大家參考。

<!DOCTYPE HTML>

<htmllang="en-US">

? ?<head>

? ? ? ?<meta charset="UTF-8">

? ?????<title>CSS3 Full Background Slider </title>

? ? ? ?<style type="text/css">

? ? ? ? ? ?@importurl("http://www.w3cplus.com/demo/css3/base.css");

? ? ? ? ? ?@importurl("http://fonts.googleapis.com/css?family=Yesteryear");

? ? ? ? ? ?html,body {

? ? ? ? ? ?height: 100%;

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖片全屏顯示，并且居中*/

? ? ? ? ? ?img.bg {

? ? ? ? ? ?min-height: 100%;

? ? ? ? ? ?min-width: 1024px;

? ? ? ? ? ?width: 100%;

? ? ? ? ? ?height: auto !important;

? ? ? ? ? ?height: 100%;

? ? ? ? ? ?position: fixed;

? ? ? ? ? ?top: 0;

? ? ? ? ? ?left: 50%;

? ? ? ? ? ?z-index:1;

? ? ? ? ? ? ?-webkit-transform: translateX(-50%);

? ? ? ? ? ? ?-moz-transform: translateX(-50%);

? ? ? ? ? ? ?-o-transform: translateX(-50%);

? ? ? ? ? ? ?-ms-transform: translateX(-50%);

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖片從左向右移入顯示的動畫效果*/

? ? ? ? ? ?/* Slide Left */

? ? ? ? ? ?

? ? ? ? ? ?@-webkit-keyframes 'slideLeft' {

? ? ? ? ? ?????0% { left: -500px; }

? ? ? ? ? ?????100% { left: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'slideLeft' {

? ? ? ? ? ?????0% { left: -500px; }

? ? ? ? ? ?????100% { left: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'slideLeft' {

? ? ? ? ? ?????0% { left: -500px; }

? ? ? ? ? ?????100% { left: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'slideLeft' {

? ? ? ? ? ?????0% { left: -500px; }

? ? ? ? ? ?????100% { left: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'slideLeft' {

? ? ? ? ? ?????0% { left: -500px; }

? ? ? ? ? ?????100% { left: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖像從底部向頂部移入的動畫效果*/

? ? ? ? ? ? /* Slide Bottom */

? ? ? ? ? ?

? ? ? ? ? ?@-webkit-keyframes 'slideBottom' {

? ? ? ? ? ?????0% { top: 350px; }

? ? ? ? ? ?????100% { top: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'slideBottom' {

? ? ? ? ? ?????0% { top: 350px; }

? ? ? ? ? ?????100% { top: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'slideBottom' {

? ? ? ? ? ?????0% { top: 350px; }

? ? ? ? ? ?????100% { top: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'slideBottom' {

? ? ? ? ? ?????0% { top: 350px; }

? ? ? ? ? ?????100% { top: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'slideBottom' {

? ? ? ? ? ?????0% { top: 350px; }

? ? ? ? ? ?????100% { top: 0; }

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖片由小到大放大動畫效果*/

? ? ? ? ? ?/* Zoom In */

? ? ? ? ? ?

? ? ? ? ? ?@-webkit-keyframes 'zoomIn' {

? ? ? ? ? ?????0% { -webkit-transform: scale(0.1); }

? ? ? ? ? ?????100% { -webkit-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'zoomIn' {

? ? ? ? ? ?????0% { -moz-transform: scale(0.1); }

? ? ? ? ? ?????100% { -moz-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'zoomIn' {

? ? ? ? ? ?????0% { -ms-transform: scale(0.1); }

? ? ? ? ? ?????100% { -ms-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'zoomIn' {

? ? ? ? ? ?????0% { -o-transform: scale(0.1); }

? ? ? ? ? ?????100% { -o-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'zoomIn' {

? ? ? ? ? ?????0% { transform: scale(0.1); }

? ? ? ? ? ?????100% { transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖像由大到小縮小動畫效果*/

? ? ? ? ? ?/* Zoom Out */

? ? ? ? ? ?

? ? ? ? ? ?@-webkit-keyframes 'zoomOut' {

? ? ? ? ? ?????0% { -webkit-transform: scale(2); }

? ? ? ? ? ?????100% { -webkit-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'zoomOut' {

? ? ? ? ? ?????0% { -moz-transform: scale(2); }

? ? ? ? ? ?????100% { -moz-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'zoomOut' {

? ? ? ? ? ?????0% { -ms-transform: scale(2); }

? ? ? ? ? ?????100% { -ms-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'zoomOut' {

? ? ? ? ? ?????0% { -o-transform: scale(2); }

? ? ? ? ? ?????100% { -o-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'zoomOut' {

? ? ? ? ? ?????0% { transform: scale(2); }

? ? ? ? ? ?????100% { transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?/*背景圖像旋轉出現動畫效果*/

? ? ? ? ? ?/* Rotate */

? ? ? ? ? ?

? ? ? ? ? ?@-webkit-keyframes 'rotate' {

? ? ? ? ? ?????0% { -webkit-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ?????100% { -webkit-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'rotate' {

? ? ? ? ? ?????0% { -moz-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ?????100% { -moz-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'rotate' {

? ? ? ? ? ?????0% { -ms-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ?????100% { -ms-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'rotate' {

? ? ? ? ? ?????0% { -o-transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ?????100% { -o-transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'rotate' {

? ? ? ? ? ?????0% { transform: rotate(-360deg) scale(0.1); }

? ? ? ? ? ?????100% { transform: none; }

? ? ? ? ? ?}

? ? ? ? ? ?/*設置背景圖像不顯示動畫效果*/

? ? ? ? ? ?@-webkit-keyframes 'notTarget' {

? ? ? ? ? ?????0% { z-index: 75; }

? ? ? ? ? ?????100% { z-index: 75; }

? ? ? ? ? ?}

? ? ? ? ? ?@-moz-keyframes 'notTarget' {

? ? ? ? ? ?????0% { z-index: 75; }

? ? ? ? ? ?????100% { z-index: 75; }

? ? ? ? ? ?}

? ? ? ? ? ?@-ms-keyframes 'notTarget' {

? ? ? ? ? ?????0% { z-index: 75; }

? ? ? ? ? ?????100% { z-index: 75; }

? ? ? ? ? ?}

? ? ? ? ? ?@-o-keyframes 'notTarget' {

? ? ? ? ? ?????0% { z-index: 75; }

? ? ? ? ? ?????100% { z-index: 75; }

? ? ? ? ? ?}

? ? ? ? ? ?@keyframes 'notTarget' {

? ? ? ? ? ?????0% { z-index: 75; }

? ? ? ? ? ?????100% { z-index: 75; }

? ? ? ? ? ?}

? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ?

? ? ? ? ? ?.slider {

? ? ? ? ? ?position: absolute;

? ? ? ? ? ?width: 100%;

? ? ? ? ? ?text-align: center;

? ? ? ? ? ?z-index: 9999;

? ? ? ? ? ?bottom: 100px;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li {

? ? ? ? ? ?display: inline-block;

? ? ? ? ? ?width: 170px;

? ? ? ? ? ?height: 130px;

? ? ? ? ? ?margin-right: 15px;

? ? ? ? ? ?}

? ? ? ? ? ?.slider a {

? ? ? ? ? ?display: inline-block;

? ? ? ? ? ?width: 170px;

? ? ? ? ? ?padding-top: 70px;

? ? ? ? ? ?padding-bottom: 20px;

? ? ? ? ? ?position: relative;

? ? ? ? ? ?cursor: pointer;

? ? ? ? ? ?border: 2px solid #fff;

? ? ? ? ? ?border-radius: 5px;

? ? ? ? ? ?vertical-align: top;

? ? ? ? ? ?color: #fff;

? ? ? ? ? ?text-decoration: none;

? ? ? ? ? ?font-size: 22px;

? ? ? ? ? ?font-family: 'Yesteryear', cursive;

? ? ? ? ? ?text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);

? ? ? ? ? ?}

? ? ? ? ? ?/*任務一、設置不同列表的背景色*/

? ? ? ? ? ?.slider li:nth-of-type(1) a{

? ? ? ? ? ?background-color: #02646e;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(2) a{

? ? ? ? ? ?background-color: #eb0837;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(3) a{

? ? ? ? ? ?background-color: #67b374;

? ? ? ? ? ?} ? ?

? ? ? ? ? ?.slider li:nth-of-type(4) a{

? ? ? ? ? ?background-color: #e6674a;

? ? ? ? ? ?} ? ?

? ? ? ? ? ?.slider li:nth-of-type(5) a{

? ? ? ? ? ?background-color: #e61061;

? ? ? ? ? ?}

? ? ? ? ? ?/*任務二、設置縮略圖形狀*/

? ? ? ? ? ?.slider li a:after{

? ? ? ? ? ?content:"";

? ? ? ? ? ?display: block;

? ? ? ? ? ?height: 120px;

? ? ? ? ? ?width: 120px;

? ? ? ? ? ?border: 5px solid #fff;

? ? ? ? ? ?border-radius: 50%;

? ? ? ? ? ?position: absolute;

? ? ? ? ? ?left: 50%;

? ? ? ? ? ?margin-left: -60px;

? ? ? ? ? ?z-index: 9999;

? ? ? ? ? ?top: -80px;

? ? ? ? ? ?}

? ? ? ? ? ?/*任務三、設置縮略圖背景圖像*/

? ? ? ? ? ?.slider li:nth-of-type(1) a:after{

? ? ? ? ? ?background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(2) a:after{

? ? ? ? ? ?background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(3) a:after{

? ? ? ? ? ?background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(4) a:after{

? ? ? ? ? ?background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?.slider li:nth-of-type(5) a:after{

? ? ? ? ? ?background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg) no-repeat center;

? ? ? ? ? ?}

? ? ? ? ? ?/*任務四、給縮略圖添加蒙板效果*/

? ? ? ? ? ?.slider li a:before{

? ? ? ? ? ?content:"";

? ? ? ? ? ?display: block;

? ? ? ? ? ?height: 120px;

? ? ? ? ? ?width: 120px;

? ? ? ? ? ?border: 5px solid #fff;

? ? ? ? ? ?border-radius: 50%;

? ? ? ? ? ?position: absolute;

? ? ? ? ? ?left: 50%;

? ? ? ? ? ?margin-left: -60px;

? ? ? ? ? ?z-index: 99999;

? ? ? ? ? ?top: -80px;

? ? ? ? ? ?background: rgba(0,0,0,0.3);

? ? ? ? ? ?}

? ? ? ? ? ?/*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/

? ? ? ? ? ?.slider li a:hover:before{

? ? ? ? ? ?opacity:0;

? ? ? ? ? ?}

? ? ? ? ? ?/*任務六、點擊綜略圖，切換背景圖*/

? ? ? ? ? ?/*背景圖從左向右出現*/

? ? ? ? ? ?#bg1:target{

? ? ? ? ? ?????z-index: 100;

? ? ? ? ? ?????-webkit-animation-name: slideLeft;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: slideLeft;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: slideLeft;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: slideLeft;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?????animation-name: slideLeft;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ? ? ?/*背景圖從下向上出現*/

? ? ? ? ? ?#bg2:target{

? ? ? ? ? ?????z-index: 100;

? ? ? ? ? ?

? ? ? ? ? ?????-webkit-animation-name: slideBottom;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: slideBottom;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: slideBottom;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: slideBottom;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?animation-name: slideBottom;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ? ? ?/*背景圖由小到大出現*/

? ? ? ? ? ?#bg3:target{

? ? ? ? ? ?????z-index: 100;

? ? ? ? ? ?????-webkit-animation-name: zoomIn;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: zoomIn;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: zoomIn;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: zoomIn;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?????animation-name: zoomIn;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ? ? ?

? ? ? ? ? ?/*背景圖由大到小出現*/

? ? ? ? ? ?#bg4:target{

? ? ? ? ? ?????z-index: 100;

? ? ? ? ? ?????-webkit-animation-name: zoomOut;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: zoomOut;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: zoomOut;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: zoomOut;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?????animation-name: zoomOut;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ? ? ?

? ? ? ? ? ?/*背景圖旋轉出現*/

? ? ? ? ? ?#bg5:target{

? ? ? ? ? ?????z-index: 100;

? ? ? ? ? ?????-webkit-animation-name: rotate;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: rotate;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: rotate;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: rotate;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?????animation-name: rotate;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ? ? ?/*任務七、設置不顯示的背景圖層級*/

? ? ? ? ? ?/* Not Target */

? ? ? ? ? ?

? ? ? ? ? ?img:not([:target]){

? ? ? ? ? ?????-webkit-animation-name: notTarget;

? ? ? ? ? ?????-webkit-animation-duration: 1s;

? ? ? ? ? ?????-webkit-animation-iteration-count: 1;

? ? ? ? ? ?????-moz-animation-name: notTarget;

? ? ? ? ? ?????-moz-animation-duration: 1s;

? ? ? ? ? ?????-moz-animation-iteration-count: 1;

? ? ? ? ? ?????-ms-animation-name: notTarget;

? ? ? ? ? ?????-ms-animation-duration: 1s;

? ? ? ? ? ?????-ms-animation-iteration-count: 1;

? ? ? ? ? ?????-o-animation-name: notTarget;

? ? ? ? ? ?????-o-animation-duration: 1s;

? ? ? ? ? ?????-o-animation-iteration-count: 1;

? ? ? ? ? ?????animation-name: notTarget;

? ? ? ? ? ?????animation-duration: 1s;

? ? ? ? ? ?????animation-iteration-count: 1;

? ? ? ? ? ?}

? ? ? ?</style>

? ?</head>

? ?<body>

? ? ? ?<div class="slider">

? ? ? ? ? ?<ul class="clearfix">

? ? ? ? ? ?????<li><a href="#bg1">Hipster Fashion Haircut </a></li>

? ? ? ?????????<li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>

? ? ? ?????????<li><a href="#bg3">My haire is sooo fantastic!</a></li>

? ? ? ?????????<li><a href="#bg4">Eat healthy &amp; excersice!</a></li>

? ? ? ?????????<li><a href="#bg5">Lips so kissable I could die ...</a></li>

? ? ? ?????</ul>

? ? ? ?</div>

? ? ? ?<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg" alt="" class="bg slideLeft" id="bg1" />

? ? ? ?<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg" alt="" class="bg slideBottom" id="bg2" />

? ? ? ?<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg" alt="" class="bg zoomIn" id="bg3" />

? ? ? ?<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg" alt="" class="bg zoomOut" id="bg4" />

? ? ? ?<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg" alt="" class="bg rotate" id="bg5" />

? ?</body>

</html>


正在回答

10 回答

同學的代碼點贊最高的那個還不如你這個，只能說你這個寫的非常好了，要是背景大圖切換起來順暢那就更好了！不錯喲！

0 回復 有任何疑惑可以回復我~
#1

風起臨冬 提問者

非常感謝！
2018-08-17 回復 有任何疑惑可以回復我~

為什么我照著寫的zoomin 和zoomout效果好奇怪啊，rotate也不轉?

0 回復 有任何疑惑可以回復我~

謝謝分享

0 回復 有任何疑惑可以回復我~

要為你評論加點贊，讓更多的人看到，太棒了

0 回復 有任何疑惑可以回復我~
#1

風起臨冬 提問者

謝謝謝謝！好久了
2019-04-16 回復 有任何疑惑可以回復我~

?? ?@importurl("http://www.w3cplus.com/demo/css3/base.css");

? ? ? ? ? ?@importurl("http://fonts.googleapis.com/css?family=Yesteryear");

這兩個網址是找不到的了嗎


0 回復 有任何疑惑可以回復我~
#1

風起臨冬 提問者

第一個服務器里找不到，第二個有，返回一個字體相關的css樣式
2019-04-16 回復 有任何疑惑可以回復我~

感謝了 這個代碼 方便了許多

0 回復 有任何疑惑可以回復我~

太棒了,感恩分享...圖片顯示效果非常好看...

0 回復 有任何疑惑可以回復我~

好厲害啊！??！

大佬

0 回復 有任何疑惑可以回復我~

很好，謝謝了

0 回復 有任何疑惑可以回復我~

?/*任務六、點擊綜略圖，切換背景圖*/?

選擇那個ID標簽是有問題的，點擊除縮略圖外的小方塊也能切換大圖，應該使用 .slideLeft:target ; .slideBottom:target? .......

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

自己在網上找的圖片，代碼可行，供大家參考。

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號