<style>#a{border-left:1px #333 solid;border-right:1px #333 solid;width:300px;height:500px;}.b{height:1px;overflow:hidden;border-left:1px #333 solid;border-right:1px #333 solid;}</style></head><body><div><div class=''b'' style=''margin-left:3px;width:294px;background:#333''></div><div class=''b'' style=''margin-left:2px;width:296px;''></div><div class=''b'' style=''margin-left:1px;width:298px''></div><div id=''a''>
以我的能力,纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方,自己看一看代码的规律,很容易明白。<br/>代码很简单,a层为放置内容的层,其width值为300,然后向外以2像素的宽度递减。最外一层要加上background为个属性,目的是要将上、下两线条呈现出来。<br/>
这里实现了3像素的圆角边框,b层的数量决..
[] []
<HTML><HEAD><link ID=''skin'' rel=''stylesheet'' type=''text/css''><TITLE>换肤技术(From:)</TITLE><SCRIPT LANGUAGE=javascript><!--function SetCookie(name,value){var argv=SetCookie.arguments;var argc=SetCookie.arguments.length;var expires=(2<argc)?argv:null;var path=(3<argc)?argv:null;var domain=(4<argc)?argv:null;var secure=(5<argc)?argv:false;document.cookie=name+''=''+escape(value)+((expires==null)?'''':(''; expires=''+expires.toGMTString()))+((path==null)?'''':(''; path=''+path))+((domain==null)?'''':(''; domain=''+domain))+((secure==true)?''; secure'':'''');}
function GetCookie(Name) {var search = Name + ''='';var returnvalue = '''';if (document.cookie.length > 0) {offset = document.cookie.indexOf(search);if (offset != -1) { offse..
[] []
background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值.no-repeat: 即无论背景图片的大小, 只显示单个背景图片, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;repeat: 指背景图片横向和纵向重复连续显示;repeat-x: 指背景图片横向重复连续显示;repeat-y 指背景图片纵向重复连续显示;例: 查看本站css文件,可以看到以下代码:body {font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(images/bodybg.jpg) repeat-y;}可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.
[] []
一、Servlet类
import java.io.IOException;import java.sql.Connection;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import util.HtmlPage;import util.Mail;import util.PubFun;public class CssCtrl extends HttpServlet ...{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException ...{ String jspStr = ''Page参数不能为空''; Connection conn = null; resp.setContentType(''text; charset=UTF-8''); HtmlPage page = new page.newadmin.LoadTemplatePage();//initHtmlPage(req.getParameter(''cssid'')); ..
[] []
在 <head> 与 </head> 之间加入:
<SCRIPT language=JavaScript> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = '/images/b-26.gif' //显示的图片路径,可用http:// bg = '/images/b-19.gif' bg = '/images/b-3.gif' index = Math.floor(Math.random() * bg.length); document.write(''<BODY BACKGROUND=''+bg[index]+''>''); </SCRIPT>
[] []
<style type=''text/css''> .alpha{filter:alpha(opacity=30);width:400px;} </style> <div width=''1024'' height=''768''> <img src=''C:\\webstudy\\Pic\\2.jpg'' class=''alpha''/> </div> <div style='' position:absolute;left:0px; top:0px''> <font color=red>asdfasdfd</font> <br><br><br><br>sdfsdfsdfsdfsdf<br><br><br> </div> 或者: <style type=''text/css''> .alpha{filter:alpha(opacity=30);width:400px;} </style> <div style=''position:relative'' width=''1024'' height=''768''> <img src=''My Pictures/q-1.jpg'' class=''alpha''/> <div style=''position:absolute;left:0px; top:0px''> <font color=red>asdfasdfd</font> <br><br><br><br>sdfsdfsdfsdfsdf..
[] []
CSS是“Cascading Style Sheets”的简称,中文翻译为“串接样式表”,也有人翻译为“样式表”。CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用是相当重要的一个内容。CSS的作用是弥补HTML的不足,让网页的设计更为灵活。
这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为推进web标准贡献自己的微薄之力。
说点我自己的体会,现在有好多人都在推广WEB标准,其实对初学者来说,不需要刚学的时候就学标准,学点简单的还是容易入门的,因为现在HTML还在照样用啊,所以我希望初学者学习时不要非遵循标准,当你入门之后,你做网页的时候,发现使用表格特麻烦的时候你就该去寻求简单方法了,到时再学也不晚啊,如果你喜欢新技术那么你初学时就学标准吧,按个人的实际来行动吧。下面开始学习了
一、如何在HTML中应用CSS。
您可以利用下列 3 种方式将 CSS 指定的格式加入到HTML中:
1...
[] []
最经做一个项目系统使用div+css来控制前台显示界面发现在各个浏览器下显示的效果由很大的出入,现在找一些关于div+css关于浏览器的一些资料做一个汇总,也算是对div+css知识的一个学习。 区别火狐和IE时最常用的是!important方法,对于其他不同浏览器和浏览器的不同版本的的兼容性问题还有下面一些方法,比如:@import,注释,属性选择符,子对象选择符和voice-family等方法,这些方法在《css网站布局实录》中有讲述.下面是IE和火狐的css兼容性问题1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要..
[] []
直入正题,现在有这么一个表格: 请实现鼠标移到交易内容区域时,高亮当前行背景的效果。 1、建立一分标准的HTML文档结构 谈到标准HTML结构,有人可能会说,嗯,用div标签,里面再多套些li,最后用css来个float也就能排成这样的结构了。其实真正标准的结构并不是说一定要用div来布局,而是要尽量使用语义化的HTML标签。在HTML标签的定义中div与span其实是两个没有语义的标签,table则有数据表的语义。 所以这里我们来建一张符合XHTML 1.0 Strict标准的文档结构试试。以下为该表结构的HTML代码: 其中需要注意的是: 你需要使用<thead />、<tbody />、<tfoot />等标签,分别对应的含义是表头区域,表主体内容,表底部区域。 表头区域的单元格你应该使用<th />而非<td /> <tfoot />标签块应该在<thead />与<tbody />之间,否则无法通过W3C标签验证 再给它们加上样式: .tableList {
..
[] []
当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何实现当前页。
设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一 个ID,m1-m5,CSS可写成如下:
#home #nav li#m1 a,
#about #nav li#m2 a,
#products #nav li#m3 a,
#services #nav li#m4 a,
#contact #nav li#m5 a{ color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat; }
xhtml:
<ul id=''nav''>
<li id=''m1''><a href=''index.html''>Home</a></li>
<li id=''m2''><a href=''about.html''>About</a></li>
<li id=''m3''><a href=''products.html''>Products</a></li>
<li id=''m4''><a href=''services.html''>Services</a></li>
<li id=''m5''><a hre..
[] []
目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果。对于前端开发工程师来说,圆角的确是一个让人又爱又恨的东西,一方面顾及设计师追求的美观效果,另一方面又不得不增添很多工作投入。无意中看到别人写的一个用纯粹css来实现的圆角效果,研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法。总结了一下,可以实现自适应的纯css圆角效果。 首先,我们看一下一般圆角的结构: 从下图可以明显看出圆角和直边的关系,其实把圆角放大之后可以看到圆角是由像素化的直边组成的: 于是就有了css实现圆角的思路,就是通过用1px 的水平线条来堆叠出圆角,其中border和background的颜色填充来实现圆角边框,同时设置不同的左右margin数值(以1px为基数)来实现错位,从而整体上实现了简单的圆角效果。 下面介绍一下代码: html部分(思路是“头部+内容+底部”):<div>
<bcla..
[] []
我们在做表单的情况下,input、textarea、button的样式比较容易定义,select和input file的样式难以定义。 input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观: 如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。 按照作者的方法,我也试验了一下,代码如下: <!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" /..
[] []
很多人到处寻求个使用DIV+CSS制作出圆角矩形的方法,使用底下的一段代码你就可以轻松实现这个很拽的圆角矩形了。<style>div.bg{background:#ffc20e;width:50%}b{display:block;}
/*将所有B标签转成块级元素*/
div b.topb b,div b.bottomb b
{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px,
溢出部份隐藏,背景色同div.bg的背景色*/
div b.topb,div b.bottomb{ background-color:white}
/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/
b.t1{margin:0 5px}
/*标签margin值将决定溢出的多少值被隐藏
*/b.t2{margin:0 3px}b.t3{margin:0 2px}b.t4{margin:0 1px;height:2px;}
</style>
<div align="center"><div class="bg">
<b class="topb">
<!--**此b标签所包含的b标签要进行溢出隐藏**--><b class="t1">
</b><b cla..
[] []
问题的分析 1 杀毒前关闭系统还原:右键 我的电脑 ,属性,系统还原,在所有驱动器上关闭系统还原 打勾即可。 清除IE的临时文件:打开IE 点工具-->Internet选项 : Internet临时文件,点“删除文件”按钮 ,将 删除所有脱机内容 打勾,点确定删除。 以下的操作都要求安全模式下进行。 [安全模式?重启电脑时按住F8 选择进入安全模式] -------------------------------------------------------------- 2 SRENG删除如下各项 SRENG下载地址:http://down.ddvip.com/view/11527900524081.html 方法 http://hi.baidu.com/teyqiu/blog/item/f706213fc52346ec54e72351.html 启动项目 -->注册表 [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionRun] <wsctf.exe><wsctf.exe> [] <EXPLORER.EXE><EXPLORER.EXE> [Microsoft Corporation] 启动项目 -->服务-->Win32..
[] []
好久没弄弄美工了,前端时间由于学校的一个小网站的老师需要网站整体为绿色风格,但是他们又不能提供相关素材,这个 项目就一直拖着,需求也定不下来。后台基本功能都已经哦了,就等页面了,本来是想好好学学别的东西,巩固下Java一些基础,但是这事拖着,还是够不爽的。security框架的例子也不好弄,于是还是决定总结一下最近学习的CSS滤镜。Css滤镜比较帅,可以取代一部分PS才能实现的效果,但是缺点也比较明显,浏览器并不是都支持。但考虑到IE6,7...占的市场份额还是挺很大的,所以有学习的必要。网上不缺CSS滤镜的知识,但是大多是长篇大论,或不够全面。现在结合自己做的例子和网上的资料,自己的学习心得总结如下。毕竟我不是专业搞美工,所以这篇随笔,是基本是面向初学者,并使其快速掌握。也了解现在的CSS都能做什么。 为了充实内容,顺便给出jQuery实现弹出层特效的源码。 CSS(Cascading Style Sheets) 层叠样式表单。1998年5月12日,Cas..
[] []
重置默认样式
最近看到一个词叫css reset。什么叫做css reset呢?我理解为重置css,也就是重置默认样式。我在HTML下的默认样式中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset)。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章, 可以看看国外使用css reset的比例调查。
这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看。
译文地址查看
原文地址查看
接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css reset怎么写的?
淘宝(www.taobao.com):
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-c..
[] []
我们在做表单的情况下,input、textarea、button的样式比较容易定义,select和input file的样式难以定义。
input file在系统默认下的外观:
我们最多通过定义input的border来改变系统默认的外观:
如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。
按照作者的方法,我也试验了一下,代码如下:
<!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..
[] []
层的定位是很多人比较困扰的问题,点击弹出层会随着分辨率的改变层的位置也变动。
用实际截图来描述问题现象:
那么怎样让层固定在一个位置,不管分辨率或窗口改变而变化呢?这就是我所要记录的层的定位问题:
建立一个父级div,不改变x、y,然后在这个父级div里面包含一个子级div,在这个子级div里随便改变它的位置(设置top和left值)。
实例阐述:
<!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>关于层的定位</title>
</head>
<body>
<div style="width:800px; margin:0 auto; background:#FFFFCC; overflow:auto; f..
[] []
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。
CSS技巧
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如:
<#div id=”imfloat”>
相应的css为
#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 1..
[] []
有朋友使用DIV居中,但是却发现DIV居中失灵了,是怎么回事呢?下面给大家解决一下问题,呵呵! 1、一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 就可以了!其实其他很多css的问题也是因为没有加上dtd语句引起的。 2、使用margin来让DIV居中 最简单的写法就是: .divstyle{ margin:0 auto; } 复杂一些就把左右边距都加上: .divstyle{ margin-left:auto; margin-right:auto; } 这样就可以试想DIV居中了!
[] []
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/} 3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生2..
[] []
病毒子文件gdipro.dll、rpcss.dll、sys17002.dll会被释放到%WINDOWS%SYSTEM32目录下,并写入注册表启动项,实现开机自 启动。其中gdipro.dll和rpcss.dll会被用于替换掉系统自身一个名为rpcss.dll的文件及其备份,使得病毒能够躲避系统安全模块和 安全软件的查杀。但也正因如此,当查杀该毒时,系统就可能因失去rpcss.dll文件而运行异常,比如网络中断、无法粘贴文档等。 而sys17002.dll则负责盗取帐号信息,盗取成功后就将赃物加密发送到病毒作者指定的地址。 用户如果进行手动查杀,需要将上述几个文件全部删除,然后将系统文件“C:WINDOWSsystem32srpcss.dll”改名为“C:WINDOWSsystem32rpcss.dll”,以恢复系统自身功能。同时,需对注册表做以下两项修改: 将“HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesrpcssObjectName”改为“NTAUTHORITYNetworkService”。 将“HKEY_LOCAL_MACHINE..
[] []
很多CSSer是从以前的网页制作中开始学习CSS网页布局的,或许还存在着一定的DW习惯。希望此文能帮助大家理解和纠正一些不好的习惯。
由于“可视化”和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的“最佳习惯”,希望对大家有所帮助。
CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。
一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:
代码式(Inline):写入到代码中的一次性的样式。
内嵌式(Embedded):可控制一个页面中所有元素的样式表
外联式(External):可控制许多页面中的元素的样..
[] []
通常的web页面中,我们要求打印结果和显示结果一样,但在一些报表或业务系统中,我们可能只需要打印页面中的一部分内容,例如我只要打印数据,但按钮和背景不需要打印,这是由业务需求决定的,我们可以想象一下,如果一张打印出来的发票中出现一个按钮,你会怎么想,估计要昏过去的,呵呵~~好了,说完需求,我来说说如何实现,一种方法是为屏幕显示和打印分别准备一个css文件,如下所示:用于屏幕显示的css:
<link rel=''stylesheet'' href=''css/mainstylesheet.css'' media=''screen'' />用于打印的css:
<link rel=''stylesheet'' href=''css/printstylesheet.css'' media=''print'' /> 注意,这两个css是放在一个web页面里面的。还有一种是import方式:
<style type=''text/css''> @import url(''css/printstylesheet.css'') print;</style>最后一种写法是可以直接把屏幕显示样式和打印样式写在一个css文件中:
@medi..
[] []
本文示例源代码或素材下载
Title:模拟OneNote2007标签功能Demo Author:JustinYoung(杨正祎) Keywords:web标准,tab标签,this.event.srcElement,srcElement,tag,onenote2007 Note:为了快速模拟的原因,所以JavaScript设计的不好.请见谅.此demo来源于JustinYoung的博客YES!B/S! 本来项目准备用wizard控件来实现的,但是发现wizard的实现真的和web标准是格格不入.前台产生的全部都是 table套table.wizard的控件本身提供的对外观的可控性又比较低.当然这些都是次要原因.主要的是业务需求 发现没有必要再利用wizard控件了.所以就绝对自己做一套类似OneNote2007的tab页面来.这里只是一个小的 Demo,也只实现了最基本个功能.其中还有很多不完善的地方.特别是JavaScript的设计,因为想快速的看到效果, 所以有很多不合理的地方,请见谅. 网速慢的时候,如果实现此效果,应该将图片先预载. This Demo can't show in FF well...
[] []
案例分析 以下均是断网环境下。 原LOG 见附件1 这个案例以前见过很多,例如 >> HBKernel32.sys,System.exe,wrm32.dll(virus.win32.alman.b)的清除指南【原创】 http://hi.baidu.com/teyqiu/blog/item/c7f090525309dd080cf3e35e.html 由于感染rpcss.dll这个系统文件,使得处理起来难度较大。 除了利用http://hi.baidu.com/teyqiu/blog/ ... f9f9b50f2444d2.html 中的方法外,还需要对rpcss.dll进行处理。 在不处理rpcss.dll的情况下,病毒会再次重生。。汗。 本次是这样做的 0、不再说这个垃圾下载的其他木马集群了 那个处理起来没难度。 1、xdelbox或者病毒杀灭机指令干掉rpcss.dll文件 (此步可考虑用下载最新的Dr.Web 大蜘蛛来重命名) 2、禁用或删除RpcSs和DcomLaunch服务 3、系统还能进,只是很多操作无法进行了,所幸还能用copy 将未感染的同系统的rpcss.dll和userint.exe文件拷贝到 c:windowssystem3..
[] []
在Web应用中有很多数据、图表的表现方式,尤其在一些数据统计应用比较广泛的网站后台,可以直观表现数据的图表应用更是不可缺少的一个重要部分。摒弃图片的实现方法,使用纯碎的CSS样式去表现data的统计变化,能更好的增加网站的可访问性和管理的可操作性。
现在,菠菜博为你介绍8个优秀的CSS实现数据图表的应用实例。
1,CSS线条图表数据
这个实例包含了三种图形数据的实现方法。上面的Basic Bar Graph实例中使用了一个<div>包含图表,一个<strong>元素作为柱形的block,然后再使用百分比来控制柱形的宽度,这种方法中一个优点就是使用了<strong>元素而不是段落<p>元素。另外两个例子则是使用了定义列表dl和无序列表ul实现。
访问实例1
2,符合标准的可访问的可视化数据图表
作者Wilson Miner研究数据图表的Web accessible可访问性概念和标准兼容性技术,涉及优势、限制或是说两者取长补短的折中用法。这里有三个使用无..
[] []
如果说是Table把我带入了网站设计的大学的话,那么DIV+CSS则把我带入了Web设计的殿堂。虽然现在的Web设计者都在推崇DIV+CSS的网站设计,但不落入盲目应用的队列,灵活运用Table的特色来做一些前台的功能效果的话,那可能会让你的工作进程大大的缩短,并减少很多不必要的冗余CSS代码。
Table表格本身就是Html网站设计中最基本的组成部分,还记得刚开始在FrontPage里欣喜地用一个Table框画出的简单页面吗?那时的我们就已经在为Table的无所不能而折服了。而在现在的DIV+CSS页面设计中,很多人将Table的概念抛之脑后,统统使用DIV+CSS来实现所有页面排版,从而,在一些列表设计中凭白增加了CSS代码的比重,其实,灵活地把Talbe应用到DIV+CSS网页标准中去,会受益更多。
本文菠菜搜集介绍了一系列的Table设计及应用技巧,希望在你的项目开发中可以很好地融汇应用进去,提高你的页面灵活度和可读性。
让我们从一个简洁的Table设计实例开始吧!
1,FLUIDMIND.OR..
[] []
直入正题,现在有这么一个表格:
请实现鼠标移到交易内容区域时,高亮当前行背景的效果。
1、建立一分标准的HTML文档结构
谈到标准HTML结构,有人可能会说,嗯,用div标签,里面再多套些li,最后用css来个float也就能排成这样的结构了。其实真正标准的结构并不是说一定要用div来布局,而是要尽量使用语义化的HTML标签。在HTML标签的定义中div与span其实是两个没有语义的标签,table则有数据表的语义。
所以这里我们来建一张符合XHTML 1.0 Strict标准的文档结构试试。以下为该表结构的HTML代码:
交易类型
交易号
收款方
金额
管理
2 3 4
即时到账
20081009001
..
[] []
看到淘宝网页中大部分是这样写的
<style type=''text/css'' media=''screen''>
@import url(''http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css'');
</style>
而很多网站使用的都是link
<link rel=''stylesheet'' rev=''stylesheet'' href=''default.css'' type=''text/css'' media=''all'' />
而像google 百度 163等网站他们都是直接写在网页中
当然使用链接link和导入import的好处就是易于维护,但当网速比较慢的时候,会出现加载中断的情况,导致页面排版错误
他俩的作用相同
唯一的不同是服务对象不一样
@import 为CSS服务
link是为当前的页服务
经典有网友说 @import会优先执行。
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import。
本质上,这两种方式都是为了加载CSS文..
[] []
[] [] [] [] [] [] []
[] [] [] [] []
版权所有 2006-2008 保留所有权利 湘ICP备06008262号