css需要學習都有什么呢？

css的一些基本樣式，盒子的margin,padding這些東西的理解，絕對定位相對定位的應用和關系，浮動元素清浮動方法，盒子邊緣塌陷問題，偽元素的應用，css3動畫transform和@keyform(這個可能拼寫的不對)配合transtion的應用，css3d效果等。

創新互聯公司服務項目包括澄邁網站建設、澄邁網站制作、澄邁網頁制作以及澄邁網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，澄邁網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到澄邁省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

之前沒有任何代碼基礎，想通過自學學會基礎的CSS樣式，如何高效自學CSS？

1、初期不要急著自己去設計頁面，直接仿站來讓自己獲得從0到1的能力。 找一些比較有新意的，結構上稍有復雜度的，基本沒切過有高相似度的頁面，時間要花在刀刃上。確實培養起了自己對CSS的興趣。

2、基礎技能練習差不多了，可以找份真實的工作來鞏固深入學習。比你自己業余去摸索要高效10倍。理解了CSS模塊化的思想，才發現自己以前只能算是完成了一個頁面，而不算是做好了它。真實的產品開發才是自己的CSS能力真正落地的開始。

3、工作后應繼續關注相關一些例如Codrops 等這類能帶來CSS使用靈感的網站，去思考為什么，而不是copy它的代碼去完成功能。頁面開發中有太多重復的工作，如果你一直用一個思路去解決問題，會有礙于經驗和能力的積累，形成一個較低級舒適區的怪圈。平時也可以去codepen這類網站收集一些瑣碎的靈感，增加知識面學習css過程中千萬不要剝離HTML學習。當什么時候理解了html的重要性（從頁面開發角度而言，它可以視為是后續良好css和js編碼得以實施的基礎，相當于程序中的數據結構，設計好了可以讓你事半功倍），你才可以稱得上是一個合格的頁面開發

4、對于新人，建議除了幾個關鍵概念，如布局、盒模型、單位等等，都不應該花大量去扣細節，甚至背書記憶，瀏覽性學習知道有這個東西就行，在實際應用時再去加深記憶。

以上算拋磚引玉，雖然一直認為純粹的CSS頁面開發并不適合作為前端領域里深入發展的方向，但不可否認，在學習玩耍css的過程中，帶給了自己很多樂趣。

CSS樣式表怎么做

1、創建使用css樣式表有三種，分別是外部樣式表，內部樣式表和內聯樣式。下面通過一個小demo演示它們的用法，首先新建一個html文件，放入3個button按鈕，給前兩個按鈕分別設置class屬性為btn1和btn2：

2、接著準備一個css文件，命名為demo.css，在文件內寫入按鈕A的樣式，保存css文件：

3、回到剛才的html文件，在style標簽中用link標簽引入上一步創建的css文件，這就是外聯樣式的用法，總結就是創建好的css文件內寫好樣式，然后在html文件中用link標簽引入即可，這也是大部分網站使用的方法，因為其引入方便，管理起來也比較方便：

4、接著是內部樣式表的使用，這里直接在head標簽里創建style標簽，在里面加入btn2的樣式。對于內部樣式表簡單的html文件，內部樣式是很方便的，但是結構復雜的html文件使用它就會讓文件顯得很混亂：

5、最后是內聯樣式的使用，直接在第三個標簽內使用style屬性加入樣式就可以了：

6、最后保存html文件，打開瀏覽器可以看到三個按鈕的樣式都出現了。以上就是css樣式表的制作方法：

css怎么樣需要學習什么知識？

CSS：Cascading Style sheet層疊樣式表或級聯樣式表，是一種樣式設置規則，用于控制頁面的外觀的樣式。使用CSS能夠實現內容與樣式的分離、方便團隊開發，有助于樣式復用、便于網站后期維護，實現頁面的精準控制、讓頁面更精美。

CSS代碼書寫方式分為三種：嵌入式、外鏈式、行內式。

嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過HTML中的

外鏈式：外鏈式是指單獨寫一個以.css為擴展名的文件，然后在標簽中使用標簽，將這個css文件鏈接到html文件中。(注意：css文件不能單獨的運行，它必須要依賴于HTML文件)

語法規則：

link rel="stylesheet" href="css文件的地址"

行內式：將CSS代碼書寫在HTML標簽的style屬性中。style是一個通用屬性，每一個標簽里面都擁有這個屬性!

