Heim > Web-Frontend > HTML-Tutorial > 求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose

求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:20:54
Original
1136 Leute haben es durchsucht



图片为效果图,缩略图和大图片位图片位置,要求使用div+css,个人前台不好,呜呜!


多谢帮助。


回复讨论(解决方案)

你就直接用table实现把

另外就因为不好 所以更要自己动手

中间那个缩略图那块不知道怎么实现,难道用控件吗

如果网速没问题,服务器压力也不大的话,缩略图很简单直接设求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose,它就会自动放大缩小 

缩略图可以叫后台生成,要么就用jquery的 autoIMG插件生成缩略图

中间那块很容易实现啊

 <style type="text/css">        div {            height:200px;            overflow-y:scroll;            outline:1px solid #ccc;        }        ul {            list-style-type:none;            padding-left:0;        }        li img {            vertical-align:middle;        }    </style>
Nach dem Login kopieren


 <div>       <ul>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>           <li>               <label><input type="checkbox" />序号</label> <img  src="http://img1.cache.netease.com/cnews/2013/5/6/201305061059507553b.png" / alt="求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose" >           </li>       </ul>   </div>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage