怎樣用css使背景有立體感

教你如何制作具有立體感效果的

我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、寧強(qiáng)ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的寧強(qiáng)網(wǎng)站制作公司

我們?cè)敿?xì)的解釋與說(shuō)明CSS代碼，看它是如何控制這個(gè)UL LI打造CSS橫向菜單的：

* {

font-size:12px;

text-align:center;

}

#nav {

width:520px;

border-bottom:1px solid #06f;

margin:20px auto 0 auto;

}

#nav li {

display: inline;

list-style-type: none;

}

#nav li a:link,#nav li a:visited {

float:left;

margin-right:5px;

padding:5px 10px 5px 8px;

text-decoration: none;

color:#000;

background:#ffe67d;

border-left: 5px solid #fc0;

}

#nav li a:hover {

color:#060;

border-left: 5px solid #f60;

}

首先我們進(jìn)行了整體布局聲明，聲明了文字大小及居中的對(duì)齊方式。需要說(shuō)明的是，在ff中，我們?cè)O(shè)置margin:0 auto。即可實(shí)現(xiàn)容器的居中了，但在IE中，這還不夠，還需要在父容器中聲明text-align:center。這一點(diǎn)我們要記得，不然容易出錯(cuò)。

聲明UL無(wú)序列表的寬度為520ox，下邊框一象素的實(shí)現(xiàn)，顏色為#06f。我們?cè)O(shè)置了nav這個(gè)UL，距離頂部為20px、距離底部為零，左右的距離為auto。這就實(shí)現(xiàn)了nav在水平方向內(nèi)是居中的，垂直方面上距離瀏覽器窗口20px。

聲明LI列表項(xiàng)為內(nèi)聯(lián)（行內(nèi)）顯示，列表預(yù)設(shè)標(biāo)記為無(wú)。

我們重點(diǎn)需要理解#nav li a:link,#nav li a:visited的定義，設(shè)置鏈接的樣式。

向左浮動(dòng)，并且右邊距為5px。這是設(shè)置鏈接元素從左向右排行，并且元素之間的右部間隔5px。

設(shè)置填充，頂5px、右10px、下5px、左8px。這一設(shè)置可以使我們的鏈接文字處于合適的位置。

取消鏈接文字的下劃線，并設(shè)置鏈接文字的顏色為#000。鏈接元素的背景色為#ffe67d。

左邊框五象素的實(shí)線，顏色為#fc0。這一句話形成了我們的小豎條。

我們通過(guò)下面#nav li a:hover形成鼠標(biāo)激活的樣式。

鏈接文字的顏色變?yōu)?060。左邊框五象素的實(shí)線，顏色為#f60。

這樣我們會(huì)動(dòng)的小豎條菜單就制作完成了?？醋罱K的代碼：

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

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title免費(fèi)模板/title

style type="text/css"

* { font-size:12px; text-align:center;}#nav { width:520px; border-bottom:1px solid #06f; margin:20px auto 0 auto;}#nav li { display: inline; list-style-type: none;}#nav li a:link,#nav li a:visited { float:left; margin-right:5px; padding:5px 10px 5px 8px; text-decoration: none; color:#000; background:#ffe67d; border-left: 5px solid #fc0;}#nav li a:hover { color:#060; border-left: 5px solid #f60;}

/style

/head

body

ul id="nav"

lia href="#"圖象設(shè)計(jì)/a/li

lia href="#"網(wǎng)站運(yùn)營(yíng)/a/li

lia href="#"網(wǎng)絡(luò)編程/a/li

lia href="#"創(chuàng)業(yè)指南/a/li

lia href="#"網(wǎng)站欣賞/a/li

/ul

/body

/html

如何制作一個(gè)漂亮的 css 按鈕

啟動(dòng)dreamweaver，點(diǎn)擊“站點(diǎn)”---“新建站點(diǎn)”

2

在彈出的窗口中，站點(diǎn)名稱為“漂亮按鈕”，本地站點(diǎn)文件夾可以根據(jù)需要選擇。點(diǎn)擊“保存”按鈕，站點(diǎn)創(chuàng)建成功。

END

二、創(chuàng)建css文件

1

點(diǎn)擊“文件”----“新建”，在彈出的窗體中選擇“空白頁(yè)”-----“CSS”，然后點(diǎn)擊“創(chuàng)建”按鈕。

2

點(diǎn)擊“文件”----“保存”，在文件名中輸入“style”，然后點(diǎn)擊“保存”，樣式表文件創(chuàng)建成功。

END

三、創(chuàng)建html頁(yè)面

1

點(diǎn)擊“文件”----“新建”，在彈出的窗體中選擇“空白頁(yè)”-----“HTML”---“無(wú)”。

2

在附加CSS文件中，選擇style.css樣式表文件，點(diǎn)擊“確定”。

3

點(diǎn)擊“創(chuàng)建”按鈕，生成HTML文件。點(diǎn)擊“文件”----“保存”按鈕，文件名設(shè)置為“index”，最后點(diǎn)擊保存即可。

