HTML的基礎(chǔ)知識(shí).對(duì)于css樣式表與樣式屬性的詳細(xì)說明
發(fā)表時(shí)間：2023-09-21 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)鞨TML的基礎(chǔ)知識(shí).關(guān)于css樣式表和樣式屬性的詳細(xì)介紹，使用HTML的基礎(chǔ)知識(shí)css樣式表和樣式屬性的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一、position：fixed 鎖定位置（相對(duì)于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。二、position：abs...
這次給大家?guī)鞨TML的基礎(chǔ)知識(shí).關(guān)于css樣式表和樣式屬性的詳細(xì)介紹，使用HTML的基礎(chǔ)知識(shí)css樣式表和樣式屬性的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
一、position：fixed
鎖定位置（相對(duì)于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。
二、position：absolute
絕對(duì)位置：
1.外層沒有position：absolute（或relative）；那么p相對(duì)于瀏覽器定位，如下圖中b（距離瀏覽器右邊框?yàn)?0像素，距離下邊框?yàn)?0像素）。
2.外層有position：absolute（或relative）；那么p相對(duì)于外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框?yàn)?0像素）。
三、position：relative
相對(duì)位置：
如下圖，相對(duì)于把此p包含住的p的某個(gè)位置進(jìn)行固定。如果外層沒有包含他的，那就相對(duì)于瀏覽器進(jìn)行相對(duì)位置的固定。
四、分層（z-index）
在z軸方向分層，可以理解為分成一摞紙，層數(shù)越高越靠上。
在上面relative的示例中，我們看到了aa遮住了a，這是因?yàn)楹髮懘a的顯示級(jí)別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa。如下：
五、float：left、right
Left、right時(shí)不用給他規(guī)定位置（left、top），直接相對(duì)于瀏覽器。若外部被包裹，相對(duì)于外部p的除去一行的位置的左上或右上顯示。
附加：1、
overflow：hidden； //超出部分隱藏；scroll，顯示出滾動(dòng)條；
<p >
</p> //截?cái)嗔?/pre> 2、cursor：pointer 鼠標(biāo)指到上面時(shí)的形狀；
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)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
HTML Form表單元素的詳解
HTML文本格式化的實(shí)例詳解
html的特殊字符-css3 content:"特殊符號(hào)"應(yīng)該如何使用
以上就是HTML的基礎(chǔ)知識(shí).關(guān)于css樣式表和樣式屬性的詳細(xì)介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
