這個好難啊。抄代碼都出了bug，如圖~求助~~~

<!doctype html>

<html>

<head>

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

<title>制作3D旋轉導航</title>

<style>

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

? ? ? ? /*任務一：引入本地字體文件*/

? ? ? ? @font-face:Gabriola;

? ? ? ? body {

? ? ? ? ?background-color:#edecec;

? ? ? ? }

? ? ? ??

? ? ? ? /* basic menu styles */

? ? ? ? .nav-menu {

? ? ? ? ? display: block;

? ? ? ? ?background: #74adaa;

? ? ? ? ?width:950px;

? ? ? ? ?margin: 50px auto 150px;

? ? ? ? }

? ? ? ? .nav-menu > li {

? ? ? ? ? display: inline;

? ? ? ? ? float:left;

? ? ? ? ?border-right:1px solid #94c0be;

? ? ? ? }

? ? ? ? .nav-menu > li:last-child {

? ? ? ? ? border-right: none;

? ? ? ? }

? ? ? ? .nav-menu li a {

? ? ? ? ? color: #fff;

? ? ? ? ?display: block;

? ? ? ? ?text-decoration: none;

? ? ? ? ? /*調用本地字體*/

? ? ? ? ?font-family:Gabriola;

? ? ? ? ? -webkit-font-smoothing: antialiased;

? ? ? ? ?-moz-font-smoothing: antialiased;

? ? ? ? ?font-smoothing: antialiased;

? ? ? ? ?text-transform: capitalize;

? ? ? ? ?overflow: visible;

? ? ? ? ?line-height: 20px;

? ? ? ? ?font-size: 20px;

? ? ? ? ?padding: 15px 30px 15px 31px;

? ? ? ? }

? ? ? ??

? ? ? ? .three-d {

? ? ? ? ? /* 任務三、設置3D舞臺布景 */

? ? ? ? ? -webkit-perspective: 200px;

? ? ? ? ? -moz-perspective: 200px;

? ? ? ? ? -ms-perspective: 200px;

? ? ? ? ? -o-perspective: 200px;

? ? ? ? ? ?perspective: 200px;

? ? ? ? ? /*任務四、設置3D舞臺布景過渡效果*/

? ? ? ? ?-webkit-transition: all .07s linear;

? ? ? ? ?-moz-transition: all .07s linear;

? ? ? ? ?-ms-transition: all .07s linear;

? ? ? ? ?-o-transition: all .07s linear;

? ? ? ? ?transition: all .07s linear;

? ? ? ? ? position: relative;

? ? ? ? }

? ? ? ??

? ? ? ? .three-d:not(.active):hover {

? ? ? ? ? cursor: pointer;

? ? ? ? }

? ? ? ??

? ? ? ? /*任務五、給不是當前狀態的3D舞臺的懸浮與聚焦狀態設置變形效果*/

? ? ? ? .three-d:not(.active):hover .three-d-box,?

? ? ? ? .three-d:not(.active):focus .three-d-box {

? ? ? ? -wekbit-transform: translateZ(-25px) rotateX(90deg);

? -moz-transform: translateZ(-25px) rotateX(90deg);

? -o-transform: translateZ(-25px) rotateX(90deg);

? -ms-transform: translateZ(-25px) rotateX(90deg);

? transform: translateZ(-25px) rotateX(90deg);

? ? ? ? }

? ? ? ??

? ? ? ? .three-d-box {

? ? ? ? ? /*任務六、給3D舞臺中“.three-d-box”設置過渡與變形效果*/

? ? ? ? ? -webkit-transition: all .3s ease-out;

? -moz-transition: all .3s ease-out;

? -ms-transition: all .3s ease-out;

? -o-transition: all .3s ease-out;

? transition: all .3s ease-out;

? -webkit-transform: translatez(-25px);

? -moz-transform: translatez(-25px);

? -ms-transform: translatez(-25px);

? -o-transform: translatez(-25px);

? transform: translatez(-25px);

? ? ? ? ? -webkit-transform-style: preserve-3d;

? ? ? ? ? -moz-transform-style: preserve-3d;

? ? ? ? ? -ms-transform-style: preserve-3d;

? ? ? ? ? -o-transform-style: preserve-3d;

? ? ? ? ? transform-style: preserve-3d;

? ? ? ? ? -webkit-pointer-events: none;

? ? ? ? ? -moz-pointer-events: none;

? ? ? ? ? -ms-pointer-events: none;

? ? ? ? ? -o-pointer-events: none;

? ? ? ? ? pointer-events: none;

? ? ? ? ? position: absolute;

? ? ? ? ? top: 0;

? ? ? ? ?left: 0;

? ? ? ? ?display: block;

? ? ? ? ?width: 100%;

? ? ? ? ?height: 100%;

? ? ? ? }

? ? ? ??

? ? ? ? /*任務七、給導航設置3D前，與3D后變形效果*/

? ? ? ? .front {

? ? ? ? -webkit-transform: rotatex(0deg)?

? ? ? ? translatez(25px);

? -moz-transform: rotatex(0deg) translatez(25px);

? -ms-transform: rotatex(0deg) translatez(25px);

? -o-transform: rotatex(0deg) translatez(25px);

? transform: rotatex(0deg) translatez(25px);

? ? ? ? ?}

? ? ? ??

? ? ? ? .back {

? ? ? ? ? -webkit-transform: rotatex(-90deg) translatez(25px);

? -moz-transform: rotatex(-90deg) translatez(25px);

? -ms-transform: rotatex(-90deg) translatez(25px);

? -o-transform: rotatex(-90deg) translatez(25px);

? transform: rotatex(-90deg) translatez(25px);

? ? ? ? ? color: #FFE7C4;

? ? ? ? }

? ? ? ??

