課程
/前端開發
/CSS3
/CSS3實現漂亮ToolTips效果
我用的dreamweave，也在html中鏈接了css，但是為什么顯示不出css的樣式內容呢？新手不懂，求指教
2015-05-11
源自：CSS3實現漂亮ToolTips效果 1-1
正在回答
放出你的代碼,才能給你說明;沒有顯示CSS,,
無非以下:
1:沒有正確引入外部CSS文件,,,寫法錯誤
2:CSS規則寫錯,沒有生效
----------
溫馨提示:少用可視化網頁編輯器,,,,百害而無一利
學習過程應該多打代碼,才能熟悉;無需強制去背,用多了自然而然熟悉
張小杰123 提問者
編輯器Sublime Text 和 Atom 都很不錯....
<!doctype html>
<html>
<head>
<title>CSS3實現鼠標懸停顯示消息提示框</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
<body>
? ? ? <div class="nav">
? ? ?<ul>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-1">Home
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-2">About me
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-3">Photography
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-4">Work
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-5">Contact
? ? ? ?</ul>
? ?</div> ?
</body>?
</head>
</html>
、、、、、、、、、、、、、、、、、下面是css代碼。。。。。。。。。。。。。
/*@charset "utf-8";*/
/* CSS Document */
//注意，必須先創建，才能鏈接進來
/*Global*/
html{width:100%;
height:100%;
-webkit-text-size-agjust:none;
-moz-text-size-agjust:none;
-ms-text-size-agjust:none;
-o-text-size-agjust:none;
text-size-agjust:none;}
//因為存在瀏覽器兼容的問題,這樣呢，在我們旋轉的時候，文字大小就不會發生改變了
body{ margin:0;
padding:0;
width:100%;
background:#47a9cf;?
color:#74777b;
font-weight:300;/*文字加粗三倍*/
font-size:1.5em;
font-family:"Raleway","Arail"}
//body里面我們把默認的邊界和填充去掉
//將默認的列表去掉
ul{ list-style:none;
margin:0;
padding:0;}
//所有的超鏈接不要下劃線,外面的線也不要
a:link,a:visited,a:focus{ text-decoration:none;
? ? ? ? ? ? ? ? ? ? ? ? ?outline:none;}
成者并非一蹴而就
張小杰123 提問者 回復 成者并非一蹴而就
舉報
CSS3 實現鼠標懸停彈出信息提示框，學習達到對CSS3深入了解的目的
2 回答設置.nav li的css樣式時display inline-block 和float的區別？此處不是可以用float的嗎
5 回答我的圖標也顯示不出來
3 回答display:inline;行內顯示失??？
2 回答title被顯示出來了
1 回答我的圖標為什么不能居中顯示
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-05-12
放出你的代碼,才能給你說明;沒有顯示CSS,,
無非以下:
1:沒有正確引入外部CSS文件,,,寫法錯誤
2:CSS規則寫錯,沒有生效
----------
溫馨提示:少用可視化網頁編輯器,,,,百害而無一利
學習過程應該多打代碼,才能熟悉;無需強制去背,用多了自然而然熟悉
2015-05-13
編輯器Sublime Text 和 Atom 都很不錯....
2015-05-13
<!doctype html>
<html>
<head>
<title>CSS3實現鼠標懸停顯示消息提示框</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
<body>
? ? ? <div class="nav">
? ? ?<ul>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-1">Home
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-2">About me
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-3">Photography
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-4">Work
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?<li><a href="#" class="tooltip tooltip-effect-5">Contact
? ? ? ?<span class="tooltip-content"><i></i></span>
? ? ? ?</a></li>
? ? ? ?</ul>
? ?</div> ?
</body>?
</head>
</html>
、、、、、、、、、、、、、、、、、下面是css代碼。。。。。。。。。。。。。
/*@charset "utf-8";*/
/* CSS Document */
//注意，必須先創建，才能鏈接進來
/*Global*/
html{width:100%;
height:100%;
-webkit-text-size-agjust:none;
-moz-text-size-agjust:none;
-ms-text-size-agjust:none;
-o-text-size-agjust:none;
text-size-agjust:none;}
//因為存在瀏覽器兼容的問題,這樣呢，在我們旋轉的時候，文字大小就不會發生改變了
body{ margin:0;
padding:0;
width:100%;
height:100%;
background:#47a9cf;?
color:#74777b;
font-weight:300;/*文字加粗三倍*/
font-size:1.5em;
font-family:"Raleway","Arail"}
//body里面我們把默認的邊界和填充去掉
//將默認的列表去掉
ul{ list-style:none;
margin:0;
padding:0;}
//所有的超鏈接不要下劃線,外面的線也不要
a:link,a:visited,a:focus{ text-decoration:none;
? ? ? ? ? ? ? ? ? ? ? ? ?outline:none;}