效果图：

<!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. Unity触发器有时失效的原因

    unity里面的触发器有时候不起作用,我原以为是失效了.其实是这样的,所谓触发器就是被触发的物体,例如你子弹打小怪.如果把子弹设置成触发器那么是不成功的,因为子弹是主动的啊,那么把小怪设置成触发器了呢 ...

  2. iiiLab提供的视频解析接口如何使用？转发个简单的使用教程

    iiiLab除了提供免费的在线视频解析下载工具,还提供了视频解析接口供有需要的个人和公司调用. iiiLab目前已支持解析下载今日头条.西瓜视频.内涵段子.微博.秒拍.小咖秀.晃咖.火山.快手.抖音. ...

  3. 使用ajax实现form表单的submit事件

    需求:如题,需要在登录页面使用ajax提交请求,并在本页面返回请求信息. 主要部分jS如下: //提交表单$("#loginForm").submit(function(){ va ...

  4. Java编程思想 学习笔记1

    一.对象导论 1.抽象过程 Alan Kay曾经总结了第一个成功的面向对象语言.同时也是Java所基于的语言之一的Smalltalk的五个基本特性,这些特性表现了纯粹的面向对象程序设计方式 1)万物皆 ...

  5. WebMvcConfigurerAdapter已过时，替换接口或类

    WebMvcConfigurerAdapter已经过时,在新版本2.x中被废弃,原因是springboot2.0以后,引用的是spring5.0,而spring5.0取消了WebMvcConfigur ...

  6. Win Server 2008 R2 IIS 默认只能添加一个 443 HTTPS 端口

    问题: 解决方案: 方法一: 然后在:C:\Windows\system32\inetsrv\config\applicationHost.config 找到 对应网站 <binding pro ...

  7. 数据库的一致性读，赃读，多线程与赃读，ACID，UNDO

    赃读 对于对象额同步异步方法,我们在设计自己的程序的时候,一定要考虑的问题整体,不然会出现数据不一致的错误,很经典的就是赃读(dityread) 示例: ​ package com.nbkj.thre ...

  8. Linux 重启网卡失败 Job for network.service failed because the control process exited with error code. See "systemctl status network.service" and "journalctl -xe" for details.

    linux下重启网卡使用命令 : service network restart 时报错: [root@slave01 hadoop]# service network restart Startin ...

  9. python 新式类的 __getattribute__

    这个方法定义在object中,所以所有的新式类都继承有该方法,所有的新式类的实例在获取属性value的时候都会调用该方法,为了验证这一结论,我们重写一下该方法: class C(object): a ...

  10. 前端 - Ajax (1)

    Ajax 主要作用 用于隐式提交,有别于input 提交时不会跳转/刷新页面. 前端: html 代码:(id) <p> <input id="user" typ ...