CSS+DIV20个经典实例（上）资源-CSDN文库

共259个文件

gif：188个

jpg：26个

css：21个

CSS+DIV

20个经典实例（上）

5星 · 超过95%的资源需积分: 11 151 浏览量 2008-11-01 03:03:32 上传评论收藏 1.72MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS+DIV 20个经典实例（上）（259个子文件）

style.css 17KB

style.css 8KB

main.css 8KB

style.css 6KB

styleshome.css 5KB

bangalore.css 5KB

style.css 5KB

style.css 4KB

style.css 3KB

style.css 2KB

print.css 1KB

sub.css 605B

Thumbs.db 230KB

Thumbs.db 10KB

package.gif 11KB

logo.gif 11KB

bigimage.gif 9KB

ad.gif 8KB

pic.gif 8KB

ads2.gif 8KB

banner.gif 8KB

bigbox.gif 8KB

ads1.gif 7KB

bg.gif 6KB

lbhover.gif 5KB

question.gif 5KB

searchbg.gif 5KB

exclamation.gif 4KB

food.gif 4KB

armyswatteam.gif 4KB

logo.gif 3KB

notes.gif 3KB

snews.gif 3KB

questionmark.gif 3KB

pcfaqknowlz.gif 3KB

lijevo.gif 3KB

searchbg.gif 3KB

image.gif 2KB

pearl.gif 2KB

nav.gif 2KB

content_bot_bg.gif 2KB

box.gif 2KB

bigimage.gif 1KB

barcurrent.gif 1KB

logo.gif 1KB

question.gif 1KB

lb.gif 1KB

image.gif 1KB

smallbox.gif 1KB

img.gif 1KB

content_bg.gif 1KB

news.gif 1KB

feed.gif 1KB

header.gif 1KB

link.gif 1KB

subscribe.gif 1KB

black_pearl.gif 1KB

ads.gif 1KB

pink_pearl.gif 1KB

news.gif 1KB

email.gif 1KB

home.gif 1KB

image.gif 1023B

to_content.gif 1010B

to_nav.gif 1004B

image.gif 997B

arrow.gif 989B

barbg.gif 982B

thumbhold.gif 939B

nav_supp_top_bg.gif 925B

arrow_right.gif 922B

quote.gif 915B

footerbg.gif 904B

bar.gif 897B

hdbullet.gif 854B

image.gif 843B

arrow.gif 823B

more.gif 823B

go.gif 809B

baractive.gif 800B

button.gif 792B

big_top.gif 771B

big_bottom.gif 771B

input.gif 734B

leftbox_top.gif 697B

barbg.gif 680B

input.gif 668B

h2-bg.gif 654B

gbox.gif 622B

共 259 条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Your description goes here" /> <meta name="keywords" content="your,keywords,goes,here" /> <meta name="author" content="Your Name / Original design: Gerhard Erbes - gw@actamail.com/" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <title>Go Flexible</title> </head> <body> <div id="wrap">   <div id="header-section"> <a href="#"><img id="header-background-left" src="./img/img_logo.jpg" alt=""/></a> <img id="header-background-right" src="./img/img_header.jpg" alt=""/> </div>  <div id="header"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu Link 1</a></li> <li><a href="#">Menu Link 2</a></li> <li class="selected">Menu Link 3</li> <li><a href="#">Menu Link 4</a></li> <li><a href="#">Menu Link 5</a></li> </ul> </div>   <div id="left-column"> <ul> <li class="left-navheader-first">Menu 3</li> <li><a class="left-navheader" href="#">Menu link 3-1</a></li> <li><a href="#">Menu Link 3-1-1</a></li> <li><a href="#">Menu Link 3-1-2</a></li> <li><a href="#">Menu Link 3-1-3</a></li> <li><a class="left-navheader" href="#">Menu Link 3-2</a></li> <li><a href="#">Menu Link 3-2-1</a></li> <li><a href="#">Menu Link 3-2-2</a></li> <li><a href="#">Menu Link 3-2-3</a></li> <li><a class="left-navheader" href="#">Menu Link 3-3</a></li> <li><a href="#">Menu Link 3-3-1</a></li> <li class="selected">Menu Link 3-3-2</li> <li><a href="#">Menu Link 3-3-3</a></li> <li><a class="left-navheader" href="#">Menu Link 3-4</a></li> <li><a href="#">Menu Link 3-4-1</a></li> <li><a href="#">Menu Link 3-4-2</a></li> <li><a href="#">Menu Link 3-4-3</a></li> </ul> </div>  <div id="right-column">  <div class="right-column-box-white"> <div class="right-column-box-title-grey">Color options</div> <p>All boxes in the middle and right columns can vary colors for titles and backgrounds. See examples below. The colors for titles and backgrounds can be chosen independently.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-grey">Grey title</div> <p>White background.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-blue">Blue title</div> <p>White background.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-yellow">Yellow title</div> <p>White background.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-green">Green title</div> <p>White background.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-red">Red title</div> <p>White background.</p> </div>  <div class="right-column-box-blue"> <div class="right-column-box-title-blue">Blue title</div> <p>Blue background.</p> </div>  <div class="right-column-box-yellow"> <div class="right-column-box-title-yellow">Yellow title</div> <p>Yellow background.</p> </div>  <div class="right-column-box-green"> <div class="right-column-box-title-green">Green title</div> <p>Green background.</p> </div>  <div class="right-column-box-red"> <div class="right-column-box-title-red">Red title</div> <p>Red background.</p> </div>  <div class="right-column-box-white"> <div class="right-column-box-title-grey">Grey title</div> <p>Use this column for news, events, button links, further links, or whatever you want.</p> <p>Additional links:</p> <p><a href="#">Link A</a></p> <p><a href="#">Link B</a></p> <p><a href="#">Link C</a></p> </div> </div>  <div id="middle-column">  <div class="middle-column-box-white"> <div class="middle-column-box-title-grey">Grey title</div> <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="100" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis.</p> <p><a href="#">Read more</a></p> </div>  <div class="middle-column-left">  <div class="middle-column-box-left-white"> <div class="middle-column-box-title-grey">Grey title</div> <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p> <p><a href="#">Read more</a></p> </div>  <div class="middle-column-box-left-white"> <div class="middle-column-box-title-grey">Grey title</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p> <p><a href="#">Read more</a></p> </div> </div>  <div class="middle-column-right">  <div class="middle-column-box-right-white"> <div class="middle-column-box-title-grey">Grey title</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p> </div>  <div class="middle-column-box-right-white"> <div class="middle-column-box-title-grey">Grey title</div> <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis</p> </div> </div>  <div class="middle-column-box-white"> <div class="middle-column-box-title-grey">Grey title</div> <p class="subheading">Basic layout</p> <p>The basic concept consiss of a three-column layout combined with individual boxes in the middle and right columns. The layout is flexible in two ways. Firstly, the strong menu-capabilities at the top header and left column are comphrehensive and can navigat

评论收藏

内容反馈