首页 美食 育儿 手工 生活 美妆 美容 设计 电脑 综合
首页 相关文章 CSS实现网页中的隔行换色代码

CSS实现网页中的隔行换色代码

　　以前在中用表格布局网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种手法被广大的设计师们收入囊中作为自己的又一把工具刀。但是随着网页标准浪潮的来袭，这种设计效果慢慢变得没有了，原因主要是来自于标准化后的这种效果的实现上。

　　由于标准后我们都用UL来代替了表格，代码虽然少了很多，但是好像效果也随之少了。隔行换色也遇到了瓶颈。曾采用过CLASS方式来进行隔行换色：

ul
li class="one"/li
li class="two"/li
li class="one"/li
li class="two"/li
/ul

　　我们看到上面的代码所表现出来的是每行的CLASS都不一样，通过这样的方式的确可以解决隔行换色的问题，但是都被程序员告知这样写法程序没办法写。

　　这种设想在网页标准研究联盟中得到了反驳，认为样式的事没必要用行为去实现，并且用JS来实现的效果并不一定有CSS<...[ 查看全文 ]

2016-02-19 标签:
Web开发

CSS实现网页中的隔行换色代码的相关文章

  • CSS网页代码编写技巧：隔行换色的实现
    标签：Web开发
    网页设计中我们经常会碰到用CSS（层叠样式表）实现隔行换色的需求，您可以根据您的需要，采用下面的任何一种方法，当然要注意适合你的具体编码与需求情况。 一、使用background背景图片 如果行高固定的话，推荐使用隔行换色的背景图，也推荐将行高固定，这样可以兼容一切浏览器。 二、CSS Expression 文字：color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000&...[ 查看全文 ]
    673214684
    111
  • CSS隔行换色
    标签：Web开发
    行换色的问题，其实很简单，解决办法无非一下几种： 1：背景图，如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。 2：expression 文字：color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000'); 背景：background-color:expression(this.sourceIndex%2 ？ '#ff0000':'#000000'); 注：本方法浏览器兼容度不够，不...[ 查看全文 ]
    三年之痒year
    21
  • CSS：标准下的隔行换色方法
    标签：Web开发
    我们以前在DW中用表格布局着我们的网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种手法被广大的设计师们收入囊中作为自己的又一把工具刀。但是随着网页标准浪潮的来袭，这种设计效果慢慢变得没有了，原因主要是来自于标准化后的这种效果的实现上。 由于标准后我们都用UL来代替了表格，代码虽然少了很多，但是好像效果也...[ 查看全文 ]
    djq1973双鱼
    41
  • 网页中CSS样式切换的实现
    标签：Web开发
    样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！收集了一部分中外网站已经实现的技术资料整理出来供网友参考。 首先要具备不同内容的CSS文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例： 第一个是背景为红色的CSS文件（red.css）CSS中的内容为： body {...[ 查看全文 ]
    鍗曠函鈽炲彈鎸
    01
  • 纯CSS代码实现翻页
    标签：Web开发
    !DOCTYPE a href="/keys/html/index.html" target="_blank"html/a PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" head profile="http://www.w3.org/2000/08/w3c-synd/#" meta http-equiv="content-language" content="zh-cn" / meta http-equiv="content-type" content="text/html;ch...[ 查看全文 ]
    237001645
    01
  • 网页头部css代码优化实例
    标签：Web开发
    在div+css布局中，一般都这样来整体构架的： div id="header"/div div id="center"/div div id="footer"/div 而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏： div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这样写的，当然这样写并没有什么语法错误。但对于div来说有个原则，...[ 查看全文 ]
    qq991183084
    51
  • DIV CSS常用的网页布局代码
    标签：Web开发
    单行一列 以下是引用片段： body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 以下是引用片段： body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 三...[ 查看全文 ]
    勤奋的苦寒
    31
  • 实时切换网页的CSS样式实现
    标签：Html CSS布局 Div+CSS XHTML
        用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。      当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，...[ 查看全文 ]
    小冰辛
    981
  • 怎样在html文档里做隔行换色的多行方法
    标签：Web开发
    既然你都知道是隔行换色了，那就隔行换色就是了。方法很多。 最直接的在每一行的tr上直接加bgcolor="red"。 用css的话就定义行二个颜色的类。在每一行交替使用这个类就是了。如： tr class="trClass1" tr class="trClass2" New Document table{ width:100%; } .t1{ background:#ff6600; color:black; } .t2{ background:#336699; color:white; } ...[ 查看全文 ]
    瑶姐韩妆代购
    61
  • 用CSS实现网页的绝对居中
    标签：Web开发
    6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）： 代码：略 7.ff1.5 IE5 IE6通过测试 HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="//www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titleVertical centering in valid a class...[ 查看全文 ]
    艾瑟nice
    31
  • CSS教程：在网页布局中简单实现垂直居中的办法
    标签：Html CSS布局 Div+CSS XHTML
    英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。 译文内容 ： 当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。 旧的方法 经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上...[ 查看全文 ]
    点亮金身
    181
  • 利用vbs类实现css按钮的代码
    标签：Web开发
    % rem 文章标题： 利用vbs类实现css按钮 rem 作者：yanek rem 联系：aspboy@263.net Class CssButton Public Name Public BackColor Public BorderColor Public Font Public FontColor Public Width Public Text Public Url Public MouseOverColor Public Function GenerateStyleTag() 'Create the STYLE tag Dim strStyle strStyle = "STYLE TYPE=""text/css""" & vbCrLf & _ "!--" & vbCrL...[ 查看全文 ]
    水墨秋Q
    271
  • 用CSS实现文字垂直居中的代码
    标签：Web开发
    用CSS实现文字垂直居中的代码 style type="text/css" !-- .con_div{ width:400px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle; background:red; color:#fff } /*FOR IE*/ .webjx{ width:0; height:100%; display:inline-block; vertical-align:middle; } -- /style div class="con_div" span class="webjx"/span 测试内容 /div [ 查看全文 ]
    happy漂泊的人
    21
  • jQuery 行背景颜色的交替显示(隔行变色)实现代码
    标签：Web开发
    一些css的定义，可以根据需要自己选择。 //显示单双行显示不同背景色： // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色： $("#UL_id li:even").addClass("redClass"); ul id="UL_id" li单数/li li双数/li li双数/li /ul odd:单 even:双 jQuery 表格隔行变色代码 li隔行换色改进版 JS控制表格隔行变色[ 查看全文 ]
    天使之吻情趣
    211
  • jQuery 处理网页内容的实现代码
    标签：Web开发
    jQuery提供两种实现这种功能的方法 – text()和html()。text()是对纯文本的处理；html()和text()相似，不同的是它还支持HTML代码。 代码如下： //设置ID为"b5_a"段落的内容为"这是新加入的文本信息"; $('#b5_a").text("这是新加入的文本信息"); //在ID为"b5_b"的div里加入一段html代码； $("#b5_b").html("p新加入一个html段落/p"); 有时我们要读取页面的内容，这也可以用text()和html()来实现。同...[ 查看全文 ]
    tys333ddd369
    01
  • CSS自动实现网页打印版本
    标签：Web开发
    下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。 以下是引用片段： PUBLIC:COMPONENT SCRIPT /SCRIPT /PUBLIC:COMPONENT 2、写一个可执行的脚本。 在下面的代码中，ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来...[ 查看全文 ]
    娇哥home
    61
  • jQuery 添加/移除CSS类实现代码
    标签：Web开发
    其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！” 1. addClass() - 添加CSS类 代码如下： $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素的ID //...[ 查看全文 ]
    尋找那隻貓
    11
  • 网页中css内容换行控制
    标签：Web开发
    在进行DivCSS布局时，需要对文本进行控制,向大家介绍一下，CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果，以及单元格的noWrap效果，点此查看示例。 语法： white-space : normal | pre | nowrap 取值： normal： 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre： 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE ...[ 查看全文 ]
    MM求XO
    21
  • CSS轻松实现色块标题标识
    标签：Html CSS布局 Div+CSS XHTML
    不少网站开始采用韩式风格来建站，这种风格的特点是色彩变化丰富、应用动画合理、结构新颖，最明显的特点就是表格或标题栏常会加上一条 横或竖的色带 ，如图1中圈起来的地方就是这样。 一般人都会想到用Photoshop等软件来完成这样的效果，但如果网页上这类图片太多，或是较大时，会给访问带来一定的困难。这里就给大家讲一讲如何用CSS来做这样的风格，因为用CSS只是对颜色的定义，...[ 查看全文 ]
    劳资没空陪你耍
    1831
  • 利用PHP代码实现网页自动判断转向
    标签：PHP
    用户可接受的语言信息，放在$_SERVER[’HTTP_ACCEPT_LANGUAGE’]里，  变量信息是类似这样的 "zh-cn"， 如果是多语言列，是类似 "zh-cn,en;q=0.8,ko;q=0.5,zh-tw;q=0.3"  下面的问题可以迎刃而解了。  代码:  <?php  error_reporting(E_ALL ^ E_NOTICE);  // 分析 HTTP_ACCEPT_LANGUAGE 的属性  ...[ 查看全文 ]
    爱_樂
    241
手机页面
收藏网站 回到头部