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. UVa-Where's Waldorf?

    题目地址:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. j2ee面试宝典翻译(3) j2ee job interview companion

    Q9:如何让表达“是一个”和“有一个”关系?或者请解释下“继承”和“组合”.组合和聚合之间有什么区别? A9:“是一个”的关系表示继承而“有一个”的关系是表示组合.继承和组合都允许你将子对象放入新类中 ...

  3. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  4. ICSharpCode.TextEditor如何自定义代码折叠和高亮

    ICSharpCode.TextEditor 是一款非常不错的.NET代码编辑控件,内置了多种高亮语言支持,同时完美支持中文,非常赞!先来看一下运行效果: 1 项目结构 这里需要注意lib文件夹下导入 ...

  5. C++ STD accumulate函数

    1. 介绍 用来计算特定范围内(包括连续的部分和初始值)所有元素的和,除此之外,还可以用指定的二进制操作来计算特定范围内的元素结果.其头文件在numeric中. 用次函数可以求和,构造前n项和的向量, ...

  6. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

  7. 在SQL SERVER中查找用分隔符分隔的数据

    SELECT * FROM [DB_SCJC].[dbo].[tn_Manager] 其中, CHARINDEX({1},{2})中,{1}是要查找的字符,{2}是字典库.返回值为{1}在{2}中的位 ...

  8. 借助OpenOffice实现office转pdf（Java）的.exe小程序

    原料:OpenOffice4.1.2(之所以选OpenOffice是因为可以跨平台,下载后直接安装),jodconverter-core-3.0-beta-4-dist.zip(可以搜博客园),Exe ...

  9. glib实践篇：接口定义与实现

    前言: 在上一篇讲解了基于glib实现抽象和继承后,当然这篇就得讲讲接口类型啦! 在JAVA中接口更多的弥补了其单继承所带来的缺陷,使其能够扩展很多功能,同时又不破坏它的结构.其实接口就是一种协议,在 ...

  10. Linux 中 sudo、su命令

    sudo : 暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码.不过有时间限制,Ubuntu默认为一次时长15分钟.su : 切换到某某用户模式,提 ...