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. Nodejs --我自己的学习笔记

    对于Nodejs,相信客官并不陌生,网上却已众说纷纭,有人说是一个平台,有人说是服务器JavaScript,有人说一个框架… 之前亦有过研究,多怀可远观而不可亵玩也.高效率,I/O操作,异步编程,以及 ...

  2. nodejs,http，get,post,请求

    本文源于实践及其部分网络搜索: 其实大部分,官方都有介绍... 官方参考链接:https://nodejs.org/api/http.html var http = require('http'); ...

  3. sw代码问题

    1.环境版本问题,myeclipse 配 jdk1.7  不能用jdk1.8 :jdk1.6满足不了代码本身 报错为:The type java.io.ObjectInputStream cannot ...

  4. JavaScript的this详解

    1.全局作用域下的this: 2.一般函数与严格模式下的函数的this: 3.当函数的this作为对象的方法的情况下: 4.对象原型链上的this: 对象P的原型指向o, p.a与p.a创建对象p的属 ...

  5. git stash让bug来的更猛烈些吧

    git stash可以用来暂存当前正在进行的工作,比如想pull最新的代码,又不想加新commit, 或者有一个紧急的bug需要修复,但是这个bug又与你已经在做的工作(还没完成)有关联.这个时候有的 ...

  6. Oracle 视图操作

    -- 创建视图create view V_TEST asselect * from T_TEST where rownum <100 select * from V_TEST-- 新建视图用户 ...

  7. volatile（C# 参考）

    本文档已存档,并且将不进行维护. volatile(C# 参考) 若要了解有关 Visual Studio 2017 RC 的最新文档,请参阅 Visual Studio 2017 RC 文档. vo ...

  8. 问题记录1：The VMware Authorization Service is not running.

    问题 VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the pr ...

  9. 从A页面跳转到B页面，从B页面按浏览器自带按钮返回到A页面并且刷新页面--手机操作浏览器自带返回并自带刷新

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. Java中不定参的使用规则

    Java中有时候会使用到不定参数,它的使用规则有2项: 一个方法中只能使用一个不定参数. 不定参数必须是方法中最后一个参数. 不定参数在传入的过程中会行成一个数组传入,如果不会放在最后一个,虚拟机无法 ...