網(wǎng)頁制作案例教程筆記（HTML+CSS+JaVaScript）

時間：2023-10-04 13:30:01 | 來源：網(wǎng)站運營

時間：2023-10-04 13:30:01 來源：網(wǎng)站運營

網(wǎng)頁制作案例教程筆記（HTML+CSS+JaVaScript）：

---

第三章使用CSS技術

（5）text-decoration:文本轉(zhuǎn)換。

●none:不轉(zhuǎn)換（默認值）。

●underline:首字母大寫。

●overline:全部字母轉(zhuǎn)換成大寫。

●line-through:全部字母轉(zhuǎn)換成小寫。

（6）text-decoration:文本裝飾。

●none:無裝飾（默認值）。

●underline：下劃線。

●overline：上劃線。

●line-thorugh：刪除線。

(7)text-align:水平對齊方式。

text-align:水平對齊方式，用以設置文本內(nèi)容的誰平對齊方式。

●left:左對齊（默認值）。

●right:右對齊。

●center:劇中對齊。

（8）text-indent:首行縮進?！猠m(單位)

（9）white-space:空白符處理。

●normal:常規(guī)顯示（默認值），文本中的空格、空行無效，滿行（到達區(qū)域邊界）后自動換行。

●pre:預格式化，保留空格，空行原樣顯示。

●nowrap:空格空行無效，強制文本不能換行，除遇到<br/>。內(nèi)容超出元素邊界也不會換行，若超出瀏覽器邊界則會自動增加滾動條。

（10）text-dhadow:陰影效果。

text-dhadow:陰影效果，用于頁面文本添加陰影效果。

text-dhadow:語法：

選擇器{text-dhadow:

●h-shadow ；設置陰影水平偏移距離。

●v-shadow ；設置陰影垂直偏移距離。

●blur ；設置模糊半徑。

●color；設置陰影顏色。

}

eg:選擇器{text-dhadow:10px 10px 10px red color;}

(11)text-overflow:標示對象內(nèi)溢出文本。

●clip:修剪溢出文本，不顯示省略“...”。

●elliosis:用省略標簽"..."代替被修剪文本，省略標簽插入的位置是最后一個字符。

第四章運用盒子模型劃分網(wǎng)頁模塊

backgroung-color設置背景顏色

backgroung-imagw：url(圖像)設置背景圖像

backgroung-repeat:設置背景圖像平鋪

●repeat:沿水平和豎直兩個方向平鋪。（默）

●no-repeat:不平鋪。（圖像位于左上角，只顯示一次）

●repeat-x:只沿水平方向平鋪。

●repeat-y:只沿垂直方向平鋪。

backgroung-position設置背景圖像的位置

●水平方向：left ,center, right

●垂直方向：top ,center ,bottom

backgroung-attachment設置背景圖像固定

●scroll:圖像隨頁面一起滾動。（默認）

●fixed:圖像固定在屏幕上，不隨頁面滾動。

backgroung綜合設置元素背景

順序：url(圖像)，平鋪，定位，固定。

元素類型分為

（1）塊元素：以區(qū)域的形勢出現(xiàn)，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構的搭建。

eg:<div>/<h1>~<h6>/<p>/<ul>/<ol>/<li>

（2）行內(nèi)元素：無獨立區(qū)域，一般不可以設置寬度，高度，對齊等屬性。

eg:<span>/<strong>加粗/<b>/<em>傾斜/<i>/<del>/<s>/<ins>/<u>/<s>/<a>

<span>容器標簽：

作用：只能包含文字和各種行內(nèi)標簽的容器。

注意：<div>標簽可以嵌套<span>標簽，

<span>標簽不能嵌套<div>標簽。

display元素類型的轉(zhuǎn)換：

●inline:此元素將顯示為行內(nèi)元素。

●block:此元素將顯示為塊元素。

●inline-block:此元素將顯示為塊元素，可以為其設置寬度，高度，和對齊方式等屬性，但該元素不會占據(jù)一行。

●none:此元素將會被隱藏，不顯示，不占據(jù)空間，相當于該元素不存在。

第七章運用浮動和定位布局

float浮動：

●left:標簽向左浮動。

●right:標簽向右浮動。

●none:標簽不浮動（默認）。

clear清除浮動：

●left:不允許左側(cè)有浮動標簽。

●right:不允許右側(cè)有浮動標簽。

●both:同時清除左右兩側(cè)浮動影響。

（1）使用空標簽清除浮動：

（2）使用overflow清除浮動：

{overflow:hidden}

（3）使用after清除浮動：

overflow規(guī)定溢出的顯示狀態(tài)：

visible:內(nèi)容不會被修剪，會呈現(xiàn)在標簽框之外（默認值）

hidden:溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的。

auto:在需要時產(chǎn)生滾動條，即自適應所要顯示內(nèi)容。

scroll:溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條。

position定位模式

static:自動定位（默認）

relative:相對定位，相對于其原文檔的位置進行定位。

absolute:絕對定位，相對與其上一個已經(jīng)定位的父標簽進行定位。

fixed:固定定位，相對于瀏覽器窗口進行定位。

邊偏移

top:頂端偏移

bottom:底部偏移

left:左側(cè)偏移量

right:右側(cè)偏移量

定位類型

靜態(tài)定位

行對定位

絕對定位

固定定位




z-index層疊等級屬性

默認值是0，取值越大，定位元素在層疊元素中越居上。

布局

（1）確定頁面的版心寬度

（2）分析頁面中的模板