网页教案(div布局)

天津渤海职业技术学院教师教案

DIV+CSS布局

二、实例二电子相册

#hphoto {

w idth: 500px;

b ackground: url(framels.jpg) no-repeat left;

h eight: 160px;

}

#vphoto {

w idth: 500px;

b ackground: url(framept.jpg) no-repeat left;

h eight: 160px;

} #hphoto img {

h eight: 90px;

w idth: 135px;

b order: 1px solid #0099FF; m argin-top: 36px;

margin-left: 10px;

}

#vphoto img {

h eight: 135px;

w idth: 90px;

border: 1px solid #0099FF; m argin-top: 10px;

m argin-left: 34px;

}

#hphoto ul,#vphoto ul {

l ist-style: none;

f loat: left;

p adding: 0px;

m argin-top: 8px;

m argin-left: 15px;

f ont-size: 12px;

b order: 1px solid #00CCFF;

b ackground: #CCFFFF;

c olor: #0066FF;

}

#hphoto li,#vphoto li {

b ackground: #CCFFFF;

}

#hphoto .title,#vphoto .title {

b order-bottom: 1px solid #66CCFF;

l ine-height: 1.5;

p adding-left: 10px;

f ont-weight: bold;

}