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>
巴特西

Html练习 | 小影志首页练习

最新文章

热门文章
