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. activity的android:name所指的Activity实现类的简写问题

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package=" ...

  2. Linux进程同步之POSIX信号量

    POSIX信号量是属于POSIX标准系统接口定义的实时扩展部分.在SUS(Single UNIX Specification)单一规范中,定义的XSI IPC中也同样定义了人们通常称为System V ...

  3. 基于数据库的自动化生成工具，自动生成JavaBean、自动生成数据库文档等(v4.1.2版)

            目录:            第1版:http://blog.csdn.net/vipbooks/article/details/51912143            第2版:htt ...

  4. Python中的eval()、exec()及其相关函数

    刚好前些天有人提到eval()与exec()这两个函数,所以就翻了下Python的文档.这里就来简单说一下这两个函数以及与它们相关的几个函数,如globals().locals()和compile() ...

  5. 日志快速筛选 之 linux命令grep|uniq|wc|awk

    以前我个人的观念是,在线上运行的东西尽量不要记什么流水日志. 但是后来我变了,发现在线上记日志是一个绝对有必要的东西,尤其是在当下很流行的微服务的推动下,没有日志的帮助,犹如一个睁眼瞎,排查问题基本靠 ...

  6. NG2入门 - 根模块

    根模块 app.module 建议大家先去学习angularjs官网的英雄教程后再进行后面的阅读,app.module.ts 就是ng2应用中的引导启动模块也称根模块 import { NgModul ...

  7. Eclipse连接MySQL出现Server time zone is unrecognized错误

    错误代码: The server time zone value '?й???????' is unrecognized or represents more than one time zone. ...

  8. Python datetime模块的datetime类

    datetime模块定义了下面这几个类: datetime.date:表示日期的类.常用的属性有year, month, day. datetime.time:表示时间的类.常用的属性有hour, m ...

  9. socket select()模型

    转载:http://www.cnblogs.com/xiangshancuizhu/archive/2012/10/05/2711882.html 由于socket recv()方法是阻塞式的,当有多 ...

  10. oracle_index的建立、修改、删除

    索引索引是关系数据库中用于存放每一条记录的一种对象,主要目的是加快数据的读取速度和完整性检查.建立索引是一项技术性要求高的工作.一般在数据库设计阶段的与数据库结构一道考虑.应用系统的性能直接与索引的合 ...