zoukankan      html  css  js  c++  java
  • 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="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="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="images/themeforest.jpg">
    <img src="images/zerotheme.jpg">
    </div>
    </div>
    <div id="box">
    <div class="heading">
    <p>Photos</p>
    </div>
    <div class="content">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    <img src="images/photo01.png">
    </div>
    </div>
    </body>
    </html>

    style.css  

    a{
    text-decoration: none;
    }


    .article{margin-bottom: 20px;}
    .article article{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;}

  • 相关阅读:
    (收藏)Wp7开发中文网站
    (收藏)Andriod中文翻译组
    (1) BlackBerry 环境的配置:安装standalone版的BlackBerry安装包
    (2)把BlackBerry作为插件安装到已有的Eclipse中
    (收藏)一个很不错的编程网站
    Android Architecture
    在Eclipse Android中设置模拟器屏幕大小
    (收藏)C#网站
    (Android) Binding to Data with AdapterView
    ListView 的理解
  • 原文地址:https://www.cnblogs.com/lijiageng/p/6285554.html
Copyright © 2011-2022 走看看