首页 > 代码库 > html5+css3 文章的展示demo
html5+css3 文章的展示demo
index.html 页面的样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>little demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
<meta name="author" content="lijiageng">
<meta name="description" content="h5 测试的小demo ">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css">
</head>
<body>
<div class="article">
<article>
<img src="http://www.mamicode.com/images/article01.png"/>
<h2><a href="http://www.mamicode.com/blog.html">Lorem ipsum dolor amet consectetur adipiscing elit</a></h2>
<span class="info">By Admin on December 01, 2012 with <a href="http://www.mamicode.com/#">01 Commnets</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia. Morbi rutrum vulputate est sed faucibus. Nulla sed nisl mauris, id tristique tortor. Sed iaculis dapibus urna nec dictum. Proin non enim odio. [...]</p>
</article>
<article>
<img src="http://www.mamicode.com/images/article02.png"/>
<h2><a href="http://www.mamicode.com/blog.html">Sed accumsan libero quis mi commodo et suscipit</a></h2>
<span class="info">By Admin on December 01, 2012 with <a href="http://www.mamicode.com/#">01 Commnets</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia. Morbi rutrum vulputate est sed faucibus. Nulla sed nisl mauris, id tristique tortor. Sed iaculis dapibus urna nec dictum. Proin non enim odio. [...]</p>
</article>
</div>
<div id="box">
<div class="heading">
<p>Sponsors</p>
</div>
<div class="content">
<img src="http://www.mamicode.com/images/themeforest.jpg">
<img src="http://www.mamicode.com/images/zerotheme.jpg">
</div>
</div>
<div id="box">
<div class="heading">
<p>Photos</p>
</div>
<div class="content">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
<img src="http://www.mamicode.com/images/photo01.png">
</div>
</div>
</body>
</html>
style.css
a{
text-decoration: none;
}
.article{margin-bottom: 20px;}
.article article{width:auto;height:auto;margin-bottom: 20px;border:1px solid #CCC;padding: 8px 10px;overflow:hidden;background: url("../images/bgbox.png") repeat-x;}
.article article img{border:1px solid #CCC;margin-right: 20px;float: left;}
.article article h2{font-weight: bold; font-style: italic;overflow:hidden;}
.article article h2 a{color:#888888;}
.article article span{margin-bottom: 20px;margin-top: 20px;display: block;}
.article article p{font-size: 1em;color: gray;font-family:Serif;}
#box{margin-bottom: 20px;margin-top: 20px;}
#box .heading{padding: 8px 10px;border:1px solid #CCC;background: url("../images/bgheading.png") repeat-x;}
#box .heading p{font-size:22px; font-weight:normal;display:inline;}
#box .content{padding: 20px;border-left:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC; background: url("../images/bgbox.png") repeat-x;}
html5+css3 文章的展示demo