html css 樣式 ul li

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?

創(chuàng)新互聯(lián)建站專注于潮州企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站建設(shè)。潮州網(wǎng)站建設(shè)公司,為潮州等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

""?

html?xmlns=""?lang="zh-CN"

head

title鼠標(biāo)移動(dòng)顯示/title

meta?http-equiv="Content-Type"?content="text/html;charset=utf-8"/

meta?name="description"?content=""/

script?type="text/javascript"?src="js/jquery-1.8.0.js"/script?

style?type="text/css"

ul,li{

margin:0px;

padding:0px;

list-style:?none;

}

ul{

height:31px;

border-bottom:1px?solid?#f46d52;

}

li{

width:100px;

height:30px;

border-radius:5px?5px?0px?0px;

border:1px?solid?#ccc;

border-bottom:none;

text-align:?center;

line-height:?30px;

background-color:#EEEEEE;

float:?left;

color:black;

font-weight:?800;

margin-left:5px;

}

li:hover{

height:31px;

background-color:?white;

color:#FDE7D2;

border:1px?solid?#f46d52;

border-bottom:none;

cursor:pointer;

}

/style?

/head

body

div?class="nav"

ul

li導(dǎo)航1/li

li導(dǎo)航2/li

li導(dǎo)航3/li

/ul

/div

/body

/html

效果圖：

這個(gè)只是簡(jiǎn)單的.hover事件，如果要點(diǎn)擊得到效果那個(gè)需要寫js。。。

在css中設(shè)置ul樣式，怎樣修改li的前面默認(rèn)圓點(diǎn)的顏色？

li{list-style:none}把默認(rèn)的給去掉，然后把著了色的圓點(diǎn)切成一張背景圖片使用。

1.li自身圓點(diǎn)的顏色是修改不了的，你不想要那個(gè)圓點(diǎn)的話，可以通過以下幾種方式來(lái)解決，.將圓點(diǎn)去掉，li{?list-style:none}，然后用color:#ff0000;設(shè)置字體的顏色，li./li這里的點(diǎn)就是紅色的了。

2.你可以設(shè)置為自己喜歡的顏色，如果你要區(qū)分點(diǎn)和字的顏色，可以在li里面再嵌入一個(gè)標(biāo)簽，像這樣：li style="color:#ff0000; font-size。

3.12px;"span style="color:#00ff00; font-size:20px;"./spanlist1/li這樣點(diǎn)就是綠色的，字就是紅色的了。

4.將圓點(diǎn)去掉，li{?list-style:none}；然后將那個(gè)點(diǎn)做成圖片，然后嵌入li中。：li style="color:#ff0000; font-size:12pximg src="圖片地址"list1/li。

1、如何用CSS設(shè)置ul，使其在div中l(wèi)i靠左對(duì)齊？ul有默認(rèn)的左邊距。2、和設(shè)置ul的標(biāo)簽樣式的大小

1、在ul樣式中設(shè)置文本居左對(duì)齊。

ul {

padding:0;

margin:0;

text-align:?left;

list-style-type:?none;

}

2、標(biāo)簽大小不同，可以用自定義的背景圖片代替標(biāo)簽樣式。

ul li