? ? ? ? .front, .back {

? ? ? ? ? display: block;

? ? ? ? ?width: 100%;

? ? ? ? ?height: 100%;

? ? ? ? ?position: absolute;

? ? ? ? ?top: 0;

? ? ? ? ?left: 0;

? ? ? ? ?background: #74adaa;

? ? ? ? ?padding: 15px 30px 15px 31px;

? ? ? ? ?color: white;

? ? ? ? ?-webkit-pointer-events: none;

? ? ? ? ? -moz-pointer-events: none;

? ? ? ? ? -ms-pointer-events: none;

? ? ? ? ? -o-pointer-events: none;

? ? ? ? ? pointer-events: none;

? ? ? ? ? -webkit-box-sizing: border-box;

? ? ? ? ? box-sizing: border-box;

? ? ? ? }

? ? ? ? /*任務八、設置導航當前狀態與懸浮狀態下的背景效果*/

? ? ? ? .nav-menu li .active .front,

? ? ? ? .nav-menu li .active .back,

? ? ? ? .nav-menu li a:hover .front,

? ? ? ? .nav-menu li a:hover .back {

? ? ? ? ?background-color: #51938f;

? -webkit-background-size: 5px 5px;

? background-size: 5px 5px;

? background-position: 0 0, 30px 30px;

? background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

? background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

? background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

? background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

? ? ? ? }

? ? ? ? .nav-menu ul {

? ? ? ? ? position: absolute;

? ? ? ? ?text-align: left;

? ? ? ? ?line-height: 40px;

? ? ? ? ?font-size: 14px;

? ? ? ? ?width: 200px;

? ? ? ? ?-webkit-transition: all 0.3s ease-in;

? ? ? ? ? -moz-transition: all 0.3s ease-in;

? ? ? ? ? -ms-transition: all 0.3s ease-in;

? ? ? ? ? -o-transition: all 0.3s ease-in;

? ? ? ? ? transition: all 0.3s ease-in;

? ? ? ? ? -webkit-transform-origin: 0px 0px;

? ? ? ? ? -moz-transform-origin: 0px 0px;

? ? ? ? ? -ms-transform-origin: 0px 0px;

? ? ? ? ? -o-transform-origin: 0px 0px;

? ? ? ? ? transform-origin: 0px 0px;

? ? ? ? ? -webkit-transform: rotateX(-90deg);

? ? ? ? ? -moz-transform: rotateX(-90deg);

? ? ? ? ? -ms-transform: rotateX(-90deg);

? ? ? ? ? -o-transform: rotateX(-90deg);

? ? ? ? ? transform: rotateX(-90deg);

? ? ? ? ? -webkit-backface-visibility: hidden;

? ? ? ? ? -moz-backface-visibility: hidden;

? ? ? ? ? -ms-backface-visibility: hidden;

? ? ? ? ? -o-backface-visibility: hidden;

? ? ? ? ?backface-visibility: hidden;

? ? ? ? }

? ? ? ? /*任務九、顯示下拉導航菜單，并其設置一個變形效果*/

? ? ? ? .nav-menu > li:hover ul {

? ? ? ? ? display: block;

? ? ? ? ? ? -webkit-transform: rotateX(0deg);

? -moz-transform: rotateX(0deg);

? -ms-transform: rotateX(0deg);

? -o-transform: rotateX(0deg);

transform: rotateX(0deg);

? ? ? ? ?}

</style>

</head>

<body>

Home

HomeHome

</a></li>

Services

ServicesServices

</a></li>

Products

ProductsProducts

</a></li>

About

AboutAbout

</a></li>

Contact

ContactContact

</a></li>

Blog

BlogBlog</a >

Html5

Html5Html5

</a></li>

Css3

Css3Css3

</a></li>

JavaScript

JavaScriptJavaScript

</a></li>

Videogames

VideogamesVideogames

</a></li>

</ul>

</li>

Shop On-line

Shop On-lineShop On-line

</a></li>

</ul>

</div>

</body>

</html>

新手村上路

2018-12-28

源自：十天精通CSS3 9-10

關注問題我要回答

1247

操作

收起

1 回答

堪破紅塵
2019-01-10

首先，先在<style>下面添加 * {list-style-type: none;} 去除二級欄目的項目符號；

其次，就是

這個<a>標簽被寫成了 < a> ?；

最后是添加 ?

body { margin:0; padding: 0;}

#nav {width:1150px; margin: 0 auto;}（id的命名方式）

.nav-menu li {width: 146px;text-align: center;}

.drop-menu li {text-align: center;} （我總覺得你的二級欄目好亂?。?/p>

/*--width: 200px;*/ ?注釋掉 (不曉得有啥用 )

實在是找不到你的樣式在哪?。?！

?你自己找到這padding-left: 40px; 刪掉就好了。

如果你也不知道在那，那就加一個 margin:0; 在 ? .nav-menu > li:hover ul ?下面 ? ? ? ?

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

收起回答

舉報

0/150

提交

取消

十天精通CSS3

參與學習 243057 人
解答問題 2677 個

本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備

進入課程

本課相似問答

1 回答太難了，好難啊

1 回答代碼出現bug了嗎?

1 回答代碼有bug

4 回答這個both很難理解啊

2 回答求解難題了，求大神?。?！

搜索更多本課相關問答

這個好難啊。抄代碼都出了bug，如圖~求助~~~

我要回答關注問題

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

熱搜

最近搜索清空

這個好難啊。抄代碼都出了bug，如圖~~~求助~~~~~

1 回答

本課相似問答

這個好難啊。抄代碼都出了bug，如圖~~~求助~~~~~

這個好難啊。抄代碼都出了bug，如圖~求助~~~

這個好難啊。抄代碼都出了bug，如圖~求助~~~