效果图：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>3.10新闻中心制作评测题</title>

<style type="text/css">

/*在此定义相关CSS样式*/

.topList{

    width:300px;

    height:180px;

    border:1px solid #e8e8e8;

    margin: 0 auto;

}

ul{

    list-style:none;

    padding: 0 5px;

}

li{

    font-size:12px;

}

em{

    width:20px;

    height:16px;

    text-align:center;

    font-style:normal;

    color:#333;

    background:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg);

    background-position: 0 16px;

    display:block;

    float:left;

}

    .top em{

        background-position: 16px 0;

}

a:link, a:visited{

    text-decoration:none;

    color:#000;

}

a:hover, a:active{

    text-decoration:none;

    color:#f00;

}

</style>

</head>

<body>

<div class="topList">

<ul>

<li class="top"><em>01</em>

<p><a href="http://www.imooc.com/" >【访谈用户篇】“有为屌丝”在路上</a></p>

</li>

<li class="top"><em>02</em>

<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>

</li>

<li class="top"><em>03</em>

<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>

</li>

<li><em>04</em>

<p><a href="http://www.imooc.com/">【访谈】破茧成蝶——美女程序员的蜕变史</a></p>

</li>

<li><em>05</em>

<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>

</li>

<li><em>06</em>

<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>

</li>

</ul>

</div>

</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. CentOS6.x下yum安装MySQL5.5/5.6

    1. 安装mysql-5.5的yum源 # rpm -ivh http://repo.mysql.com/yum/mysql-5.5-community/el/6/x86_64/mysql-commu ...

  2. 解决logstash启动缓慢问题

    在部署logstash时,头几次启动时长还可以,最后高达半小时以上启动启动不了,上网查资料说,系统的“熵”过低,导致jruby启动缓慢.需要安装haveged.但是我安装完后还是慢 https://h ...

  3. Java编程思想 学习笔记2

    二.一切都是对象 1.用引用操纵对象 在Java中,一切都被视为对象,但操纵的标识符实际上是对象的一个“引用”.可以将这想象成遥控器(引用)来操纵电视机(对象).另外,没有电视机,遥控器也可以单独存在 ...

  4. html5 流动布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. POJ1251 Jungle Roads【最小生成树】

    题意: 首先给你一个图,需要你求出最小生成树,首先输入n个节点,用大写字母表示各节点,接着说有几个点和它相连,然后给出节点与节点之间的权值.拿第二个样例举例:比如有3个节点,然后接下来有3-1行表示了 ...

  6. Oracle设置某张表为只读

    Oracle 11g开始支持设置某张表为只读,这样可以防范对某些表的修改,起到一定的安全性. 设置如下: --设置表为只读权限(加锁) ALTER TABLE tab_name READ ONLY ; ...

  7. Vue项目实践中的功能实现与要点

    本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...

  8. Problem F Plug It In!

    题目链接:https://cn.vjudge.net/contest/245468#problem/F 大意:给你插座和电器的对应关系,有多个电器对应一个插座的情况,但是一个插座只能供一个电器使用,现 ...

  9. jquery 学习(五) - CSS 操作

    HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...

  10. 不修改加密文件名的勒索软件TeslaCrypt 4.0

    不修改加密文件名的勒索软件TeslaCrypt 4.0 安天安全研究与应急处理中心(Antiy CERT)近期发现勒索软件TeslaCrypt的最新变种TeslaCrypt 4.0,它具有多种特性,例 ...