Loading...
所在位置:
论坛首页
->
┈┋电脑网络技术区┋┈
->
网页制作技术
-> 帖子列表
[
详细列表
]
新的帖子
发起交易
任务悬赏
发起投票
精华贴
回收站
贴子审核
redrat
<<
>>
站长俱乐部
一个封装好的CSS分页导航栏
2008-7-6
page.css #channel-page{height:22px;margin:5px auto;padding:0px; text-align:center; line-height:20px; width:500px;} #channel-page ul#channel-page-show{ line-height:20px; margin: 0px auto; list-style-type: none; padding:0px; text-align:center; width:100%;&a...
[
依恬
] 点击:206 回复:0 最后更新: 2008-7-6 22:00:02
查看全文
详解CSS的优先权
2008-7-6
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 Specificity 具体的计算规则:元素的 style 样式属性,加 1,0,0,0。 每个 ID 选择符(#id),加 0,1,0,0。 每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。 每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。 其他选择符(例 全局选...
[
依恬
] 点击:144 回复:0 最后更新: 2008-7-6 21:59:31
查看全文
div+css实现圆角边框:
2008-7-6
div+css实现圆角边框:在网络上查看了一下div+css实现圆角边框,很多都是实现圆角的矩形的方法,我在这里介绍的是实现圆角矩形边框的方法。用代码说明问题:<html><head><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><...
[
依恬
] 点击:269 回复:0 最后更新: 2008-7-6 21:58:50
查看全文
css样式入门(建立样式模板)
2008-7-6
从来没有重视过css样式.也从来没有他细研究过,这次改项目的界面,可吃苦头了.好了,现学现卖了. 页面的 在<head>中间加上这个.<style>.nodata...{font-size:11px;color:red;}</style> 在页面上应用这个样式.<tr>&...
[
依恬
] 点击:192 回复:0 最后更新: 2008-7-6 21:58:26
查看全文
CSS工具列表集合
2008-7-6
I Like Your Color输入URL然后它会抓出其中的颜色并用16进制表示。 CSS Multi-element Rollover Generator使用CSS和一个图片创建出一个翻转按钮的样式。 CSS Rounded Box Generator Ruthsarian Layouts6个CSS页面布局模板,包括颜色、标题等。 Bluerobot Layout Reservoir2栏和3栏的CSS布局框架 Glish CSS Layout techniques2、3、 4栏的CSS布局框架 The Layout-o-matic输入页宽、栏数和padding,它会自动生成CSS和HTML的布局框架。 Little Boxesw3cn.org上提供的那些布局模板 Open Source Web Design各种免费的完整页面模板 Web Builders’ Toolkit更多的模版资源 Iconico Online CSS Scrollbar Color Changer List-u-Like一个CSS菜...
[
依恬
] 点击:164 回复:0 最后更新: 2008-7-6 21:57:42
查看全文
怎么让网站变灰
2008-7-6
为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼,国务院决定,2008 年 5 月 19 日至 21 日为全国哀悼日。在此期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。5 月 19 日 14 时 28 分起,全国人民默哀3分钟,届时汽车、火车、舰船鸣笛,防空警报鸣响。 很多网站都变成黑色了,像QQ 163等大型门户站也变了,他有的有css 皮肤,但是我们可以不用那种方法实现.有两种简单的方法. 第一: 最快速度把自己网站变灰,只支持IE~在CSS文件或style中加入*{filter:gray; color:gray;} 第二: html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}这个比 filter:gray;...
[
依恬
] 点击:188 回复:0 最后更新: 2008-7-6 21:56:47
查看全文
如何掌握CSS布局
2008-7-6
如何掌握CSS布局您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 111cn.cn 第一种可能是你还没有理解CSS处理页面的原理。 在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性束手无策。 111cn.cn 例如:cellpadding,、hspace、align="left"等等,不知道该转换成对应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,再给出一个列表,详细列出原来的表现属性用什么CSS来代替。 111cn.cn 结构...
[
依恬
] 点击:188 回复:0 最后更新: 2008-7-6 21:56:21
查看全文
css选择器的使用方法
2008-7-6
前面一篇文章介绍了css 选择器布局中HTML结构化css选择器样式,本节讲解如何使用巧妙的使用CSS选择器。css技巧 div css技巧与css布局技巧以及 如何使用css和css的使用和css样式的使用等css选择器的使用方法111cn.cn id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。 可以通过不同规则来定义不同内容块里的链接样...
[
依恬
] 点击:153 回复:0 最后更新: 2008-7-6 21:55:58
查看全文
如何设置图片自适应容器大小
2008-7-6
!DOCTYPE html 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-cn" lang="zh-cn"><head><title>演示</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="author" content="MarVel" />&...
[
依恬
] 点击:188 回复:0 最后更新: 2008-7-6 21:55:32
查看全文
透明文本输入框
2008-7-6
<body style="background:#000"><style>.input_search { width:199px; height:16px; border:0px; font-size:12px; color:#000000;}.str_seatext {width:230px; height:50px; padding:5px; color:#fff; position:relative; z-index:0;}.str_seatext div.bj{background:#fff; position:absolute; z-index:-1; left:0; top:0; height:100%; width:100%; opacity:0.3; filter:alpha(opacity=30);}</style><div class="str_seatext">name:<input type="text" name="textfield" id="textfield" c...
[
依恬
] 点击:227 回复:0 最后更新: 2008-7-6 21:55:02
查看全文
第十步:解决IE浏览器的显示BUG
2008-7-6
要继续此教程需要IE的以前的版本进行测试,绝大部分用户使用的是IE6.0,因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto,要实现层的中间对齐,需加入:Example Source Code [www.52css.com] body{font-family:Arial,Helvetica,Verdana,Sans-serif;font-size:12px;color:#666666;text-align:center;} 但是这样设置之后,网站的content层的文本也变成中间对齐了,我们需要让其向左对齐,加入:Example Source Code [www.52css.com] #page-container{width:760px;margin: ...
[
爱死你了杏
] 点击:179 回复:0 最后更新: 2008-7-6 21:45:28
查看全文
第九步:导航条的制作
2008-7-6
导航条之所以放在第九步讲,是因为导航条制作是本教程中最难的部分,自然也是技术含量最高的地方.导航条的制作可易可难,但这里介绍的相对较难,您能坚持到这一步已经很不易,如果你只是有个导航条就满足的话,请参看第八步的副导航条的制作。 先去掉导航条的红色背景,还有就是移除html文件中main-nav层的"class="hidden"",使导航条的内容显示出来。我们实现导航条图片的变换的方法是纯css代码的,不包含任何js或是flash,因此我们所用的图片是4幅分别由三个小图组合而成的图片,如下所示,并将这4幅图保存于/images/nav/文件夹中:(另存图片后改成相应的文件名) 我们实现导航条的动态效果如下...
[
爱死你了杏
] 点击:215 回复:0 最后更新: 2008-7-6 21:45:01
查看全文
第八步:页脚信息的表现设置
2008-7-6
首先需要控制页脚的文本显示:Example Source Code [www.52css.com] #footer{clear:both;height:66px;font-family:Tahoma,Arial,Helvetica,Sans-serif;font-size:10px;color:#c9c9c9;} 接着我们需要设置存在链接的文本的显示,在这我们没有改变文本的颜色(仍然为#c9c9c9),而只是让下划线消失:Example Source Code [www.52css.com] #footera{color:#c9c9c9;text-decoration:none;} 但是我们想让那些存在链接的文本,在鼠标悬停在其上方时变色为#db6d16:Example Source Code [www.52css...
[
爱死你了杏
] 点击:148 回复:0 最后更新: 2008-7-6 21:43:51
查看全文
第七步:网站头部图标与logo部分的设计
2008-7-6
为实现设计时的网页头部效果,我们需要以下两幅图:(点击另存,并相应修改文件名) /images/headers/about.jpg /images/general/logo_enlighten.gif 首先我们给#header层添加背景图案:Example Source Code [www.52css.com] #header{height:150px;background:#db6d16url(../images/headers/about.jpg);} 我们使用的背景属性为一些简写的属性名,用其能规定背景的颜色,图案,图案的位置,是否重复以及如何重复。之所以把背景色设为桔黄色,是因为当用户使浏览器屏蔽图片时,网站的头部不会变的一片空白。应该注意到图片的路径是相对于css的存放位置而言的,而不是html文件,因此有"...
[
爱死你了杏
] 点击:176 回复:0 最后更新: 2008-7-6 21:43:23
查看全文
第六步:页面内的基本文本的样式(css)设置
2008-7-6
你是不是厌倦了那些大红大绿的背景,现在是去掉它们的时候了,只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此,很好,再过几步,你就能很好了解css控制整个网页版面(Layout)的能力。 先设置全局的文本样式:Example Source Code [www.52css.com] body{font-family:Arial,Helvetica,Verdana,Sans-serif;font-size:12px;color:#666666;background:#ffffff;} 一般我们把body标签放在css文件的顶端,当然你要是执意要把它放在尾部,浏览器不会和你计较。font-family内的顺序决定字体显示优先级,比方如果所在计算机没有Arial字体,...
[
爱死你了杏
] 点击:167 回复:0 最后更新: 2008-7-6 21:42:49
查看全文
第五步:网页主要框架之外的附加结构的布局与表现
2008-7-6
除网页主要框架之外的附加结构的表现(Layout),包括以下内容: 1.主导航条; 2.标题(heading),包括网站名和内容标题; 3.内容; 4.页脚信息,包括版权,认证,副导航条(可选)。 加入这些结构时,为了不破坏原有框架,我们需要在css文件"body"标签(TAG)下加入:Example Source Code [www.52css.com] .hidden{display:none;} ".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用,现在请暂时忘记它。现在我们加入标题(heading): 先回到HTML的代码,<h1>到<h6>是我们常用的html标题代码...
[
爱死你了杏
] 点击:195 回复:0 最后更新: 2008-7-6 21:42:20
查看全文
第四步:网页布局与div浮动等
2008-7-6
1.浮动:首先让边框浮动到主要内容的右边。用css控制浮动。Example Source Code [www.52css.com] #sidebar-a{float:right;width:280px;background:darkgreen;} 表现如下:2.往主要内容的盒子中写入一些文字。在html文件中写入:Example Source Code [www.52css.com] <divid="content">Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.Praesentsapienpurus,&a...
[
爱死你了杏
] 点击:251 回复:0 最后更新: 2008-7-6 21:41:48
查看全文
第三步:将网站分为五个div,网页基本布局的基础
2008-7-6
1.将“第一步”提到的五个部分都放入盒子中,在html文件中写入:Example Source Code [www.52css.com] <divid="page-container"><divid="main-nav">MainNav</div><divid="header">Header</div><divid="sidebar-a">SidebarA</div><divid="content">Content</div><divid="footer">Footer&...
[
爱死你了杏
] 点击:309 回复:0 最后更新: 2008-7-6 21:41:17
查看全文
第二步:创建html模板及文件目录等
2008-7-6
1.创建html模板。 代码如下:Example Source Code [www.52css.com] <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/><title>CompanyName-PageName</title><metahttp-equiv="Content-Langu...
[
爱死你了杏
] 点击:386 回复:0 最后更新: 2008-7-6 21:40:22
查看全文
第一步:规划网站,本教程将以图示为例构建网站
2008-7-6
主要由五个部分构成:Example Source Code [www.52css.com] 1.MainNavigation导航条,具有按钮特效。Width:760pxHeight:50px2.Header网站头部图标,包含网站的logo和站名。Width:760pxHeight:150px3.Content网站的主要内容。Width:480pxHeight:Changesdependingoncontent4.Sidebar边框,一些附加信息。Width:280pxHeight:Changes&am...
[
爱死你了杏
] 点击:487 回复:0 最后更新: 2008-7-6 21:39:33
查看全文
什么是WEB标准?初学者了解WEB标准
2008-7-6
WEB标准 WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准: 1.结构标准语言 (1)XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org...
[
鞋的恋爱
] 点击:126 回复:0 最后更新: 2008-7-6 21:32:07
查看全文
CSS实战:用dl、dd、dt做一个网页表单
2008-7-6
昨天做了个表单,依旧用table来布局,因为个人感觉table布局表单是不错的(追求div重构,不等于完全抛弃table)。 今天早上起来,想想还是换种方式来做表单的布局。于是便选种了dl、dd、dt,如下: XHTML部分: <select name="select"><option>空气调节器</option></select> <span name="textarea" cols="100" rows="9"> 广州骏宝实业有限公司创始于1990年,是集科研、制造、销售、服务于一体,拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模...
[
鞋的恋爱
] 点击:153 回复:0 最后更新: 2008-7-6 21:31:47
查看全文
CSS样式表规划与管理的经验总结
2008-7-6
彻底放弃表格布局,使用xhtml+CSS建站也已经有一年多了。一年多的实践也积累了一定的经验,现在写这篇文章来总结一下。在使用xhtml+CSS建站的过程中有一个比较关键的问题:网站的CSS样式表规划与管理。我的CSS管理进化史 在最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼。那个时候,一个网站所有的CSS都在一个文件中,没有规划,并且排序也没多少规律,于是只能在html页面中找到class的名称,然后在上千行的css代码中搜索自己想要的那个。 过了一段时...
[
鞋的恋爱
] 点击:117 回复:0 最后更新: 2008-7-6 21:31:15
查看全文
Web标准入门指导,学习Web标准
2008-7-6
前言 "我的工资卡是交通银行的,但我经常在我家楼下的工商银行提款机上取款;我是上海人,我用普通话可以和广州的同学进行交流;今天水龙头坏了,我去水暖商店买了一个新的换上;我去法国旅游,通知我法国的朋友在北京时间15:30分来接我。" 生活中每天都发生类似的事情,这样的事情似乎再正常不过的了,并没有什么特别之处。但是,你有没有想过: 为什么所有银行卡的大小都是一样的尺寸?为什么我用普通话就能和广州同学交流?为什么买来的新水龙头的螺口正好与老的水管能接上?为什么法国朋友不会接错时间? 对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的“因素”在起作用,这个因素就是:标准。 ...
[
鞋的恋爱
] 点击:116 回复:0 最后更新: 2008-7-6 21:30:19
查看全文
CSS网站实用技巧:word-wrap同word-break的区别
2008-7-6
本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别。 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word; word-break:break-all;也不是word-wrap:break-word; overflow:auto;在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。 word-wrap同word-break的区别 word-wrap:normal Default. Content exceeds the boundaries of its container. break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。 word-break:normal&nbs...
[
鞋的恋爱
] 点击:125 回复:0 最后更新: 2008-7-6 21:30:00
查看全文
CSS注释、命名、继承性、样式排序等CSS技巧的小结
2008-7-6
一、关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/*注释内容*/”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的“/***************/”之类的注释是无意义的,没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率。二、关于命名 在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能...
[
鞋的恋爱
] 点击:133 回复:0 最后更新: 2008-7-6 21:29:44
查看全文
学习CSS从何入手技术
2008-7-6
引言: 不知从何时开始,CSS开始为国人重视起来。许多人都开始学习CSS,但又不知从何入手,所以此文就是给那些初学者所写,带他们踏上CSS列车。 一. CSS学习重在方法! 学习任何东西都是一样,从小学、中学、大学,除了学习知识外就是去学习方法! 要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的,花了一个月时间学习HTML,没有老师,书就是我唯一的老师,也没有上网的条件!一个月过后,我就开始学习CSS,刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂!,之后换了一本《HTML参考大全》,这本书是网页制作师的案头常备之书!之所以更换这本书来学习CSS,是因为这里面有一部分是CSS,就成了我...
[
鞋的恋爱
] 点击:176 回复:0 最后更新: 2008-7-6 21:19:37
查看全文
DIV与Table在大型网站的可用性比较
2008-7-6
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。g25中国教程在线 用DIV进行排版的优势就是我不说,大家应该都比较清楚。DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做。g25中国教程在线 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。g25中国教程在线 为什么DIV不适合他们?下面我从...
[
鞋的恋爱
] 点击:142 回复:0 最后更新: 2008-7-6 21:19:16
查看全文
Web站点上创建一个独立的与打印相关的页面
2008-7-6
大多数的Web页面都显示在电脑屏幕上,人们通过屏幕观看,但是,有时候用户想要将一些网上的内容打印出来,这就需要与打印媒体连接起来。由于原来采用的是能让Web页面在屏幕上显示的效果很好的那种格式,但在打印时效果并不那么好,Web创建者们通常都会创建一些独立的页面,这些页面与打印机联系紧密,而用户也需要经常打印这些页面。但如果你使用了XHTML标记和CSS,你就没必要再创建一个独立的与打印机相连接的页面了,你仅仅只需要几种CSS样式来将需打印的页面的内容进行格式化,以便于打印输出就行了。 以良好的标记开头 XHTML和CSS有一种特殊的功能,即内容与表述是各自独立的;你可以随意将其格式改成另一种媒体形式,...
[
鞋的恋爱
] 点击:106 回复:0 最后更新: 2008-7-6 21:18:52
查看全文
CSS实战:解决图片下面有空隙的简单的方法
2008-7-6
在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。 解决方法:在图片的css中加 vertical-align:bottom; 效果 演示代码: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>解决图片下有空隙</title></head><body><style>*{margin:0px;padding:0px;}#l1 {float:left;background:#000;padding:20px;margin:50px;}#l1 ul li {list-style:none;}...
[
鞋的恋爱
] 点击:115 回复:0 最后更新: 2008-7-6 21:18:29
查看全文
热门帖子
第4页 共222页 本页30条 主题数 6648
<<
>>
普通贴
精华贴
固顶贴子
总固顶贴子
商品贴子
投票贴子
结贴
锁帖
首页 | 购买指南 | 商业版本 | 虚拟主机 | 特色介绍 | 下载中心 | 支付方式
Copyright 2004-2008 BBSGood.com Powered By:
BBSGood.Speed Version 5.0
咨询电话:
0575-85513832、0575-85513825
(传真)、7*24小时咨询服务:
13606552007
不良信息举报中心 浙ICP备05029817号
业务QQ:
38958768
、客服QQ1:
415896239
、客服QQ2:
343896043
、MSN:
jccsxx@hotmail.com