效果图
清除默认样式
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input,select, textarea, /* form elements 表单元素 */ th, td /* table elements 表格元素 */ { margin: 0; padding: 0;} /** 重置列表元素 **/ ul, ol { list-style: none; } /** 重置文本格式元素 **/ a { text-decoration: none; } a:hover { text-decoration: underline; } /** 设置默认字体 **/ body,button, input, select, textarea /* for ie */ { font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;} h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /** 重置表单元素 **/ legend { color: #000; }/* for ie6 */ fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注:optgroup 无法扶正 */ /** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虾米</title>
<link rel="stylesheet" href="clear defult sytle.css">
<style>
.box{
height: 285px;
width: 659px;
/*border: 1px solid violet;*/
margin: 30px auto;
}
header{
border-bottom: 1px solid #c7c7c7 ;
}
header p{
font: 15px/31px 楷体;
color: black;
}
.head-tit{
float: left;
padding-top: 12px;
padding-left: 7px;
}
.head-R{
float: right;
color: #7e7e7e;
padding-top: 12px;
padding-right: 25px;
}
.phase>li{
border-bottom:1px solid #c7c7c7 ;
padding: 10px 15px 10px 7px;
}
.pic{
float: left;
padding-right: 10px;
}
.auth{
float: left;
}
.auth li{
font: 12px/24px 楷体;
}
.clear:after{content:"";display:block;clear:both;}
</style>
</head>
<body>
<div class="box">
<header class="clear">
<p class="head-tit">最新原创精选集</p>
<a href="#" class="head-R">更多</a>
</header>
<ul class="phase">
<li class=" clear">
<a href="#" class="pic">
<img src="05.png" alt="05">
</a>
<ul class="auth">
<li><a href="#" style="font: 15px/23px 楷体">形SHAPE状</a>(13)</li>
<li>制作人:<a href="#">柔清梦</a> @2012-11-02</li>
<li>幸福的形状,爱情的形状,感情的形状都是什么形状?圆形?三角形?四边形?</li>
</ul>
</li>
<li class=" clear">
<a href="#" class="pic">
<img src="05.png" alt="05">
</a>
<ul class="auth">
<li><a href="#" style="font: 15px/23px 楷体">形SHAPE状</a>(13)</li>
<li>制作人:<a href="#">柔清梦</a> @2012-11-02</li>
<li>幸福的形状,爱情的形状,感情的形状都是什么形状?圆形?三角形?四边形?</li>
</ul>
</li>
</ul>
</div>
</body>
</html>