效果图：

<!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.5环境下安装zk

    第一步:先下载安装包,解压. 第二步:进去根目录,创建data文件夹  mkdir  data 第三步:进去conf文件夹,修改  zoo_sample.cfg    的名字   mv zoo_sam ...

  2. 安装阿里云github提供的修改版minikube

    由于kubenetes域名背墙(gcr.io),如kubernetes-dashboard服务依赖不能正常使用. $ docker pull gcr.io/google_containers/paus ...

  3. JDBC preparedStatement分页和统计，批处理和事务

    一个类:DriverManager 四个接口:Connection.PreparedStatement .ResultSet.Statement 连接不上数据库出错的原因 1.数据库监听服务的配置不正 ...

  4. OptionParser命令参数介绍及使用

    使用optionParse解析命令行参数分以下几个步骤: 创建parser实例 使用add_option添加我们要处理的命令行参数 得到解析sys.argv后的options对象,查看用户的输入 代码 ...

  5. windows钩子函数

    一 什么时候用到钩子?(when)Windows操作系统是建立在事件驱动的消息处理机制之上,系统各部分之间的沟通也都是通过消息的相互传递而实现的.通常情况下,应用程序只能处理当前进程的消息,如果需要对 ...

  6. Django学习手册 - 模板语言（前端获取后台数据）

    先在views视图内,定义列表数据,以及字典数据.运用render函数传递两个列表数据至前端. from django.shortcuts import render list_info = [ {& ...

  7. Mybatis进阶学习笔记——关系查询——一对一查询

    用户和订单的需求 通过查询订单,查询用户,就是一对一查询 (1)自定义JavaBean(常用,推荐使用) <select id="queryOrderUser" result ...

  8. 2018-2019-2 网络对抗技术 20165227 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165227 Exp4 恶意代码分析 实验步骤: 使用的设备:Win7(虚拟机).kali(虚拟机) 实验一:使用如计划任务,每隔一分钟记录自己的电脑有哪些程 ...

  9. Docker三要素

    一.镜像(Image) Docker镜像(Image)就是一个只读的模板,镜像可以用来创建Docker容器,一个镜像可以创建很多容器. Docker 面向对象 镜像 类(class) 容器 实例对象 ...

  10. datatables 添加excel下载

    Datatables 版本 1.10.12 和普通datatables不一样的是: 引入包 <script src="../../vendor/datatables/js/dataTa ...