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="css/style.css">
</head>
<body>
<div class="article">
<article>
<img src="data:images/article01.png"/>
<h2><a href="blog.html">Lorem ipsum dolor amet consectetur adipiscing elit</a></h2>
<span class="info">By Admin on December 01, 2012 with <a href="#">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="data:images/article02.png"/>
<h2><a href="blog.html">Sed accumsan libero quis mi commodo et suscipit</a></h2>
<span class="info">By Admin on December 01, 2012 with <a href="#">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="data:images/themeforest.jpg">
<img src="data:images/zerotheme.jpg">
</div>
</div>
<div id="box">
<div class="heading">
<p>Photos</p>
</div>
<div class="content">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data:images/photo01.png">
<img src="data: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的更多相关文章

  1. 15款HTML5/CSS3案例展示，导航，日历，钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  2. 12款界面精美的 HTML5 & CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  3. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  4. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  5. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  6. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  7. 12款高质量的响应式 HTML5/CSS3 网站模板

    HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...

  8. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  9. 6最好的之一 HTML5/CSS3 演示（PPT）框架

    HTML 是全世界最流行的网页编程语言.而HTML5是这门语言的升级版本号.越来越多的开发人员和设计师開始使用HTML5.以下介绍几个 HTML5/CSS3 的演示工具和框架,你能够用它们来创建你的网 ...

随机推荐

  1. [置顶] 使用严苛模式打破Android4.0以上平台应用中UI主线程的“独断专行”

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 已经有好一段时间没有关注Android应用方面的事情了:)最近单位来了一个Androi ...

  2. oracle与sqlserver区别

    sqlserver只能在windows平台上运行,与windows兼容性较高 oracle可能在windows和linux上运行 sqlserver的安全性不是很高 oracle安全性能获得了最高级别 ...

  3. Hadoop YARN介绍

    YARN产生背景 MRv1的局限 YARN是在MRv1基础上演化而来的,它克服了MRv1中的各种局限性.在正式介绍YARN之前,先了解下MRv1的一些局限性,主要有以下几个方面: 扩展性差.在MRv1 ...

  4. .NET 同步与异步之锁（Lock、Monitor）（七）

    本随笔续接:.NET同步与异步之相关背景知识(六) 在上一篇随笔中已经提到.解决竞争条件的典型方式就是加锁 ,那本篇随笔就重点来说一说.NET提供的最常用的锁 lock关键字 和 Monitor. 一 ...

  5. ruby web性能响应时间

    可以统计单个web页面加载时间. require 'watir-webdriver' require 'watir-webdriver-performance' b = Watir::Browser. ...

  6. iOS开发-OC语言 (二)类的设计

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...

  7. linux面试题集锦《转》

    1. 下面的网络协议中,面向连接的的协议是: A . A 传输控制协议 B 用户数据报协议 C 网际协议 D 网际控制报文协议 2. 在/etc/fstab文件中指定的文件系统加载参数中, D 参数一 ...

  8. IOS数据库操作SQLite3使用详解(转)

    iPhone中支持通过sqlite3来访问iPhone本地的数据库.具体使用方法如下1:添加开发包libsqlite3.0.dylib首先是设置项目文件,在项目中添加iPhone版的sqlite3的数 ...

  9. java读写锁源码分析(ReentrantReadWriteLock)

    读锁的调用,最终委派给其内部类 Sync extends AbstractQueuedSynchronizer /** * 获取读锁,如果写锁不是由其他线程持有,则获取并立即返回: * 如果写锁被其他 ...

  10. mac相关

    1 mac的动态链接库 mac基于bsd,所以它使用的是bsd风格的动态链接库,即以.dylib为后缀的动态链接库. 这个和windows的.dll和linux的.so相区分.