明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML的基礎(chǔ)知識.對于css樣式表與樣式屬性的詳細說明

發(fā)表時間：2023-09-21 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)鞨TML的基礎(chǔ)知識.關(guān)于css樣式表和樣式屬性的詳細介紹，使用HTML的基礎(chǔ)知識css樣式表和樣式屬性的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。一、position：fixed 鎖定位置（相對于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。二、position：abs...
這次給大家?guī)鞨TML的基礎(chǔ)知識.關(guān)于css樣式表和樣式屬性的詳細介紹，使用HTML的基礎(chǔ)知識css樣式表和樣式屬性的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

一、position：fixed

鎖定位置（相對于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。

二、position：absolute

絕對位置：

1.外層沒有position：absolute（或relative）；那么p相對于瀏覽器定位，如下圖中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

2.外層有position：absolute（或relative）；那么p相對于外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

三、position：relative

相對位置：

如下圖，相對于把此p包含住的p的某個位置進行固定。如果外層沒有包含他的，那就相對于瀏覽器進行相對位置的固定。

四、分層（z-index）

在z軸方向分層，可以理解為分成一摞紙，層數(shù)越高越靠上。

在上面relative的示例中，我們看到了aa遮住了a，這是因為后寫代碼的顯示級別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa。如下：

五、float：left、right

Left、right時不用給他規(guī)定位置（left、top），直接相對于瀏覽器。若外部被包裹，相對于外部p的除去一行的位置的左上或右上顯示。

附加：1、

overflow：hidden；    //超出部分隱藏；scroll，顯示出滾動條；
<p >
</p>   //截斷流

2、cursor：pointer 鼠標(biāo)指到上面時的形狀；

3、半透明效果：

    <p class="box">透明區(qū)域<p>
             在樣式表中的代碼為：
             .box
             {
             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
             }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>無標(biāo)題文檔</title>  
<style type="text/css">  
.a   
{   
    border:5px solid blue;   
    width:1000px;   
    height:100px;   
    margin:10px;   
    left:150px;   
    top:80px;   
    position:absolute;}   
.b   
{   
    border:5px solid blue;   
    width:240px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:200px;   
    position:absolute;}   
.c   
{   
    border:5px solid blue;   
    width:740px;   
    height:300px;   
    margin:10px;   
    left:410px;   
    top:200px;   
    position:absolute;}   
.d   
{   
    border:5px solid blue;   
    width:740px;   
    height:200px;   
    margin:10px;   
    left:410px;   
    top:520px;   
    position:absolute;}   
.e   
{   
    border:5px solid blue;   
    width:240px;   
    height:1500px;   
    margin:10px;   
    left:150px;   
    top:420px;   
    position:absolute;}   
.f   
{   
    border:5px solid blue;   
    width:240px;   
    height:150px;   
    margin:10px;   
    left:150px;   
    top:1940px;   
    position:absolute;}   
.g   
{   
    border:5px solid blue;   
    width:740px;   
    height:1350px;   
    margin:10px;   
    left:410px;   
    top:740px;   
    position:absolute;}       
.h   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2110px;   
    position:absolute;}   
.i   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2330px;   
    position:absolute;}   
</style>  
</head>  
  
<body bgcolor="#F0F0F0">  
<p class="a">a</p>  
<p class="b">b</p>  
<p class="c">c</p>  
<p class="d">d</p>  
<p class="e">e</p>  
<p class="f">f</p>  
<p class="g">g</p>  
<p class="h">h</p>  
<p class="i">i</p>  
</body>  
</html>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML Form表單元素的詳解

HTML文本格式化的實例詳解

html的特殊字符-css3 content:"特殊符號"應(yīng)該如何使用

以上就是HTML的基礎(chǔ)知識.關(guān)于css樣式表和樣式屬性的詳細介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。