css多行多列的新闻模式

看图:

这种效果,甚至是三列四列的新闻模块,以前我都用table,以为比css方便,直到后来发先了a的浮动之后,原来用ul更方面,更容易控制,先来看看代码吧:

引用:

.news{}
.news li{ list-style:none; clear:both}
.news li a#n1{ text-decoration:none; float:left; line-height:22px;}
.news li a#n2{ text-decoration:none; float:right; color:#999}
.news li a#n3{ float:right; padding-right:20px;color:#999}
.news li a#n1:hover{ text-decoration:underline;}
.news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
a#n1为新闻标题,左浮动,n2和n3为点击次数和发布日期,右浮动,距离20px;
注意,li上一定要清除所有浮动.
测试支持ie6,ie7,ff,opera.

示例,三列:

css多行多列的新闻模式

这是三列

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

示例,二列:

css多行多列的新闻模式

这是二列

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

示例,虚线:

css多行多列的新闻模式

加条虚线

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

示例,不同背景色:

css多行多列的新闻模式

不同背景色

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

示例,边框:

css多行多列的新闻模式

边框

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • css多行多列的新闻模式

    css多行多列的新闻模式

    看图:这种效果,甚至是三列四列的新闻模块,以前我都用table,以为比css方便,直到后来发先了a的浮动之后,原来用ul更方面,更容易控制,先来看看代码吧: 引用:.news{} .news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right; col

  • JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table 1.说明 遍历表格中的某行某列,并打印其值 2.实现源码 <!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">

  • elementUI 动态生成几行几列的方法示例

    elementUI 动态生成几行几列的方法示例

    elementUI 动态生成几行几列 table 现在碰到一个需求:就是根据用户选择的行列,来自动生成相应大小的 table,如下这个实现还不完善,因为数据不对,只是实现了动态的效果,仅是提供一种实现思路吧,后续我会再想想看怎么实现为好,先记录一下吧 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>el

  • SQL行转列和列转行代码详解

    行列互转,是一个经常遇到的需求.实现的方法,有case when方式和2005之后的内置pivot和unpivot方法来实现. 在读了技术内幕那一节后,虽说这些解决方案早就用过了,却没有系统性的认识和总结过.为了加深认识,再总结一次. 行列互转,可以分为静态互转,即事先就知道要处理多少行(列);动态互转,事先不知道处理多少行(列). --创建测试环境 USE tempdb; GO IF OBJECT_ID('dbo.Orders') IS NOT NULL DROP TABLE dbo.Orde

  • MySQL存储过程中使用动态行转列

    MySQL存储过程中使用动态行转列

    本文介绍的实例成功的实现了动态行转列.下面我以一个简单的数据库为例子,说明一下. 数据表结构 这里我用一个比较简单的例子来说明,也是行转列的经典例子,就是学生的成绩 三张表:学生表.课程表.成绩表 学生表 就简单一点,学生学号.学生姓名两个字段 CREATE TABLE `student` ( `stuid` VARCHAR(16) NOT NULL COMMENT '学号', `stunm` VARCHAR(20) NOT NULL COMMENT '学生姓名', PRIMARY KEY (`

  • datatable行转列示例分享

    复制代码 代码如下: /// <summary>  /// DataTable行转列  /// </summary>  /// <param name="dtable">需要转换的表</param>  /// <param name="head">转换表表头对应旧表字段(小写)</param>  /// <returns></returns>  public static

  • python中pandas.DataFrame对行与列求和及添加新行与列示例

    本文介绍的是python中pandas.DataFrame对行与列求和及添加新行与列的相关资料,下面话不多说,来看看详细的介绍吧. 方法如下: 导入模块: from pandas import DataFrame import pandas as pd import numpy as np 生成DataFrame数据 df = DataFrame(np.random.randn(4, 5), columns=['A', 'B', 'C', 'D', 'E']) DataFrame数据预览: A

  • mysql 行转列和列转行实例详解

    mysql 行转列和列转行实例详解

    mysql行转列.列转行 语句不难,不做多余解释了,看语句时,从内往外一句一句剖析 行转列 有如图所示的表,现在希望查询的结果将行转成列 建表语句如下: CREATE TABLE `TEST_TB_GRADE` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `USER_NAME` varchar(20) DEFAULT NULL, `COURSE` varchar(20) DEFAULT NULL, `SCORE` float DEFAULT '0', PRIM

  • mssql 数据库表行转列，列转行终极方案

    复制代码 代码如下: --行转列问题 --建立測試環境 Create Table TEST (DATES Varchar(6), EMPNO Varchar(5), STYPE Varchar(1), AMOUNT Int) --插入數據 Insert TEST Select '200605', '02436', 'A', 5 Union All Select '200605', '02436', 'B', 3 Union All Select '200605', '02436', 'C', 3

  • php将HTML表格每行每列转为数组实现采集表格数据的方法

    本文实例讲述了php将HTML表格每行每列转为数组实现采集表格数据的方法.分享给大家供大家参考.具体如下: 下面的php代码可以将HTML表格的每行每列转为数组,采集表格数据 <?php function get_td_array($table) { $table = preg_replace("'<table[^>]*?>'si","",$table); $table = preg_replace("'<tr[^>]*

随机推荐