<!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. sql从简单到高级

    Ø 基本常用查询 --select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 sel ...

  2. wifi 定位

    前一天跟某电信公司一位朋友聊天: 问:电信用户现在能占手机用户多少比例? 答:(??) 问:把cdma给了电信,其实就是给个根鸡肋. 答:呃,看怎么说.对于电信来说,毕竟拿到了移动牌照. 问:工作行不 ...

  3. Ext.Net安装和应用

    1.最新版本 2.打开文件,将包含以下文件:   Ext.Net.dll  Ext.Net.Utilities.dll  Ext.Net.xml  Newtonsoft.Json.dll  Newto ...

  4. SpringMVC+Hibernate 项目开发之一（Maven环境搭建）

    Maven环境搭建网上一大堆文章,直接引用leiOOlei同学的了:http://www.cnblogs.com/leiOOlei/p/3359561.html Maven版本:apache-mave ...

  5. 以太坊系列之十七: 使用web3进行合约部署调用以及监听

    以太坊系列之十七: 使用web3进行智能合约的部署调用以及监听事件(Event) 上一篇介绍了使用golang进行智能合约的部署以及调用,但是使用go语言最大的一个问题是没法持续监听事件的发生. 比如 ...

  6. Linux 运维工程师经典面试题合集（不断更新中 ...）

    写在前面的话 做运维以来,关注了很多关于互联网技术,培训等乱七八糟的公众号,时不时的就会推一些各种公司的面试题过来. 大致看了一下,发现自己很多知识要么遗忘了,要么很难说出个所以然,所以这里对那些个人 ...

  7. java 笔记整理

    在19寒假对java基础进行自学,总结的笔记整理出来 ==================================================== 排序查找 冒泡排序法1.一共会比较数组元 ...

  8. php代码审计2全局变量和超全局变量

    全局变量:就是在函数外面定义的变量,不能在函数中直接使用,因为它的作用域不会到函数内部,所以在函数内部使用的时候尝尝看到类似global $a; 超全局变量:在所有脚本都有效,所以,在函数可以直接使用 ...

  9. utp

    接口测试大致分为两种:数据驱动和代码驱动 数据驱动:主要处理用例之间没有关联关系的用例集合,一般以(excel.yaml)文件形式存储用例 代码驱动:主要是处理用例之间存在关联关系的用例(如:抽奖,需 ...

  10. 【noip2017】【Luogu3960】列队 线段树

    题目描述 Sylvia 是一个热爱学习的女♂孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n \times mn×m 名学生,方阵的 ...