微博系统配图设计方案精讲.pdfVIP

第41章系统--配图上传[中]

学习要点：

1.配图布局

2.上传缩略图

3.JS控制

讲师：恢本课北风网和城e乐部

本节课，我们主要讲解一下上传配图的设计方案。

.配图布局

//HTML上传

divclass=weibo_pic_list/div

inputtype=filename=fileid=file

___

//CSS部分#main.mainleft.weibopicbox

{min‑width:350px;max‑width:460px;}#

___

main.mainleft.weibopiclist

{padding:15px10px10px10px;}

___

#main.mainleft.weibopiccontent{宽

度:100px;height:100px;float:left;

border:1pxsolid#eee;margin:‑5px4px15px

4px;overflow:hidden;position:relative;}

___

#main.mainleft.weibopiccontentimg

{position:absolute;top:0;left:0;z‑index:1;

_

cursor:pointer;}#main.mainleft#file{

第章

41系统--配图上传[中]

学习要点：

1.配图布局

2.上传缩略图

3.JS控制

讲：恢

本课北风网和城e乐部

本节课，我们主要讲解一下上传配图的设计方案。

．配图布局

//HTML上传

divclass=weibo_pic_list/div

inputtype=filename=fileid=file

//CSS部分

#main.main_left.weibo_pic_box

{min-width:350px;

max-width:460px;

}

#main.main_left.weibo_pic_list

{padding:15px10px10px10px;

}

#main.main_left.weibo_pic_content

{width:100px;

height:100px;

float:left;

border:1pxsolid#eee;

margin:-5px4px15px4px;

overflow:hidden;

position:relative;

}

#main.main_left.weibo_pic_contentimg

{position:absolute;

top:0;

left:0;

z-index:1;