效果图：

<!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. src路径问题：./ 与 ../

    ./ :当前目录(相对路径) ../ :当前目录的父目录(相对路径) /:根目录(绝对路径) vue 中 @ 指向 src 文件夹: 在 build 文件夹下 webpack.base.conf.js ...

  2. JAVA记录-消息队列介绍

    1.JMS概述 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  3. Linux最全vi命令

    1. 关于Vim vim是我最喜欢的编辑器,也是linux下第二强大的编辑器. 虽然emacs是公认的世界第一,我认为使用emacs并没有使用vi进行编辑来得高效. 如果是初学vi,运行一下vimtu ...

  4. UVALive - 7139（差分+模拟）

    题目链接 参考 题意 N*M的网格,一辆车沿着网格线按给定路线走,每个网格里有一个人,人的视线始终看着车,问这些人净转圈数的平方和. 分析 由于车的起点和终点都为左上角,且每个格子里的人永远面对着车, ...

  5. log4j2 的使用

    log4j2 是 log4j 的升级,更为方便,更为强大. log4j2.xml 的配置以及 log4j2的依赖包使用log4j2 并没有其他的依赖包,只是在使用log4j的情况下,需要别的进行桥接 ...

  6. configure编译选项

    1.rpath与rpath-link的区别 参考链接:http://blog.csdn.net/xph23/article/details/38157491 rpath 是 运行时候链接的库, rpa ...

  7. mysql 原理 ~ 事务隔离机制

    简介: 事务隔离知多少内容  一 基础知识  1 事务特性 ACID   A 原子性 C 一致性 I 隔离性 D 持久性  2 并行事务出现的问题    1 脏读 读取了其他事务未提交的数据      ...

  8. 带事件的Bootstrap模态框的使用2

    模态框中显示一些基本的数据以及触发一些基本的JS函数 <%@ page language="java" contentType="text/html; charse ...

  9. Linux注销&登陆

    ⒈注销 ①在命令行使用logout,此指令在图形界面无效.

  10. 【CTF WEB】ISCC 2016 web 2题记录

      偶然看到的比赛,我等渣渣跟风做两题,剩下的题目工作太忙没有时间继续做. 第1题 sql注入: 题目知识 考察sql注入知识,题目地址:http://101.200.145.44/web1//ind ...