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;}

  • 相关阅读:
    eclipse新 java 文件时自动生成注释
    int占几个字节
    eclipse常用插件
    Asp.net中IsPostBack的实现原理
    Github的入门简介
    Hypertable
    VA01/VA02行项目物料搜索帮助新增页签
    rich_text
    js之Math
    js function参数
  • 原文地址:https://www.cnblogs.com/lijiageng/p/6285554.html
Copyright © 2011-2022 走看看