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

  • 相关阅读:
    html5 java多图片上传
    ajax post form表单
    java获取图片文件返回地址
    教你使用servlet拦截器,放行不需要拦截的内容
    实用的request接收值的工具类
    spring3的定时执行任务
    centos7.4无法启动之找不到EFIBOOTgrubx64.efi
    redhat7.2上搭建网易、epel的yum repo
    python2和python3中的关键字的区别--keyword模块
    搭建lamp的脚本
  • 原文地址:https://www.cnblogs.com/lijiageng/p/6285554.html
Copyright © 2011-2022 走看看