<!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. Nginx配置 简单写了个

    #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...

  2. WinForm 中使用 Action 子线程对主线程 控制进行访问

    /// <summary> /// 开启新线程执行 /// </summary> /// <param name="sender"></p ...

  3. HttpServletResponse函數

    一.負責向客戶端發送數據的方法 1.ServletOutStream getOutputStream() 获得一个Servlet字节流输出数据 案例: response.setHeader(" ...

  4. Ecliplse导入maven项目applicationContext.xml报错：Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.1.xsd). For more information, right click on the message in

    刚刚导入的maven项目的Spring配置文件报错: 大体意思是说: 引用的文件包含错误(http://www.springframework.org/schema/context/springing ...

  5. 二、搭建SpringBoot项目

    与其说是搭建,还不如说去下载...(注意,在此之前要确保你的3000块钱的笔记本上安装了JDK8+已经最新的相对较新的maven:apache-maven-3.6.0,至于JDK以及maven的相关安 ...

  6. java 实验2 类

    共5道大题  最后一题为自动洗牌发牌系统 1) 编写一个类实现银行帐户的概念.包括的属性有:帐号.储户姓名.地址.存款余额,包括的方法有:存款.取款.查询.计算利息.累加利息等. public cla ...

  7. 趣图：快下班了，剩一个bug，修复一下再走

      趣图:当我给老板展示我修复了那个 bug 时 趣图:当我以为这是最后一个Bug时……

  8. Elasticsearch插件head的安装(有坑)

    http://blog.csdn.net/u012332735/article/details/56283932 Elasticsearch出了5.2.1版本之后,就去试试它的新版本的使用,为了以后的 ...

  9. CentOS71611部署Django

    web.conf <VirtualHost *:> WSGIScriptAlias / /var/www/datacn/datacn/wsgi.py Alias /static/ /var ...

  10. Udp -内部缓冲区

    1.每个socket关联了两个缓冲区,一个用于发送,一个用于接收. 2. 3.发送:(1)sendto()把数据放在sendbuf(缓冲区),通知os来取 (2)os在适当的时候过来取数据,并发到网络 ...