div id="banner"
創(chuàng)新互聯(lián)建站成立與2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目網(wǎng)站設(shè)計制作、成都網(wǎng)站制作網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元咸豐做網(wǎng)站,已為上家服務(wù),為咸豐各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
p
fdb4e1
/p
/div
CSS中的代碼:
#banner {
width:850px;
height:200px;
border:2px solid #ccc;
background:#CCC;
}
代碼寫錯了,當(dāng)然沒有效果了,border 有三個參數(shù)用來設(shè)置 線寬,樣式,顏色,中間不能有冒號
用CSS給一個對象加兩個邊框是不能做到的,除非你用兩個div,一個用于最外面的黑邊框,一個用于放圖片并設(shè)置白邊框,但我想樓主的所看到的效果是不是網(wǎng)頁背景是白色的,然后一個div里有一張圖片,這個div的邊框是黑色的,而且這個div的內(nèi)邊距是1px,這樣看上去的效果就是在一張圖片上有一黑一白兩個邊框的效果。
整個的外圍大框,是一個外圍容器,通常用border來設(shè)置;
其中的內(nèi)容通常用列表
ul
li1/li
li2/li
/ul來做
就你給的圖來說,通常會做一個外圍容器,其中內(nèi)容會用ul列表;詳細(xì)的css如下
/*外圍容器*/
.bigbox{
float:left;
width:250px;
height:auto;
margin:0;
padding:10px;
border:#e5e5e5 1px solid; /*這里是你問的主要問題,用這句實現(xiàn)*/
}
.bigbox ul li{
list-style:none;
float:left;
width:230px;
height:60px;
}
.bigbox ul li .imgbox{
float:left;
width:60px;
height:45px;
}
.bigbox ul li .imgbox img{
margin:0;
padding:0;
border:none;
}
.bigbox ul li .content{
float:right;
width:110px;
height:45px;
}
css樣式要配合div的頁面布局來使用,對以上的css配合的html div布局如下;
div class="bigbox"
ul
li
div class="imgbox"這里主要是放置圖片內(nèi)容/div
div class="content"這里主要是放置文字內(nèi)容/div
/li
li
div class="imgbox"這里主要是放置圖片內(nèi)容/div
div class="content"這里主要是放置文字內(nèi)容/div
/li
/ul
/div
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/
title無標(biāo)題文檔/title
style
type="text/css"
.tab{
margin:0;
padding:0;
/*合并邊線*/border-collapse:collapse;/*寬高自定*/
width:200px;
height:200px}
.tab
td{
border:solid
1px
#000}
/style
/head
body
table
class="tab"
tr
td
/td
td
/td
/tr
tr
td
/td
td
/td
/tr
tr
td
/td
td
/td
/tr
/table
/body
/html
屬性都寫在CSS里就可以了
border屬性 :在網(wǎng)頁中設(shè)置元素的邊框樣式。可同時設(shè)置邊框?qū)挾?、邊框樣式、邊框顏色。也可以單獨設(shè)置上邊、右邊、下邊、左邊的邊框。
語法:border: border-width | border-style | border-color;
border-width :邊框?qū)挾???梢灾付ㄩL度值。如1px,1em(單位為px,pt,em等)?;蛘呤褂藐P(guān)鍵字medium(默認(rèn)),thick,thin。
?border-top-width:設(shè)置元素上邊框?qū)挾?/p>
?border-right-width:設(shè)置元素右邊框?qū)挾?/p>
?border-bottom-width:設(shè)置元素下邊框?qū)挾?/p>
?border-left-width:設(shè)置元素左邊框?qū)挾?/p>
border-style :邊框樣式。
?border-top-style:設(shè)置元素上邊框樣式
?border-right-style:設(shè)置元素右邊框樣式
?border-bottom-style:設(shè)置元素下邊框樣式
?border-left-style:設(shè)置元素左邊框樣式
?屬性值有:
??none:無邊框。
??hidden:隱藏邊框。對于表,hidden 用于解決邊框沖突。
??dotted:點狀邊框。
??dashed:虛線邊框。
??solid:實線邊框。
??double:雙線邊框。兩條單線與其間隔的和等于指定的border-width值。
??groove:3D凹槽邊框。
??ridge:3D壟狀邊框。
??inset:凹邊框。
??outset:凸邊框。
border-color :邊框顏色。
1.1 邊框各樣式效果圖
1.2 四條邊顏色樣式相同
1.3 四條邊顏色不同,樣式相同
1.4 四條邊顏色相同,樣式不同
1.5 設(shè)置上邊框?qū)挾?、樣式、顏?/p>
1.6 設(shè)置右邊框?qū)挾?、樣式、顏?/p>
1.7 設(shè)置下邊框?qū)挾?、樣式、顏?/p>
1.8 設(shè)置左邊框?qū)挾取邮?、顏?/p>
以上對border邊框?qū)傩赃M行了基礎(chǔ)操作,大家可以根據(jù)自己的經(jīng)驗為邊框制作出更漂亮的樣式。如若大家有什么更好的見解,那就在回復(fù)區(qū)暢所欲言吧,我定會吸取精華~如有寫錯歡迎大家回復(fù),我以后定會更加細(xì)心 _
當(dāng)前題目:css樣式邊線,css 邊框線
地址分享:http://jinyejixie.com/article48/dseddhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、小程序開發(fā)、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計公司、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)