1.打這些字符出來(lái)直接寫(xiě)到網(wǎng)頁(yè)標(biāo)題中,比如:·
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為1000+客戶(hù)提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為岳普湖企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),岳普湖網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
2.li自帶圓點(diǎn)(如果你沒(méi)去掉的話(huà))
3.圖片做個(gè)圓點(diǎn)或其他玩意,定義成背景圖
如果你指的是title/title這個(gè)標(biāo)題里面的文字,那css控制不了,只能打符號(hào)字進(jìn)去:
title●你的標(biāo)題/title
title·你的標(biāo)題/title
大多數(shù)拼音輸入法先:按v再按1,都能打出這些字符
CSS樣式表代碼布局基礎(chǔ)教程
CSS樣式表代碼布局基礎(chǔ)教程—課程10:外部樣式表(一)
十、外部樣式表
外部樣式表是把各種樣式單獨(dú)存在一個(gè)文件里,供其他多個(gè)網(wǎng)頁(yè)調(diào)用,下面我們來(lái)看一個(gè)練習(xí);
1、文本編輯器
1)打開(kāi)記事本或 gedit、leafpad 文本編輯器,gedit 在查看菜單里選擇“HTML”;
2)點(diǎn)菜單“文件-保存”命令,以“l(fā)x10.html”為文件名,類(lèi)型所有文件,編碼 UTF-8,保存到自己的文件夾;
3)按照基礎(chǔ)02課的方法,輸入、和的內(nèi)容;
2、外部樣式表
1)點(diǎn)菜單“文件-新建”,新建一個(gè)空白文檔,保存文件名為 style.css ,位置跟 lx10 放一起,這是一個(gè)單獨(dú)的文件;
2)在里面輸入下面的內(nèi)容;
/* by TeliuTe */
body {
background-color: #ccffff;
font-size:1.2em;
span {
color:#800000;
.myblue {
color:blue;
3)第一行 /* ... */ 是注釋?zhuān)⒚髯髡甙鏅?quán)用途等,根據(jù)自己的需要,
下面的內(nèi)容跟內(nèi)部樣式表相同,各個(gè)標(biāo)簽和它的樣式,保存一下文件;
4)回到 lx10.html 文檔中,在 head 區(qū)內(nèi)加上下面一行外部引用標(biāo)識(shí);
5)然后在 body 區(qū)內(nèi),輸入下面的內(nèi)容;
1)點(diǎn)菜單“文件-新建”,新建一個(gè)空白文檔,保存文件名為 style.css ,位置跟 lx10 放一起,這是一個(gè)單獨(dú)的文件;
6)保存一下文件,回到自己文件夾中,打開(kāi) lx10 網(wǎng)頁(yè),看一下效果;
7)在多個(gè)網(wǎng)頁(yè)具有相同樣式時(shí),使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁(yè)大?。?/p>
本節(jié)學(xué)習(xí)了外部樣式表的使用方法,你成功地完成了本教程,歡迎繼續(xù)學(xué)習(xí)本站的其他課程!
本教程由86團(tuán)學(xué)校TeliuTe制作
(計(jì)算機(jī)基礎(chǔ)知識(shí),電腦知識(shí)入門(mén)學(xué)習(xí),請(qǐng)到http://電腦知識(shí)網(wǎng))
CSS標(biāo)簽大全(一)
字體屬性:(font)
大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到,只要用數(shù)值就可以,單位:PX、PD
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
行高 line-height: normal;(正常) 單位:PX、PD、EM
粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)
變體 font-variant: small-caps;(小型大寫(xiě)字母) normal;(正常)
大小寫(xiě) text-transform: capitalize;(首字母大寫(xiě)) uppercase;(大寫(xiě)) lowercase;(小寫(xiě)) none;(無(wú))
修飾 text-decoration: underline;(下劃線(xiàn)) overline;(上劃線(xiàn)) line-through;(刪除線(xiàn)) blink;(閃爍)
常用字體:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性:(background)
色彩background-color: #FFFFFF;
圖片background-image: url();
重復(fù)background-repeat: no-repeat;
滾動(dòng)background-attachment: fixed;(固定) scroll;(滾動(dòng))
位置background-position: left(水平) top(垂直);
簡(jiǎn)寫(xiě)方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;
區(qū)塊屬性: (Block)
字間距l(xiāng)etter-spacing: normal; 數(shù)值
對(duì)劉text-align: justify;(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) center;(居中)
縮進(jìn)text-indent: 數(shù)值px;
垂直對(duì)齊vertical-align: baseline;(基線(xiàn)) sub;(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數(shù)值
空格white-space: pre;(保留) nowrap;(不換行)
顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題)
方框?qū)傩裕?Box)
width:; height:; float:; clear:both; margin:; padding:; 順序:上右下左
邊框?qū)傩裕?(Border)
border-style: dotted(點(diǎn)線(xiàn)); dashed(虛線(xiàn)); solid(實(shí)線(xiàn)); double(雙線(xiàn)); groove(槽線(xiàn)); ridge;(脊?fàn)? inset;(凹陷) outset;
border-wid
th:; 邊框?qū)挾?/p>
border-color:#;
簡(jiǎn)寫(xiě)方法border:width style color;
列表屬性: (List-style)
類(lèi)型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) 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%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線(xiàn)*/
text-decoration: overline; /*加頂線(xiàn)*/
text-decoration:underline; /*加下劃線(xiàn)*/
text-decoration:none; /*刪除鏈接下劃線(xiàn)*/
text-transform : capitalize; /*首字大寫(xiě)*/
text-transform : uppercase; /*英文大寫(xiě)*/
text-transform : lowercase; /*英文小寫(xiě)*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白*/
三、CSS符號(hào)屬性:
list-style-type:none; /*不編號(hào)*/
list-st
yle-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫(xiě)羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫(xiě)羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫(xiě)英文字母*/
list-style-type:upper-alpha; /*大寫(xiě)英文字母*/
list-style-type:disc; /*實(shí)心圓形符號(hào)*/
list-style-type:circle; /*空心圓形符號(hào)*/
list-style-type:square; /*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif); /*圖片式符號(hào)*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
四、CSS背景樣式:
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*/
五、CSS連接屬性:
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過(guò)的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式:
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問(wèn)號(hào) 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
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
六、CSS框線(xiàn)一覽表:
border-top : 1px solid #6699cc; /*上框線(xiàn)*/
border-bottom : 1px solid #6699cc;
/*下框線(xiàn)*/
border-left : 1px solid #6699cc; /*左框線(xiàn)*/
border-right : 1px solid #6699cc; /*右框線(xiàn)*/
以上是建議書(shū)寫(xiě)方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設(shè)置上框線(xiàn)top顏色*/
border-top-width :1px /*設(shè)置上框線(xiàn)top寬度*/
border-top-style : solid/*設(shè)置上框線(xiàn)top樣式*/
其他框線(xiàn)樣式
solid /*實(shí)線(xiàn)框*/
dotted /*虛線(xiàn)框*/
double /*雙線(xiàn)框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運(yùn)用:
文字方塊
按鈕
復(fù)選框
選擇鈕
多行文字方塊
下拉式菜單 選項(xiàng)1選項(xiàng)2
八、CSS邊界樣式:
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性: 字體樣式(Font Style)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類(lèi)型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}
5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數(shù)值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數(shù)值|inherit|normal;}
9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}
10 單詞間距 {word-spacing:數(shù)值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉(zhuǎn)換 {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)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1
行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對(duì)齊 {text-align:left|right|center|justify}
5 垂直對(duì)齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書(shū)寫(xiě)方式 {writing-mode:lr-tb|tb-rl}
背景樣式
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}
框架樣式(Box Style)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬度值: thin|medium|thick|數(shù)值
4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值:分別代表top、right、bottom、left顏色值
5 邊框風(fēng)格 {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:長(zhǎng)度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類(lèi)列表
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 控制顯示 {display:none
|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號(hào)列表 {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:目錄樣式類(lèi)型|目錄樣式位置|url}
7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
word-wrap是控制換行的。使用break-word時(shí),是將強(qiáng)制換行。中文沒(méi)有任何問(wèn)題,英文語(yǔ)句也沒(méi)問(wèn)題。但是對(duì)于長(zhǎng)串的英文,就不起作用。break-word是控制是否斷詞的。normal是默認(rèn)情況,英文單詞不被拆開(kāi)。break-all,是斷開(kāi)單詞。在單詞到邊界時(shí),下個(gè)字母自動(dòng)到下一行。主要解決了長(zhǎng)串英文的問(wèn)題。keep-all,是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí),不用word-wrap,中文就不會(huì)換行了。(英文語(yǔ)句正常。)ie下:使用word-wrap:break- word;所有的都正常。ff下:如這2個(gè)都不用的話(huà),中文不會(huì)出任何問(wèn)題。英文語(yǔ)句也不會(huì)出問(wèn)題。但是,長(zhǎng)串英文會(huì)出問(wèn)題。為了解決長(zhǎng)串英文,一般用 word-wrap:break-word;word-break:break-all;。但是,此方式會(huì)導(dǎo)致,普通的英文語(yǔ)句中的單詞會(huì)被斷開(kāi)(ie下也是)。目前主要的問(wèn)題存在于 長(zhǎng)串英文 和 英文單詞被斷開(kāi)。其實(shí)長(zhǎng)串英文就是一個(gè)比較長(zhǎng)的單詞而已。即英文單詞應(yīng)不應(yīng)該被斷開(kāi)那?那問(wèn)題很明顯了,顯然不應(yīng)該被斷開(kāi)了。對(duì)于長(zhǎng)串英文,就是惡意的東西,自然不用去管了。但是,也要想些辦法,不讓它把容器撐大。用:overflow:auto; ie下,長(zhǎng)串會(huì)自動(dòng)折行。ff下,長(zhǎng)串會(huì)被遮蓋。所以,綜上,最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
CSS樣式表代碼布局基礎(chǔ)教程—課程9:鏈接樣式
九、鏈接樣式
使用偽類(lèi)可以設(shè)置鏈接的樣式,比如改變顏色、去掉下劃線(xiàn)等,下面我們來(lái)看一個(gè)練習(xí);
1、文本編輯器
1)打開(kāi)記事本或 gedit、leafpad 文本編輯器,gedit 在查看菜單里選擇“HTML”;
2)點(diǎn)菜單“文件-打開(kāi)”命令,打開(kāi)自己文件夾里的lx7.html
3)再點(diǎn)菜單“文件-另存為”命令,保存文件名為 “l(fā)x9.html”
2、設(shè)置偽類(lèi)
1)在 head 區(qū)內(nèi),輸入內(nèi)部樣式表,設(shè)定各個(gè) 的錨標(biāo)記樣式,如下;
2)第一個(gè) a 設(shè)定全局錨點(diǎn)的樣式,用塊顯示、寬度是50像素、背景色是淺綠色,接下來(lái)是錨點(diǎn) a 的成員:
link 是鏈接,設(shè)定頁(yè)面中的鏈接樣式,顏色藍(lán)色,不帶下劃線(xiàn),
visted 是訪(fǎng)問(wèn)過(guò)的鏈接,設(shè)定樣式為栗色、不帶下劃線(xiàn),
active 是按下鼠標(biāo)時(shí)的鏈接,設(shè)定顏色為綠色、無(wú)下劃線(xiàn),
hover 是鼠標(biāo)移過(guò)來(lái)懸停,設(shè)定顏色為紅色、有下劃線(xiàn),背景色改成黃色,hover 放在其他幾個(gè)成員的后面;
3)保存一下文件,回到自己的文件夾中,打開(kāi) lx9 網(wǎng)頁(yè),試著用鼠標(biāo)點(diǎn)擊、拖動(dòng)鏈接,看一下效果;
本節(jié)學(xué)習(xí)了設(shè)置鏈接樣式的基本方法,如果你成功地完成了練習(xí),請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容;
CSS樣式表代碼布局基礎(chǔ)教程—課程8:內(nèi)部樣式表(一)
八、內(nèi)部樣式表
內(nèi)部樣式表放在網(wǎng)頁(yè)的...區(qū)內(nèi),集中在一起方便管理,下面我們來(lái)看一個(gè)練習(xí);
1、文本編輯器
1)打開(kāi)記事本或 gedit、leafpad 文本編輯器,gedit 在查看菜單里選擇“HTML”;
2)點(diǎn)菜單“文件-保存”命令,以“l(fā)x8.html”為文件名,類(lèi)型所有文件,編碼 UTF-8,保存到自己的文件夾;
3)按照基礎(chǔ)02課的方法,輸入、和的內(nèi)容;
2、內(nèi)部樣式表
1)對(duì)系統(tǒng)標(biāo)簽使用樣式,這會(huì)影響所有的這種標(biāo)簽,在 head 區(qū)輸入下面的代碼;
2)第一行是樣式表開(kāi)始,最后是樣式表結(jié)束, 是注釋標(biāo)簽,
首先是對(duì) body 標(biāo)簽設(shè)置樣式,這樣凡是在 body 區(qū)里的內(nèi)容,都會(huì)使用這個(gè)樣式,設(shè)置背景色和文字大小
然后對(duì) span 標(biāo)簽設(shè)置樣式,設(shè)置內(nèi)容的顏色,以后凡是用到 span 的地方,都使用這個(gè)顏色;
3)接著在 body 區(qū)里輸入下面的內(nèi)容;
1)對(duì)系統(tǒng)標(biāo)簽使用樣式,這會(huì)影響所有的這種標(biāo)簽,在 head 區(qū)輸入下面的代碼;
4)保存一下文件,回到自己的文件夾里,打開(kāi) lx8 網(wǎng)頁(yè),看一下效果;
5)自定義樣式選擇符,除了系統(tǒng)的標(biāo)簽外,也可以自己定義需要的樣式標(biāo)記,在 head 的.樣式表里加入下面的代碼;
.myblue {
color:blue;
前面的點(diǎn),表示這是一個(gè)通用的樣式,可以重復(fù)使用,如果是 #號(hào),表示是一個(gè)標(biāo)識(shí)符,是專(zhuān)用唯一的 id,myblue 是自定義的樣式名稱(chēng);
6)在 body 區(qū)里加入下面的代碼,加在上一行的前面,再加上
標(biāo)簽分成兩段;
7)這兒使用的是 span,里面的 class 套用的是 myblue 樣式,替換了前面設(shè)的樣式,
保存一下文件,到瀏覽器中看看效果;
本節(jié)學(xué)習(xí)了使用內(nèi)部樣式表的基本方法,如果你成功地完成了練習(xí),請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容;
CSS樣式表代碼布局基礎(chǔ)教程—課程7:ul列表(一)
七、ul 列表
對(duì)于排列有序的條目,可以使用列表來(lái)實(shí)現(xiàn),下面我們來(lái)看一個(gè)練習(xí);
1、文本編輯器
1)打開(kāi)記事本或 gedit、leafpad 文本編輯器,gedit 在查看菜單里選擇“HTML”;
2)點(diǎn)菜單“文件-保存”命令,以“l(fā)x8.html”為文件名,類(lèi)型所有文件,編碼 UTF-8,保存到自己的文件夾;
3)按照基礎(chǔ)02課的方法,輸入、和的內(nèi)容;
2、使用列表(計(jì)算機(jī)基礎(chǔ)知識(shí),電腦知識(shí)入門(mén)學(xué)習(xí),請(qǐng)到http://電腦知識(shí)網(wǎng))
1)在后面接著輸入下面的代碼;
第一課
第二課
第三課
2)前面的
建立一個(gè)列表,里面的各個(gè)
是列表項(xiàng),各個(gè)列表項(xiàng)排列對(duì)齊縮進(jìn),前面有一個(gè)圓點(diǎn)列表符號(hào),
保存一下文件,到自己文件夾里,打開(kāi) lx7 網(wǎng)頁(yè),看看列表的效果,這兒加了 超級(jí)鏈接;
3)如果要去掉前面的圓點(diǎn),可以在 ul 的樣式里設(shè)定,前面的縮進(jìn)也可以設(shè)定內(nèi)邊距為 0,輸入下面的代碼;
第一課
第二課
第三課
4)保存一下,再到瀏覽器里看一下,三個(gè)列表都排到了左邊對(duì)齊;
5)如果要排列成橫向水平的菜單樣式,可以在每個(gè)列表項(xiàng)里加上 float 屬性,防止重疊再設(shè)定一個(gè)寬度,代碼如下;
6)保存一下,再到瀏覽器里看一下,三個(gè)列表項(xiàng)都水平排列了;
本節(jié)學(xué)習(xí)了列表的基本使用方法,如果你成功地完成了練習(xí),請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容;
CSS樣式表代碼布局基礎(chǔ)教程—課程6:div布局(一)
六、div 布局
默認(rèn) div 占據(jù)一行,第二個(gè) div 到下一行去,怎樣用 div 進(jìn)行分欄布局,我們來(lái)看一個(gè)練習(xí);
1、文本編輯器
1)打開(kāi)記事本或 gedit、leafpad 文本編輯器,gedit 在查看菜單里選擇“HTML”;
2)點(diǎn)菜單“文件-打開(kāi)”命令,打開(kāi)上次的 lx5 網(wǎng)頁(yè),再點(diǎn)“文件-另存為”,以“l(fā)x6.html”為文件名,保存到自己的文件夾;
3)按照兩列并排來(lái)進(jìn)行布局;
2、定位布局
1)在下面加一個(gè)
標(biāo)簽,作為主框架,在標(biāo)簽里加入下面的樣式;
2)前面的 id 是這個(gè) div 的標(biāo)識(shí)符,用來(lái)標(biāo)記這個(gè) div 容器,
在里面的樣式里設(shè)置了顏色、邊框、內(nèi)邊距,
設(shè)定了固定寬度 604,高度 202,這個(gè)可以計(jì)算出來(lái),根據(jù)下面兩列的寬度再加上內(nèi)邊距;
3)修改里面的古詩(shī)的 div 樣式,加上背景色、去掉內(nèi)外邊距,最后加上一個(gè)左浮動(dòng) float:left
4)在這個(gè)后面,再加上另一個(gè) div,樣式相同,里面輸入另一首古詩(shī) ;
5)這兒的 float:left; 讓這個(gè) div 框,跟上一個(gè)框并排左對(duì)齊,而不是到下一行去,
最后再加一個(gè)標(biāo)簽,結(jié)束最外面的大框架;
6)保存一下文件,回到自己文件夾里,打開(kāi) lx6 網(wǎng)頁(yè)看看效果;
本節(jié)學(xué)習(xí)了使用 div 布局的基本方法,如果你成功地完成了練習(xí),請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容;
;
如果說(shuō)是不能靠邊顯示的話(huà),就應(yīng)該檢查一下元素style的繼承和優(yōu)先級(jí)問(wèn)題,這樣的話(huà),沒(méi)有完整的代碼別人是幫你解決不了的,通常元素的style="..."的優(yōu)先級(jí)最高,其次是頭部的style再次的是css文件中的,相同的頁(yè)面中后面的要比前面的高,除了設(shè)置!important的外。所以,margin 和padding設(shè)置無(wú)效還是要通盤(pán)檢查一下繼承和優(yōu)先級(jí)的問(wèn)題,還有是不是它的子元素單獨(dú)設(shè)置了margin把它頂了出來(lái)。
----------修改了一下,不過(guò)原答案手敲的代碼還是不刪了-----------------
是ulli.../li/ul中每個(gè)li內(nèi)容之前的圓點(diǎn)嗎?
如果是的話(huà),在CSS中給相應(yīng)的li添加 list-style;none就可以了
如下:第一個(gè)的UL中沒(méi)對(duì)list-style進(jìn)行設(shè)置,就有點(diǎn),第二個(gè)就沒(méi)了,你也可以對(duì)list-style-type:屬性進(jìn)行修改,顯示其它的圖標(biāo)替代圓點(diǎn),比如方塊,圓圈什么的:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title/title
style type="text/css"
.show /** 不設(shè)置,默認(rèn),大圓點(diǎn) **/
{
}
.hide /** 圓點(diǎn)消失 **/
{
list-style:nonel
}
.other /** 設(shè)置個(gè)數(shù)字序號(hào),其它的符號(hào)見(jiàn)后 **/
{
list-style-type: decimal;
}
/style
/head
body
ul class="show"
liaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/li
/ul
ul class="hide"
liaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/li
/ul
ul class="other"
liaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/liliaaaaaa/li
/ul
/body
/html
附list-style-type可用的屬性。
none 無(wú)標(biāo)記。
disc 默認(rèn)。標(biāo)記是實(shí)心圓。
circle 標(biāo)記是空心圓。
square 標(biāo)記是實(shí)心方塊。
decimal 標(biāo)記是數(shù)字。
decimal-leading-zero 0開(kāi)頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)
lower-roman 小寫(xiě)羅馬數(shù)字(i, ii, iii, iv, v, 等。)
upper-roman 大寫(xiě)羅馬數(shù)字(I, II, III, IV, V, 等。)
lower-alpha 小寫(xiě)英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫(xiě)英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫(xiě)希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫(xiě)拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫(xiě)拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統(tǒng)的希伯來(lái)編號(hào)方式
armenian 傳統(tǒng)的亞美尼亞編號(hào)方式
georgian 傳統(tǒng)的喬治亞編號(hào)方式(an, ban, gan, 等。)
cjk-ideographic 簡(jiǎn)單的表意數(shù)字
hiragana 標(biāo)記是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 標(biāo)記是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 標(biāo)記是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 標(biāo)記是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
list-style:none ulli 設(shè)置列表標(biāo)記默認(rèn)會(huì)是實(shí)心圓點(diǎn),設(shè)成none就是沒(méi)有標(biāo)記列表格式有好幾種。list-style-type設(shè)置列表的格式為none也就是沒(méi)有格式。操作方法如下:
1、首先新建一個(gè)html文件,命名為test.html。
2、在test.html文件內(nèi),使用ul、li標(biāo)簽創(chuàng)建一個(gè)列表,分別為測(cè)試一,測(cè)試二,測(cè)試三。
3、在test.html文件內(nèi),給ul標(biāo)簽添加一個(gè)class屬性,用于樣式的設(shè)置。
4、在test.html文件內(nèi),編寫(xiě)style type="text/css"/style標(biāo)簽,頁(yè)面的css樣式將寫(xiě)在該標(biāo)簽內(nèi)。
5、在css標(biāo)簽內(nèi),通過(guò)class來(lái)設(shè)置ul的樣式,將list-style屬性設(shè)置為none,便可以實(shí)現(xiàn)取消掉li前面的點(diǎn)。
6、最后在瀏覽器打開(kāi)test.html文件,查看實(shí)現(xiàn)的效果。
在ul標(biāo)簽下li的默認(rèn)樣式為一個(gè)實(shí)心圓(disc)? ?可忽略不寫(xiě)
li樣式的改變是用 list-style:屬性值 來(lái)改變的
我們給li設(shè)置css,去除默認(rèn)樣式(實(shí)心圓)
將li的樣式設(shè)置為空心圓
將li的樣式設(shè)置為實(shí)心正方形
其他:
decimal ? : ? CSS1 阿拉伯?dāng)?shù)字
lower-roman ? :? CSS1 小寫(xiě)羅馬數(shù)字 ?
upper-roman ? :? CSS1 大寫(xiě)羅馬數(shù)字 ?
lower-alpha ? :? CSS1 小寫(xiě)英文字母 ?
upper-alpha ? :? CSS1 大寫(xiě)英文字母??
armenian ? : ? CSS2 傳統(tǒng)的亞美尼亞數(shù)字 ?
cjk-ideographic ? :? CSS2 淺白的表意數(shù)字 ?
georgian ? : ? CSS2 傳統(tǒng)的喬治數(shù)字 ?
lower-greek ? :? CSS2 基本的希臘小寫(xiě)字母?
hebrew ? : ? CSS2 傳統(tǒng)的希伯萊數(shù)字 ?
hiragana ? : ? CSS2 日文平假名字符 ?
hiragana-iroha ? :? CSS2 日文平假名序號(hào) ?
katakana ? : ? CSS2 日文片假名字符 ?
katakana-iroha ? :? CSS2 日文片假名序號(hào) ?
lower-latin ? :? CSS2 小寫(xiě)拉丁字母 ?
upper-latin ? :? CSS2 大寫(xiě)拉丁字母?