效果图：

<!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. 加减乘除工具类BigDecimalUtil

    场景:为毛要用BigDecimal这个类来实现加减乘除呢?我不说其他的,你去用小数乘小数,除小数就知道.话不多说,老规矩,开箱即用. BigDecimalUtil.java package com.m ...

  2. jquery ajax 跨域请求【原】

    前台 function sending(){ $.ajax({ type : "get",//jsonp只能get async:true, url : "/webcont ...

  3. CodeForces - 615D Multipliers（数论）

    http://codeforces.com/problemset/problem/615/D 题意 给出m个质因子,组成一个数n.问n的约数的乘积是多少,输出mod 1e+7的结果. 分析 从输入我们 ...

  4. PHP7 学习笔记（七）如何使用zephir编译一个扩展记录

    一.zephir 编译遇到的错误 安装 git clone https://github.com/phalcon/zephir $ cd zephir $ ./install-json $ ./ins ...

  5. datagrid点删除，弹出一个确认和取消的消息框

    有个简单的方法:在datagrid的删除按扭datagrid的属性生成器->列->添加按扭列->删除在数据字段中加上:<div id="de" onclic ...

  6. <table>居中的一种方法

    <div title="主页" data-options="iconCls:'icon-house'"> <center> <ta ...

  7. 淘淘商城之Ajax跨域请求

    一.什么是跨域 (1)域名不同时: (2)域名相同,端口不同时 二.解决方法 可以使用jsonp解决跨域问题 三.什么是jsonp jsonp其实是一个跨域解决方案,js跨域请求数据是不允许的,但是跨 ...

  8. Mongodb 备份 数据导出导入

    MongoDB 客户端工具 mongochef 可以进行一系类操作 MongoDB 非客户端操作 : mongod 备份导出 mongoexport -h IP --port 端口 -u 用户名 -p ...

  9. Nginx Server 配置

    http { include mime.types; // 主模块:实现对配置文件包含的文件设定,可以减少主配置文件的复杂度: default_type application/octet-strea ...

  10. Nginx PHP支持

    Nginx 支持 PHP server { server_name www.www1.com www1.com; location / { index index.php index.html; ro ...