<!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练习 | 小影志首页练习的更多相关文章

  1. Web字体工具整理，网页图标字体以及使用方法整理

    常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...

  2. js 语法高亮插件之 Prism.js

    之前也介绍过几款语法高亮插件<为博客园选择一个小巧霸气的语法高亮插件>以及关于他们的综合性能<再议 语法高亮插件的选择>.今天在小影志博客看到<使用 Prism.js 实 ...

  3. Swiper结合jQuery实现腾讯新闻首页

    今天我们来说一下,Swiper结合jQuery实现的腾讯新闻首页, 咱们先来看一下效果图: 这也是我把PC端缩成移动端来截的图,毕竟是PC端,要是不好看的话请见谅,,,,,,,,,,,,, 然后请允许 ...

  4. SQLSERVER走起微信公众帐号全新改版 全新首页

    SQLSERVER走起微信公众帐号全新改版 全新首页 今天,SQLSERVER走起微信公众帐号增加了首页功能 虽然还是订阅号,不过已经对版面做了比较大的修改,希望各位亲用得放心.用得安心O(∩_∩)O ...

  5. 带你实现开发者头条APP(四)---首页优化(加入design包)

    title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...

  6. 带你实现开发者头条APP(三) 首页实现

    title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true --- 一.前言 今天实现开发者头条APP的 ...

  7. 修复IE11首页被恶意篡改的问题

    前几天为了测试一个程序,把系统换成了Windows10,Windows10自带了微软的新浏览器Edge和IE11,用来其实也没什么太多感觉了,我习惯于Chrome,但有些东西还是得用IE,比如网银之类 ...

  8. 每日设置Bing首页图片为壁纸

    闲来无事,手痒痒要做一个什么小工具. 于是乎便有了本文. 当有一个想法的时候,首先免不了网上搜索一番以便看一下有木有网友有过类似的想法. 很显然--有! 因此本文大代码是从几个地方搜索,然后组合的. ...

  9. GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)

    GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议17：多数情况下使用foreach进行循环遍历

    建议17:多数情况下使用foreach进行循环遍历 由于本建议涉及集合的遍历,所以在开始讲解本建议之前,我们不妨来设想一下如何对结合进行遍历.假设存在一个数组,其遍历模式可以采用依据索引来进行遍历的方 ...

  2. wpf控件开发基础

    wpf控件开发基础(3) -属性系统(2) http://www.cnblogs.com/Clingingboy/archive/2010/02/01/1661370.html 这个有必要看看 wpf ...

  3. SQL Server 常用函数总结

    SQL去空格函数 1.ltrim(‘内容’)--去掉字符左边的空格 代码如下 declare @str varchar(100) set @str=' ADFADF' select @str sele ...

  4. angular 服务之间依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class LoggerServiceService { constr ...

  5. django中ImageField模块使用

    https://blog.csdn.net/meylovezn/article/details/47124923

  6. 630. Course Schedule III

    There are n different online courses numbered from 1 to n. Each course has some duration(course leng ...

  7. 解决eclipse Building workspace(Sleeping)闪烁

    出现这个是因为我,把两个有错的项目.从工程里面删除掉之后,再接着运行新的工程,但是Building workspace一直没有执行完毕,导致新的工程无法运行. 这个时候可以关闭自动编译,就可以运行新的 ...

  8. mysql升级到5.7时间戳报错

    往数据库里创建新表的时候报错: [Err] 1067 - Invalid default value for 'updateTime' DROP TABLE IF EXISTS `passwd_res ...

  9. linux上的那些查找的命令

    由于工作的需要,少不得要在linux系统上查找各种各样的文件,关于在linux查找的命令有不少,这里小小的总结下. 简单介绍下各个命令的用途: find:实际搜索硬盘查询文件名称: whereis:查 ...

  10. vue模块拖拽效果

    正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...