CRIME

导航

Html练习 | 小影志首页练习 

<!DOCTYPE html>
<head>
  <title>小影志首页练习</title>
  
  <style>   
  /*应用全页字体*/
  .pg-font{
    font-family:"STXihei",Times,sans-serif;
  }
  /*首页画面*/
  .pg-header{
    height:550px;
    background-image:url(https://cdn.c7sky.com/c7v5/img/headerbg_home.jpg);
    background-repeat:no-repeat;
    background-size: 100%;
    position:relative;   
  }
  /*标题背景*/
  .pg-list{
    height:60px;
    background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);   /*CSS3渐变透明*/

    line-height:60px;   /*下级标签垂直居中*/
    overflow: hidden;   /*超出截取*/

    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;  
  }
  /*标题框*/
  .pg-list2{
    width: 750px;
    margin:0 auto;
  }
  /*标题格式*/
  a.menu{
    display:inline-block;
    text-decoration:none;
    border-bottom: 6px solid #00e2ff;

    font-size:13pt;
    color:#ffffff;
    padding: 0px 19px;    
  }
  /*经过标题*/
  .menu:hover{
    line-height: 51px;     /*投机取巧、需解决修改*/
    transition: .15s ease-in-out;     /*CSS3中transition动画过度特效*/
    -webkit-transition: .15s ease-in-out;   /*CSS3需要特定浏览器*/
  }

  /*图文样式*/
  .pg-article{
    margin: 50px auto 0 auto;
    height:1000px;
    width:700px;
  }  

  .pg-article1{
    height:220px;
    width:700px;
  }

  .pg-article2{
    display:block;
    height: 54px;   
    
    line-height: 54px; 
    text-decoration:none;
    color:#000000;
    font-size: 25px;
    font-weight: bold
  }

  .pg-article2:hover{
    color:#00e2ff;
    transition: .15s ease-in-out;     /*CSS3中transition动画过度特效*/
    -webkit-transition: .15s ease-in-out;
  }

  .pg-s-article{
    height: 20px;   
    font-size: 14px;
    color: #757575;
  }
  
  .pg-s-article1{
    text-decoration:none;
    color: #00e2ff;
  }

  .pg-s-article2{
    text-decoration:none;
    color: #757575;
  }

  </style>
  
  <body style="margin:0 auto;">
    <div class="pg-font">

    <div class="pg-header"> 

      <div class="pg-list">
        <div class="pg-list2">
        <a class="menu" href="https://c7sky.com/">首页</a>
        <a class="menu" href="https://c7sky.com/category/wordpress">WordPress</a>
        <a class="menu" href="https://c7sky.com/category/software">实用软件</a>
        <a class="menu" href="https://c7sky.com/category/website">网站推荐</a>
        <a class="menu" href="https://c7sky.com/category/free">免费资源</a>
        <a class="menu" href="https://c7sky.com/category/webdev">前端开发</a>
        <a class="menu" href="https://c7sky.com/category/webdev">更多</a>             
        </div>
      </div>

    </div>

    <!--图文.-->
    <div class="pg-article">
      <!--C7V5图片.-->
      <div class="pg-article1">
        <img src="https://img.c7sky.com/2016/05/28/wordpress_theme_c7v5_banner.jpg">
      </div>

      <!--C7V5标题.-->    
      <div>
        <a class="pg-article2" href="">原创 WordPress 主题 C7V5 发布（扁平化|响应式|HTML5）</a>
      </div>

     <!--C7V5小标题.--> 
     <div class="pg-s-article">
       <a class="pg-s-article1" href="">Wordpress</a>
       <span>/ 更新于 2019-02-18 /</span>
       <a class="pg-s-article2" href="">211 条评论</a>
     </div>

    </div>


  </div>
  </body>

posted on 2019-04-29 15:39  CRIME  阅读(152)  评论(0)    收藏  举报