語法格式：

標簽名 style=”屬性:值;屬性:值;”

初學CSS，你需要掌握這些使用技巧：

1、負邊距的效果。注意左右負邊距表現并不一致，左為負時是左移，右為負時是左拉。

2、BFC應用匯總：阻止外邊距合并(margin collapsing)、消除浮動的影響。

3、flex布局：當flex-grow之和小于1時，只能按比例分配部分剩余空間，而不是全部。

4、并不是給元素設置display:block就會自動填充父元素寬度。input 就是個例外，其默認寬度取決于size特性的值。

5、對定位和固定定位時，同時設置left和right等同于隱式地設置寬度。

6、position:sticky，粘性定位要起作用需要設置最后滯留位置。chrome有bug，firefox完美。

7、要使模態框背景透明，用rgba是一種簡單方式。

8、display:table實現多列等高布局。css實現定寬高比的原理：padding的百分比是相對于其包含塊的寬度，而不是高度。

9、background-position百分比的正確理解方式：圖片自身的百分比位置與容器同樣的百分比位置重合。

10、background-repeat新屬性值：round和space。前者表示湊個整，后者表示留點縫。

11、background-attachment指定背景如何附著在容器上，注意其屬性值local和fixed的使用。

12、可以使用outline來描邊，不占地方，它甚至可以在里面。

13、瀏覽器默認顯示tab為8個空格，tab-size可以指定空格長度。

14、圖片在指定尺寸后，可以設置object-fit為contain或cover保持比例。

15、設置寬度為fill-available，可以使inline-block像block那樣填充整個空間。

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

十、外部樣式表

外部樣式表是把各種樣式單獨存在一個文件里，供其他多個網頁調用，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“lx10.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、外部樣式表

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

2）在里面輸入下面的內容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注釋，注明作者版權用途等，根據自己的需要，

下面的內容跟內部樣式表相同，各個標簽和它的樣式，保存一下文件；

4）回到 lx10.html 文檔中，在 head 區內加上下面一行外部引用標識；

5）然后在 body 區內，輸入下面的內容；

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

6）保存一下文件，回到自己文件夾中，打開 lx10 網頁，看一下效果；

7）在多個網頁具有相同樣式時，使用外部樣式表可以節省空間和減小網頁大小；

本節學習了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續學習本站的其他課程！

本教程由86團學校TeliuTe制作

（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網）

CSS標簽大全(一)

字體屬性：(font)

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩background-color: #FFFFFF;

圖片background-image: url();

重復background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;

區塊屬性： (Block)

字間距letter-spacing: normal; 數值

對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進text-indent: 數值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題)

方框屬性：(Box)

width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

邊框屬性： (Border)

border-style: dotted(點線); dashed(虛線); solid(實線); double(雙線); groove(槽線); ridge;(脊狀) inset;(凹陷) outset;

border-wid

th:; 邊框寬度

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全

一 CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白*/

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-st

yle-type:decimal; /*阿拉伯數字*/

list-style-type:lower-roman; /*小寫羅馬數字*/

list-style-type:upper-roman; /*大寫羅馬數字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復排列-網頁默認*/

background-repeat : no-repeat; /*不重復排列*/

background-repeat : repeat-x; /*在x軸重復排列*/

background-repeat : repeat-y; /*在y軸重復排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標轉到鏈接*/

鼠標光標樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc;

/*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規的方式 如下:

border-top-color : #369 /*設置上框線top顏色*/

border-top-width :1px /*設置上框線top寬度*/

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運用：

文字方塊

按鈕

復選框

選擇鈕

多行文字方塊

下拉式菜單 選項1選項2

八、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性： 字體樣式(Font Style)

序號 中文說明 標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數值|inherit|normal;}

9 字 間 距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號 中文說明 標記語法

1

