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="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的更多相关文章
- 15款HTML5/CSS3案例展示，导航，日历，钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...
- 12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 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的一些 ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- 12款高质量的响应式 HTML5/CSS3 网站模板
HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...
- html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]
大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...
- 6最好的之一 HTML5/CSS3 演示（PPT）框架
HTML 是全世界最流行的网页编程语言.而HTML5是这门语言的升级版本号.越来越多的开发人员和设计师開始使用HTML5.以下介绍几个 HTML5/CSS3 的演示工具和框架,你能够用它们来创建你的网 ...
随机推荐
- 多线程计算----pthread
#include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <pthread.h& ...
- Linux内核源代码
说明:只供学习交流 一,目录结构 Linux内核源代码采用树形结构进行组织,非常合理地把功能相关的文件都放在同一个子目录下,使得程序更具有可读性. 二,目录结构 arch目录 arch是archite ...
- 看完这篇文章才对【GIT】有了大彻大悟的认识
git定义:版本管理工具 历史:没有git的时候,我们修改完一个文件,要先把文件拷贝一个副本到备份文件夹中,还要建个文档来记录当前文件的信息和操作记录.当文件多的时候,人工操作起来将是个非常辛苦非常庞 ...
- bzoj3504: [Cqoi2014]危桥 网络流
一种网络流建图的思路吧,改天最好整理一波网络流建图思路 #include <bits/stdc++.h> using namespace std; int n,h,t,a1,a2,an,b ...
- printf输出格式
tips:#为空格 Printf 格式化字符串 格式代码 A ABC ABCDEFGH %S A ABC ABCDEFGH %5S ...
- liunx服务器常见监控指标
1. CPU Utilization 英文翻译就是CPU的利用率75%以上就比较高了(也有说法是80%或者更高).有的博客上说除了这个指标外,还要结合Load Average和Context Swit ...
- cocoaPods第三方库使用详解
终端上安装了cocoapods后,打开终端输入下面命令: cd /Users/Sivek_lin/Desktop/AFNTest/AFNTest touch podfile pod search af ...
- Oracle常用查询
-- 创建Oracle sequence create sequence SEQ_XXHF minvalue 1 maxvalue 9999999999999999999999999999 start ...
- Leetcode-37-Sudoku Solver(Hard)
此处先留空 使用搜索和回溯,递归来实现 参考:http://blog.csdn.net/zxzxy1988/article/details/8586289 描述简介,代码量最少
- 【原生js】原生js的省市区三级联动
html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...