END

三、在html頁(yè)面中添加一個(gè)按鈕控件

1

在“插入”-----“表單”中，點(diǎn)擊“按鈕”

2

在彈出的對(duì)話框中，什么也不需要修改，直接點(diǎn)擊“確定”。

3

在彈出窗口中，選擇“是“

4

按鈕添加成功，效果如下。

END

四、新建CSS規(guī)則

1

在CSS樣式表中，選擇“新建CSS規(guī)則“

2

在彈出的窗口中選擇”類（可應(yīng)用于任何HTML元素）“，選擇器名稱設(shè)置為“btnstyle”，然后點(diǎn)擊“確定”。

3

然后，在找到按鈕控件，將它的類設(shè)置為”btnstyle”

END

五、用CSS規(guī)則修改按鈕控件的外觀

1

.btnstyle {

width: 86px;/*按鈕控件的寬度*/

text-align: center;/*按鈕控件中文本居中顯示*/

line-height: 100%;/*用百分比設(shè)置行高*/

padding-top: 0.5em;/*文本頂部的內(nèi)邊距*/

padding-right: 2em;/*文本右側(cè)的內(nèi)邊距*/

padding-bottom: 0.55em;/*文本底部的內(nèi)邊距*/

padding-left: 2em;/*文本左側(cè)的內(nèi)邊距*/

font-family: "Arial Black", Gadget, sans-serif;/*字體*/

font-size: 14px;/*字體大小*/

font-style: normal;/*字體樣式*/

font-variant: normal;/*小寫字母*/

font-weight: normal;/*文本不需要加粗*/

text-decoration: none;/*文本不需要下劃線等*/

margin-top: 0px;/*外邊框的距離*/

margin-right: 2px;/*外邊框的距離*/

margin-bottom: 0px;/*外邊框的距離*/

margin-left: 2px;/*外邊框的距離*/

vertical-align: text-bottom;/*圖像放在文本下面*/

display: inline-block;/*段落內(nèi)生出內(nèi)框*/

cursor: pointer;/*鼠標(biāo)的形狀*/

zoom:1;

outline-width:medium;/*整個(gè)輪廓的寬度*/

outline-color:inherit;/*輪廓的顏色*/

font-size-adjust:none;

font-stretch:normal;

border-top-left-radius:0.5em;/*圓角邊框弧度*/

border-top-right-radius:0.5em;/*圓角邊框弧度*/

border-bottom-left-radius:0.5em;/*圓角邊框弧度*/

border-bottom-right-radius:0.5em;/*圓角邊框弧度*/

box-shadow:0px 1px 2px rgba(0,0,0,0.2);/*給按鈕增加陰影*/

color:#fefee9;/*設(shè)置文本的顏色*/

border-top-color:#da7c0c;/*邊框的顏色*/

border-right-color:#da7c0c;/*邊框的顏色*/

border-bottom-color:#da7c0c;/*邊框的顏色*/

border-left-color:#da7c0c;/*邊框的顏色*/

border-top-width:1px;/*邊框的粗細(xì)*/

border-right-width:1px;/*邊框的粗細(xì)*/

border-bottom-width:1px;/*邊框的粗細(xì)*/

border-left-width:1px;/*邊框的粗細(xì)*/

border-top-style:solid;/*邊框的樣式*/

border-right-style:solid;/*邊框的樣式*/

border-bottom-style:solid;/*邊框的樣式*/

border-left-style:solid;/*邊框的樣式*/

background-image:none;/*背景圖片*/

background-attachment:scroll;/*背景圖片是否移動(dòng)*/

background-repeat:repeat;/*允許重復(fù)*/

background-position-x:0%;/*背景的x軸坐標(biāo)*/

background-position-y:0%;/*背景的y軸坐標(biāo)*/

background-size:auto;/*背景圖片的尺寸*/

background-origin:padding-box;/*背景圖像相對(duì)于內(nèi)邊距框來(lái)定位*/

background-clip:padding-box;/*背景被裁剪到內(nèi)邊距框*/

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

}更多學(xué)習(xí)5 1 r g b

2

再寫一句mybtn的hover樣式。代碼如下：

.btnstyle:hover {

background-color: #f47c20;

}

css好看的字體樣式

style type="text/css"

.aa{ width:200px; height:44px; border:0; background-image:url(img1.png); }

.aa:active{ background-image:url(img2.png);}

/style

input type="button" class="aa" value=""/

IE6需要另外插一張類庫(kù)

css怎么才能寫出好看的樣式

首先你要非常熟悉css樣式的相關(guān)屬性，比如一些特效（過(guò)渡，動(dòng)畫，陰影等），其次就是有比較好的色彩搭配能力，再次就是有個(gè)美觀的設(shè)計(jì)稿

新聞標(biāo)題：好看的css圖片樣式,css圖片格式
標(biāo)題路徑：http://chinadenli.net/article18/dseocgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、微信公眾號(hào)、App開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開(kāi)發(fā)

廣告

聲明：本網(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)