行 間 距 {line-height:數值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號 中文說明 標記語法

1 背景顏色 {background-color:數值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

框架樣式(Box Style)

序號 中文說明 標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補 白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數值

4 邊框顏色 {border-color:數值 數值 數值 數值} 數值：分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊 框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬 度 {width:長度|百分比| auto}

8 高 度 {height:數值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分類列表

序號 中文說明 標記語法

1 控制顯示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制換行的。使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。對于長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

九、鏈接樣式

使用偽類可以設置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開自己文件夾里的lx7.html

3）再點菜單“文件－另存為”命令，保存文件名為 “lx9.html”

2、設置偽類

1）在 head 區內，輸入內部樣式表，設定各個 的錨標記樣式，如下；

2）第一個 a 設定全局錨點的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點 a 的成員：

link 是鏈接，設定頁面中的鏈接樣式，顏色藍色，不帶下劃線，

visted 是訪問過的鏈接，設定樣式為栗色、不帶下劃線，

active 是按下鼠標時的鏈接，設定顏色為綠色、無下劃線，

hover 是鼠標移過來懸停，設定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個成員的后面；

3）保存一下文件，回到自己的文件夾中，打開 lx9 網頁，試著用鼠標點擊、拖動鏈接，看一下效果；

本節學習了設置鏈接樣式的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程8：內部樣式表(一)

八、內部樣式表

內部樣式表放在網頁的...區內，集中在一起方便管理，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“lx8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、內部樣式表

1）對系統標簽使用樣式，這會影響所有的這種標簽，在 head 區輸入下面的代碼；

2）第一行是樣式表開始，最后是樣式表結束， 是注釋標簽，

首先是對 body 標簽設置樣式，這樣凡是在 body 區里的內容，都會使用這個樣式，設置背景色和文字大小

然后對 span 標簽設置樣式，設置內容的顏色，以后凡是用到 span 的地方，都使用這個顏色；

3）接著在 body 區里輸入下面的內容；

1）對系統標簽使用樣式，這會影響所有的這種標簽，在 head 區輸入下面的代碼；

4）保存一下文件，回到自己的文件夾里，打開 lx8 網頁，看一下效果；

5）自定義樣式選擇符，除了系統的標簽外，也可以自己定義需要的樣式標記，在 head 的.樣式表里加入下面的代碼；

.myblue {

color:blue;

前面的點，表示這是一個通用的樣式，可以重復使用，如果是 #號，表示是一個標識符，是專用唯一的 id，myblue 是自定義的樣式名稱；

6）在 body 區里加入下面的代碼，加在上一行的前面，再加上

標簽分成兩段；

7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設的樣式，

保存一下文件，到瀏覽器中看看效果；

本節學習了使用內部樣式表的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

七、ul 列表

對于排列有序的條目，可以使用列表來實現，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“lx8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、使用列表（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網）

1）在后面接著輸入下面的代碼；

第一課

第二課

第三課

2）前面的

建立一個列表，里面的各個

是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號，

保存一下文件，到自己文件夾里，打開 lx7 網頁，看看列表的效果，這兒加了 超級鏈接；

3）如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內邊距為 0，輸入下面的代碼；

第一課

第二課

第三課

4）保存一下，再到瀏覽器里看一下，三個列表都排到了左邊對齊；

5）如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；

6）保存一下，再到瀏覽器里看一下，三個列表項都水平排列了；

本節學習了列表的基本使用方法，如果你成功地完成了練習，請繼續學習下一課內容；

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

六、div 布局

默認 div 占據一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局，我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開上次的 lx5 網頁，再點“文件－另存為”，以“lx6.html”為文件名，保存到自己的文件夾；

3）按照兩列并排來進行布局；

2、定位布局

1）在下面加一個

標簽，作為主框架，在標簽里加入下面的樣式；

2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，

在里面的樣式里設置了顏色、邊框、內邊距，

設定了固定寬度 604，高度 202，這個可以計算出來，根據下面兩列的寬度再加上內邊距；

3）修改里面的古詩的 div 樣式，加上背景色、去掉內外邊距，最后加上一個左浮動 float:left

4）在這個后面，再加上另一個 div，樣式相同，里面輸入另一首古詩 ；

5）這兒的 float:left; 讓這個 div 框，跟上一個框并排左對齊，而不是到下一行去，

最后再加一個標簽，結束最外面的大框架；

6）保存一下文件，回到自己文件夾里，打開 lx6 網頁看看效果；

本節學習了使用 div 布局的基本方法，如果你成功地完成了練習，請繼續學習下一課內容；

;

網站題目：css樣式學習,css樣式的基本認識
URL地址：http://vcdvsql.cn/article36/dsdehpg.html

成都網站建設公司_創新互聯，為您提供網站設計、網站改版、網站設計公司、網站維護、網站制作、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