課程
/前端開發(fā)
/CSS3
/CSS3實現(xiàn)漂亮ToolTips效果
我用的dreamweave,也在html中鏈接了css,但是為什么顯示不出css的樣式內(nèi)容呢?新手不懂,求指教
2015-05-11
源自:CSS3實現(xiàn)漂亮ToolTips效果 1-1
正在回答
放出你的代碼,才能給你說明;沒有顯示CSS,,
無非以下:
1:沒有正確引入外部CSS文件,,,寫法錯誤
2:CSS規(guī)則寫錯,沒有生效
----------
溫馨提示:少用可視化網(wǎng)頁編輯器,,,,百害而無一利
學(xué)習(xí)過程應(yīng)該多打代碼,才能熟悉;無需強(qiáng)制去背,用多了自然而然熟悉
張小杰123 提問者
編輯器Sublime Text 和 Atom 都很不錯....
<!doctype html>
<html>
<head>
<title>CSS3實現(xiàn)鼠標(biāo)懸停顯示消息提示框</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 */
//注意,必須先創(chuàng)建,才能鏈接進(jìn)來
/*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;}
//因為存在瀏覽器兼容的問題,這樣呢,在我們旋轉(zhuǎn)的時候,文字大小就不會發(fā)生改變了
body{ margin:0;
padding:0;
width:100%;
background:#47a9cf;?
color:#74777b;
font-weight:300;/*文字加粗三倍*/
font-size:1.5em;
font-family:"Raleway","Arail"}
//body里面我們把默認(rèn)的邊界和填充去掉
//將默認(rèn)的列表去掉
ul{ list-style:none;
margin:0;
padding:0;}
//所有的超鏈接不要下劃線,外面的線也不要
a:link,a:visited,a:focus{ text-decoration:none;
? ? ? ? ? ? ? ? ? ? ? ? ?outline:none;}
成者并非一蹴而就
張小杰123 提問者 回復(fù) 成者并非一蹴而就
舉報
CSS3 實現(xiàn)鼠標(biāo)懸停彈出信息提示框,學(xué)習(xí)達(dá)到對CSS3深入了解的目的
2 回答設(shè)置.nav li的css樣式時display inline-block 和float的區(qū)別?此處不是可以用float的嗎
5 回答我的圖標(biāo)也顯示不出來
2 回答title被顯示出來了
3 回答display:inline;行內(nèi)顯示失敗?
1 回答我的圖標(biāo)為什么不能居中顯示
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-05-12
放出你的代碼,才能給你說明;沒有顯示CSS,,
無非以下:
1:沒有正確引入外部CSS文件,,,寫法錯誤
2:CSS規(guī)則寫錯,沒有生效
----------
溫馨提示:少用可視化網(wǎng)頁編輯器,,,,百害而無一利
學(xué)習(xí)過程應(yīng)該多打代碼,才能熟悉;無需強(qiáng)制去背,用多了自然而然熟悉
2015-05-13
編輯器Sublime Text 和 Atom 都很不錯....
2015-05-13
<!doctype html>
<html>
<head>
<title>CSS3實現(xiàn)鼠標(biāo)懸停顯示消息提示框</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 */
//注意,必須先創(chuàng)建,才能鏈接進(jìn)來
/*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;}
//因為存在瀏覽器兼容的問題,這樣呢,在我們旋轉(zhuǎn)的時候,文字大小就不會發(fā)生改變了
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里面我們把默認(rèn)的邊界和填充去掉
//將默認(rèn)的列表去掉
ul{ list-style:none;
margin:0;
padding:0;}
//所有的超鏈接不要下劃線,外面的線也不要
a:link,a:visited,a:focus{ text-decoration:none;
? ? ? ? ? ? ? ? ? ? ? ? ?outline:none;}