css設(shè)置下拉列表(select)樣式首先我們需要獲取到這個(gè)元素的id或者是class,然后在通過給這個(gè)元素設(shè)置它的width和height等等一些樣式,具體的看代碼:
創(chuàng)新互聯(lián)專注于廣漢企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。廣漢網(wǎng)站建設(shè)公司,為廣漢等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
html
head
style
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}
.div select option{
width:150px;
height:30px;
}
/head
body
div class='div1'
select
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
/div
/body
/html
系統(tǒng)默認(rèn)對(duì)連接文字為蘭色,而且有下劃線。
你在Dramweaver中打開文件,添加一個(gè)CSS樣式:打開CSS樣式面板有個(gè)添加按鈕,也可以右鍵新建CSS樣式,在彈出的窗口中單選框選擇第三個(gè),在下拉框中選擇樣式,分別對(duì):link :visited :hover :active設(shè)定。
我初步做了個(gè),你把下面的放入head標(biāo)簽中,看效果,當(dāng)然里面顏色都是可以改變的。
style type="text/css"
!--
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #CC00FF;
text-decoration: none;
}
a:active {
color: #0000FF;
text-decoration: none;
}
--
/style
CSS改變流動(dòng)條的樣式,代碼如下:
scrollbar-face-color:#FEFAF1;?(立體滾動(dòng)條凸出部分的顏色)?
scrollbar-highlight-color:#FEFAF1;?(滾動(dòng)條空白部分的顏色)?
scrollbar-shadow-color:#FEFAF1;?(立體滾動(dòng)條陰影的顏色)?
scrollbar-arrow-color:#E6C3B9;(上下按鈕上三角箭頭的顏色)?
scrollbar-base-color:#FEFAF1;?(滾動(dòng)條的基本顏色)?
scrollbar-darkshadow-color:#E6C3B9;?(立體滾動(dòng)條強(qiáng)陰影的顏色)?
scrollbar-3dlight-color:#E6C3B9;(滾動(dòng)條亮邊的顏色)?
scrollbar-track-color:#FEFAF1;}?(滾動(dòng)條的背景顏色)
CSS(層疊樣式表)級(jí)聯(lián)樣式表是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。
純CSS的下拉菜單,此處理解的意思就是li標(biāo)簽套li標(biāo)簽,然后再給li標(biāo)簽設(shè)置樣式。在被套的li標(biāo)簽設(shè)置平時(shí)狀態(tài)為隱藏,再等鼠標(biāo)移動(dòng)到上一個(gè)li標(biāo)簽時(shí),將被套的li標(biāo)簽顯示(樣式:overflow:hidden; )。
貼一段網(wǎng)上摘的純CSS下拉菜單(二級(jí))
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title利用float制作兼容ie6純css下來菜單/title
style type="text/css"
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
/style
/head
body
dl class="nav"
dda href=""首頁/a/dd
dd
a href=""關(guān)于我們/a
ul
lia href=""公司簡介/a/li
lia href=""公司文化/a/li
lia href=""企業(yè)榮譽(yù)/a/li
lia href=""聯(lián)系我們/a/li
/ul
/dd
dd
a href=""新聞動(dòng)態(tài)/a
ul
lia href=""國內(nèi)新聞/a/li
lia href=""國外新聞/a/li
/ul
/dd
dd
a href=""產(chǎn)品展示/a
ul
lia href=""111/a/li
lia href=""222/a/li
/ul
/dd
/dl
/body
/html
例一:
<select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
<o(jì)ption value="2" selected>yesky.com</option>
<o(jì)ption value="1">redidea.net</option>
</select>
查一下手冊(cè),還有好多項(xiàng)可以設(shè)置.
例二:
html
head
style
.box
{
border: 1px solid #C0C0C0;
width: 182px;
height: 20px;
clip: rect( 0px, 181px, 20px, 0px );
overflow: hidden;
}
.box2
{
border: 1px solid #F4F4F4;
width: 180px;
height: 18px;
clip: rect( 0px, 179px, 18px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width: 183px;
line-height: 14px; color: #909993;
border-style: none;
border-width: 0px;
}
/style
/head
body
div class = boxdiv class = box2
select size = "1" name = "D1"
option內(nèi)容一/option
option內(nèi)容二/option
/select
/div/div
/body
/html