效果图：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>3.10新闻中心制作评测题</title>
  6. <style type="text/css">
  7.  
  8. /*在此定义相关CSS样式*/
  9. .topList{
  10.     width:300px;
  11.     height:180px;
  12.     border:1px solid #e8e8e8;
  13.     margin: 0 auto;
  14. }
  15. ul{
  16.     list-style:none;
  17.     padding: 0 5px;
  18. }
  19. li{
  20.     font-size:12px;
  21. }
  22. em{
  23.     width:20px;
  24.     height:16px;
  25.     text-align:center;
  26.     font-style:normal;
  27.     color:#333;
  28.     background:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg);
  29.     background-position: 0 16px;
  30.     display:block;
  31.     float:left;
  32. }
  33.     .top em{
  34.         background-position: 16px 0;
  35. }
  36. a:link, a:visited{
  37.     text-decoration:none;
  38.     color:#000;
  39. }
  40. a:hover, a:active{
  41.     text-decoration:none;
  42.     color:#f00;
  43. }
  44.  
  45. </style>
  46. </head>
  47.  
  48. <body>
  49. <div class="topList">
  50. <ul>
  51. <li class="top"><em>01</em>
  52. <p><a href="http://www.imooc.com/" >【访谈用户篇】“有为屌丝”在路上</a></p>
  53. </li>
  54. <li class="top"><em>02</em>
  55. <p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
  56. </li>
  57. <li class="top"><em>03</em>
  58. <p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
  59. </li>
  60. <li><em>04</em>
  61. <p><a href="http://www.imooc.com/">【访谈】破茧成蝶——美女程序员的蜕变史</a></p>
  62. </li>
  63. <li><em>05</em>
  64. <p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
  65. </li>
  66. <li><em>06</em>
  67. <p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
  68. </li>
  69. </ul>
  70. </div>
  71. </body>

TOP排行新闻列表。的更多相关文章

  1. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  2. day20 project+查看新闻列表 + 点赞 + 图片验证码 + 评论和多级评论 + 后台管理 + webSocket + kindEditor

    Day20回顾: 1. 请求生命周期 2. 中间件 md = [ "file_path.classname" ] process_request[可有可无] process_res ...

  3. 【JavaWeb】MVC案例之新闻列表

    MVC案例之新闻列表 作者:白宁超 2016年6月6日15:26:30 摘要:本文主要针对javaweb基本开发之MVC案例的简单操作,里面涉及mysql数据库及表的创建,以及jsp页面和servle ...

  4. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  5. 多行滚动jQuery循环新闻列表代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

    折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

  7. 编写利用Fragment创建新闻列表

    编写利用Fragment创建新闻列表 1.创建新闻实体类News,代码如下:   public class News { private String title; private String co ...

  8. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  9. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

随机推荐

  1. python---windows下安装和使用memcache

    windows版本下memcache地址http://www.runoob.com/memcached/window-install-memcached.html 注意当选择版本>=1.45时需 ...

  2. webStorm2018激活的方法

    问题 激活 webstorm 2018 最新版 解决步骤 License server:http://im.js.cn:8888

  3. Hive记录-hive权限控制

    在使用Hive的元数据配置权限之前必须现在hive-site.xml中配置两个参数,配置参数如下: <property> <name>hive.security.authori ...

  4. 第二节：从程序集的角度分析MemoryCache，并完成基本封装

    一. 轻车熟路 有了上一个章节对 System.Web.Caching.Cache 的探究,这里我们按照同样的思路对 MemoryCache 进行探究,相信必定会得心应手. 1. 程序集准备 a. 需 ...

  5. C# 与 SQL Server 的数据类型对应关系

    (一)C#与SQL Server 2005(或以下版本): C# C#取值 SQL Server SQL Server取值 System.DateTime samlltime System.Objec ...

  6. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  7. 找第二大的数SQL-Second Highest Salary

    1: 找小于最大的最大的 select max(Salary) from Employee where Salary<(select MAX(Salary) from Employee); 2. ...

  8. android HttpClient将数据提交到服务器

    1.HttpClient 使用方式 public static String loginByClientGet(String username,String password) { try { //打 ...

  9. POJ 1200 Crazy Search （哈希）

    题目链接 Description Many people like to solve hard puzzles some of which may lead them to madness. One ...

  10. D - Laying Cables Gym - 100971D （单调栈）

    题目链接:https://cn.vjudge.net/problem/Gym-100971D 题目大意:给你n个城市的信息,每一个城市的信息包括坐标和人数,然后让你找每一个城市的父亲,作为一个城市的父 ...