<!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. Android AIDL--进程间通信

    一 AIDL 是什么 AIDL(Android 接口定义语言) 是 Android 提供的一种进程间通信 (IPC) 机制. 我们可以利用它定义客户端与服务使用进程间通信 (IPC) 进行相互通信时都 ...

  2. jQuery bind() live()

    <script type="text/javascript"> $(document).ready(function () { /*$('.clickme').live ...

  3. LSI Storcli 工具使用

    查看RAID卡ID 命令功能 查看LSI SAS3108RAID卡的ID. 命令格式 storcli64 show 使用实例 # 查看LSI SAS3108RAID卡的ID. [root@localh ...

  4. 人力资源管理 winform C#

    主旨思想:数据库(增,删,改,查) 资源管理器目的:实现基本人员信息   存储,调用,查看头像,修改内容. 注意事项:   1.建立两个表格  (人员表(cold,name,bumen,phone,t ...

  5. js定时更换图片

    //定时更换图片: 调用:smileChange.start(); smileChange.stop(); var smileChange = { start: function () { var t ...

  6. 在iis7.5上部署asp.net mvc5

    部署mvc5跟部署mvc4是一样的,唯一不同的是需要修改一下web.config的配置 在web.config中加入一下节点即可 <system.webServer> <module ...

  7. xcode9 上传app后iTues 构建版本不显示

    1.问题原因 苹果公司更新了ios10系统和xcode9以后,做了许多调整,如果开发者没有注意就会遇到这样那样的问题.作者在更新以后就遇到了上传app到appstore成功后,没有显示的问题.下面就介 ...

  8. yum及RPM安装

    yum及RPM安装 基本说明: 1.yum相当于windows上面的360软件中心 2.yum是redhat系列发行版的软件安装命令 debian系统用的是apt-get 3.yum安装软件的来源得存 ...

  9. mysql设计-优化

    mysql表复制 1.复制表结构 create table student like user; 2.复制表内容 insert into t3 select * from t1; mysql索引 1. ...

  10. Kafka,Mq,Redis作为消息队列有何差异？

    Kafka作为新一代的消息系统,mq是比较成熟消息系统,而redis也可以发布订阅,那么这三者有何异同? RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,X ...