{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

擴(kuò)展資料：

控制ul下具體的li:

1、ul li:first-child{ }

第一個(gè)li

2、ul li:last-child{ }

最后一個(gè)li

3、ul li:nth-child(4){ }

指定第幾個(gè),4就是代表第四個(gè)li

4、ul li:nth-child(2n+1){background:red;}

匹配第1、第3、第5、…個(gè)li

5、ul li:nth-child(odd){background:red;}

奇數(shù)的li

6、ul li:nth-child(even){background:red;}

偶數(shù)的li

使用ul標(biāo)簽和css制作導(dǎo)航條

直接上個(gè)實(shí)例吧：

第一步，打開軟件Adobe Dreamweave CS6，創(chuàng)建一個(gè)新的HTML。

第二步，在工作區(qū)域（body）用標(biāo)簽 ul 和 li 輸入導(dǎo)航的內(nèi)容。

第三，編輯樣式CSS。在標(biāo)簽head/head之間寫入樣式表。，

第四，緊接上一步。由于無(wú)線序列具有默認(rèn)樣式，前面的圓點(diǎn)（），所以先寫去除默認(rèn)樣式的樣式。樣式為：ul,li { list-style:none; list-style-type:none; padding:0; margin:0;} /*清除ul,li的默認(rèn)樣式*/

第五，由于默認(rèn)的無(wú)序列表是豎排的，所以需要為其添加浮動(dòng)，同時(shí)編輯寬度和距離等樣式。添加樣式為：? ul li { float:left; width:80px; height:30px; background:#900; line-height:30px; text-align:center; margin-right:2px; color:#fff;} 效果，

第六，如果需要為導(dǎo)航添加鏈接（），同時(shí)獲得鼠標(biāo)滑過效果，即需要對(duì) "a"為標(biāo)簽編寫樣式。樣式為：?? ul li a { display:block; height:30px; text-decoration:none; color:#fff;} ul li a:hover { background:#999;}

最終預(yù)覽效果。

完整代碼：

htmlhead

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/

title無(wú)標(biāo)題文檔/title

style??ul,li?{?list-style:none;?list-style-type:none;?padding:0;?margin:0;}?/*清除ul,li的默認(rèn)樣式*/??

ul?li?{?float:left;width:100px;?height:30px;?background:#900;?line-height:30px;?text-align:center;?margin-right:2px;?}??

ul?li?a?{?display:block;?height:30px;?text-decoration:none;?color:#fff;}??ul?li?a:hover?{?background:#999;}

/style/head

body??ul???????

lia?href="#"導(dǎo)航一/a/li????lia?href="#"導(dǎo)航二/a/li????lia?href="#"導(dǎo)航三/a/li????lia?href="#"導(dǎo)航四/a/li????lia?href="#"導(dǎo)航五/a/li????/ul/body/html

css樣式怎樣設(shè)置 標(biāo)簽中l(wèi)i內(nèi)容居中左對(duì)齊？

居中:text-align:center;( 而默認(rèn)就是左對(duì)齊的)，

再設(shè)置：text-align:left;

代碼如下：

.box｛text-align:center；text-align:left｝

ul class=“box”

li內(nèi)容1/li

li內(nèi)容2/li

li內(nèi)容3/li

/ul

css控制ul標(biāo)簽下li樣式

在ul標(biāo)簽下li的默認(rèn)樣式為一個(gè)實(shí)心圓（disc）? ?可忽略不寫

li樣式的改變是用 list-style:屬性值 來(lái)改變的

我們給li設(shè)置css，去除默認(rèn)樣式（實(shí)心圓）

將li的樣式設(shè)置為空心圓

將li的樣式設(shè)置為實(shí)心正方形

其他：

decimal ? : ?　CSS1　阿拉伯?dāng)?shù)字

lower-roman ? :? 　CSS1　小寫羅馬數(shù)字 ?

upper-roman ? :? 　CSS1　大寫羅馬數(shù)字 ?

lower-alpha ? :? 　CSS1　小寫英文字母 ?

upper-alpha ? :? 　CSS1　大寫英文字母??

armenian ? : ?　CSS2　傳統(tǒng)的亞美尼亞數(shù)字 ?

cjk-ideographic ? :? 　CSS2　淺白的表意數(shù)字 ?

georgian ? : ?　CSS2　傳統(tǒng)的喬治數(shù)字 ?

lower-greek ? :? 　CSS2　基本的希臘小寫字母?

hebrew ? : ?　CSS2　傳統(tǒng)的希伯萊數(shù)字 ?

hiragana ? : ?　CSS2　日文平假名字符 ?

hiragana-iroha ? :? 　CSS2　日文平假名序號(hào) ?

katakana ? : ?　CSS2　日文片假名字符 ?

katakana-iroha ? :? 　CSS2　日文片假名序號(hào) ?

lower-latin ? :? 　CSS2　小寫拉丁字母 ?

upper-latin ? :?　CSS2　大寫拉丁字母?

文章標(biāo)題：cssul樣式,cssal
網(wǎng)頁(yè)鏈接：http://chinadenli.net/article36/dseeipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、自適應(yīng)網(wǎng)站、微信小程序、定制開發(fā)、小程序開發(fā)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)