1、先写结构

a.如果列表没有时间   结构为：<li><a>新闻内容</a></li>

b.如果列表有时间      结构为：<li><a>新闻内容</a><span>时间</span></li>

2、给li添加高度

3、若列表有时间，给a标签，span标签添加浮动

4、调整文本样式（大小，颜色等）

5、以背景图的形式添加列表符号

6、调整列表符号的位置，为li设置行高使文本上下居中

7、添加padding属性将文字的位置调整好，露出列表符号。

web新手——新闻列表这样写不容易出错的更多相关文章

  1. web框架学习列表

    转载自鲁塔弗的博客,原文网址:http://lutaf.com/148.htm web framework层出不穷,特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的 ...

  2. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. 桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

    折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

  4. 微信小程序开发-新闻列表之新闻列表绑定

    微信小程序开发-新闻列表之新闻列表绑定开发教程: 1.效果图预览 2.准备工作 在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局.小程序里建议使用flex布局,因 ...

  5. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  6. day20 project+查看新闻列表 + 点赞 + 图片验证码 + 评论和多级评论 + 后台管理 + webSocket + kindEditor

    Day20回顾: 1. 请求生命周期 2. 中间件 md = [ "file_path.classname" ] process_request[可有可无] process_res ...

  7. WEB新手之签到题

    写一写web新手赛的题. 这是签到题,开始时需要耐心等待页面中字母全部出现. 字母全部出现后,会跳转到另一个界面,如上图所示.F12没什么特别的地方,这题应该有点难度. 按往常一样,先抓包. 按英文提 ...

  8. Angular2快速入门-3.多个组件（分离新闻列表页和详细页）

    上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来 新闻详细单独一个compo ...

  9. React Native ：加载新闻列表

    代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...

随机推荐

  1. CPP全面总结（涵盖C++11标准）

    OOP之类和对象 1. this指针的引入 每个成员函数都有一个额外的隐含的形参,这个参数就是this指针,它指向调用对象的地址.默认情况下,this的类型是指向类类型非常量版本的常量指针.可以表示成 ...

  2. 背水一战 Windows 10 (81) - 全球化

    [源码下载] 背水一战 Windows 10 (81) - 全球化 作者:webabcd 介绍背水一战 Windows 10 之 全球化 Demo 格式化数字 示例1.演示全球化的基本应用Locali ...

  3. MFS 服务扫描与爆破

    MSF 服务发现 常用来发现局域网内,的常见服务,比如HTTP,FTP,TELNET等. MSF模块搜索: [root@localhost ~]# msfconsole msf5 > searc ...

  4. jsapi微信支付

    JSAPI微信支付 引用js <script type="text/javascript" src="http://res.wx.qq.com/open/js/jw ...

  5. Android 网络交互之下载断点续传

    一.概述 1.概念 断点续传主要用于下载,本文也主要讲述下载时的断点续传的逻辑思路.顾名思义,断点续传就是下载从中断的地方继续下载,一般是因为暂停或者网络故障导致的下载中断,当恢复下载的时候可以从已经 ...

  6. JavaScript中的定时事件

    这两个函数都是在给定的时间之后开始执行的,并不是立即执行. var timeId = window.setTimeout("method()",1000); //定时执行,还可以这 ...

  7. [CocoaPods]制作CocoaPod

    创建自己的CocoaPod非常简单.如果你已经有一个单独的组件,那么你就是最重要的.本指南概述了整个过程,本节中的其他指南更适合更高级用户. 我们建议让CocoaPods在这里努力工作.Running ...

  8. 在notepad++中使用正则匹配功能(一-龥！-～) 中文[利刃篇]

    用正则时间越久,人就越懒,就越知道正则的强大.正则,不只是在代码里用到,在字符查找是也会用到,学会适当使用正则,将会使你的工作事办功倍!但是,中文却是一个砍,不容易过. 于是在用notepad++,也 ...

  9. JAVA学习路线——匹马行天下

  10. opus在arm的嵌入式平台上的移植和开发

    最近产品中要用到opus,圣上一声令下,把opus移植到我们平台上,什么?opus?opus是什么?在一脸 茫然中,我这特种兵码农就赤手空拳上战场了. 废话少说,赶紧在网站:https://opus- ...