虽然我也接触前端一年之久了，但是无奈从切图布局下来的经验还真是很不足，因为之前比赛或者是做小项目时全部都是自己负责设计，所以都是编写边设计，哎呀，也是醉了；或者是有模板，然后从人家上面扒拉下来的，真的拿一张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:; padding:; 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:;
}
.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缩进掉就好了
如
此处
此处