> 웹 프론트엔드 > HTML 튜토리얼 > 求前台div+css高手,帮看下,如何设计这个布局_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:20:54
원래의
1119명이 탐색했습니다.



图片为效果图,缩略图和大图片位图片位置,要求使用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>
로그인 후 복사


 <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>
로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