虽然我也接触前端一年之久了，但是无奈从切图布局下来的经验还真是很不足，因为之前比赛或者是做小项目时全部都是自己负责设计，所以都是编写边设计，哎呀，也是醉了；或者是有模板，然后从人家上面扒拉下来的，真的拿一张UI设计稿给我，还真是有点心虚的，所以借最近深入了解jquery的机会，我决定把布局顺带练一练，OK，废话不多说，开工了，一周练习一次，并上图示众，同时欢迎大家一起探讨css布局细节。
第一季 简单的轮播布局 2015.12.1
所有小图片在一张雪碧图上
来贴段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon">卡通动漫</h2> <div class="highlight_tips"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <div class="btn"> <span class="prev"></span> <span class="next"></span> </div> <em><a href="javascript:;">更多>></a></em> </div> <div class="v_content"> <ul class="contentlist"> <li> <img src="img/01.jpg"> <h2 class="title"><a href="javascript:;">海贼王</a></h2> <p class="radio">播放：<span class="count">28,276</span></p> </li> <li> <img src="img/01.jpg"> <h2 class="title"><a href="javascript:;">海贼王</a></h2> <p class="radio">播放：<span class="count">28,276</span></p> </li> <li> <img src="img/01.jpg"> <h2 class="title"><a href="javascript:;">海贼王</a></h2> <p class="radio">播放：<span class="count">28,276</span></p> </li> <li> <img src="img/01.jpg"> <h2 class="title"><a href="javascript:;">海贼王</a></h2> <p class="radio">播放：<span class="count">28,276</span></p> </li> </ul> </div> </div> </body> </html>
* { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#2B93D2; text-decoration:none; } a:hover { color:#E31E1C; text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } /* v_show style */ .v_show{ width:595px; margin: 50px auto; } .v_caption{ height:35px; background: url(img/btn_cartoon.gif) 0 0; } .v_caption h2{ float: left; width:90px; height:35px; background: url(img/btn_cartoon.gif) 0 -100px; text-indent: -9999px; } .highlight_tips{ float: left; width:60px; margin: 14px 0 0 5px; } .highlight_tips span{ display: inline-block; width:7px; background: url(img/btn_cartoon.gif) 0 -320px; text-indent: -999px; } .highlight_tips span.current{ background-position: 0 -220px; } .btn{ float:left; margin-top:5px; } .btn span{ display: inline-block; width:30px; height: 22px; background: url(img/btn_cartoon.gif); } .btn span.prev{ background-position: 0 -400px; } .btn span.next{ background-position: -30px -400px; margin-left:-3px; } .v_caption em{ float: right; line-height: 35px; margin-right: 10px; } .v_content{ width:592px; border:1px solid #ccc; border-top:0; } .contentlist{ overflow: hidden; } .contentlist li{ float:left; margin: 20px 10px 15px 10px; } .contentlist li img{ padding-bottom: 8px; } .contentlist li .title a{ color:#04AEF4; } .contentlist li .title a:hover{ color:#0592CC; text-decoration: none; } .contentlist li .radio{ color:#666; }
第二季 简单电商网站布局 2015-12-14
先贴上大图，还有一小部分未完成，这个本来是我用来练习jquery的例子
遇到的问题：1）、行内标签inline-block之后，之间还是有3px左右的像素间隔，用margin负值就好了
2）、为了页面规范性，标签内会写文字，但为了文字不显示出来，加上text-indent缩进掉就好了
如
此处
此处