CSS的一些實用例子

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

// 結合指令碼語言動態控制元素在頁面中出現的位置。

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css11.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
div.show{
position:absolute;
top:10;
left:200;
visibility:visible;
}
div.hide{
position:absolute;
top:120;
left:200;
visibility:hidden;
}
-->
</style>
</head>
<body>
<div class="hide"> //將不顯示
<img src="smile.gif" alt="">
</div>
<div class="show">
<img src="cry.gif" alt="">
</div>
</body>
</html>

【注】div塊標記，該標記可以將其內部的圖片及文字作為一個整體，及分層進行控制，往往可以實現頁面效果的局部改變。

##CSS中的cursor屬性改變滑鼠指標的形狀。

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css12.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
.hand{cursor:hand;} /*手形*/ //==》class屬性值
.crosshair{cursor:crosshair;} /*精確定位“+”字*/
.move{cursor:move;} /*移動*/
.e-resize{cursor:e-resize;} /*箭頭朝右方*/
.ne-resize{cursor:ne-resize;} /*箭頭朝右上方*/
.nw-resize{cursor:nw-resize;} /*箭頭朝左上方*/
.n-resize{cursor:n-resize;} /*箭頭朝上方*/
.se-resize{cursor:se-resize;} /*箭頭朝右下方*/
.s-resize{cursor:s-resize;} /*箭頭朝下方*/
.w-resize{cursor:w-resize;} /*箭頭朝左方*/
.text{cursor:text;} /*“I”字型*/
.wait{cursor:wait;} /*等待*/
.help{cursor:help;} /*協助*/
-->
</style>
</head>
<body>
<p class="hand">
Give me a hand!（手形）
</p>
<p class="crosshair">
Give me a crosshair（精確定位）!
</p>
<p class="move">
Give me a Move（移動）!
</p>
<p class="e-resize">
Give me a e-resize(箭頭方向朝右)!
</p>
<p class="ne-resize">
Give me a ne-resize(箭頭方向朝右上)!
</p>
<p class="nw-resize">
Give me a nw-resize(箭頭方向朝左上)!
</p>
<p class="n-resize">
Give me a n-resize(上)!
</p>
<p class="se-resize">
Give me a se-resize(左下)!
</p>
<p class="s-resize">
Give me a s-resize(下)!
</p>
<p class="w-resize">
Give me a w-resize(左)!
</p>
<p class="text">
Give me a text(文本)!
</p>
<p class="wait">
Give me a wait(等待)!
</p>
<p class="help">
Give me a help(協助)!
</p>
</body>
</html>

//-------css+javascript 指令碼實現的動態互動效果（設定首頁）-----

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>setHome.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
function set()
{
sethome.style.behavior="url(#default#homepage)";
sethome.setHomePage(http://www.google.com);
}
</script>
</head>
<body>
<span id="sethome" onclick="set()" style="CURSOR: hand"><br>將本站設定為首頁</span>
</body>
</html>

//-----------進一步豐富滑鼠的效果------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>movPic.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
#topdown{
position:absolute;
left:12;
top:222;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
function move(x, y)
{
topdown.style.left = x;
topdown.style.top = y;
}
</script>
</head>
<body onmousemove="move(event.x, event.y)"> /×事件驅動×/
<div id="topdown"> /×id 樣式修飾×/
<img src="smile.gif" alt=""> /*層標記 div×/
</div>
</body>
</html>

解釋：使用層標記div將圖片單獨放在一層中，然後使用css層疊樣式表定義了該圖片的位置，再與onmouseover事件結合，追蹤滑鼠的位置（event.x 和event.y），並隨時用滑鼠的位置修改對應圖片的位置。

效果：頁面中顯示一張始終跟著滑鼠指標移動的笑臉。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More