不规则文字排版的CSS样式的定义参考方法

css|参考

  我们在网页设计中,会遇到许多意想不到的情况,不规则文字的排版就是其中之一了,我们该如何面对这样的排版要求呢?CSS代码又该如何编写呢?

  遇到这样的情况,通常情况下我们有两种选择:

  1、用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎很不友好,它不知道你这里到底有什么。

  2、用Flash来完成,还可以加上动感的特效,除了同样对搜索引擎不友好之外,还存在着用户是不是安装有flash播放插件的风险,以及浏览器对flash文件的屏蔽的问题。

  这两种方法都不是可靠的,遇到特殊的上网设备,更不能显示出来发挥它的作用。

  我们可以考虑用div+css来完成它。主要的思路就是用不同的容器,将容器进行定位来实现。虽然这样做非常的烦杂,而且不利于后期的更新维护,但可以收到很大的效果:显示速度快,更有语义,适合多种上网设备,有利于SEO对搜索引擎更加友好等。

  我们该如何制作不规则文字排版呢。我们可以首页定义一个容器,并设置一定的背景图片,在这个容器内,我们再加上不同的容器标签,如:h1、span、div、p等等。如果你的文字语义很明确,链接很重要,我们建议你直接用h1标签。

  对h1标签,应用不同的样式,设置不同的margin以进行定位,必要的时候可以设置z-index属性改变其层叠结构。不断的调整和完善就可以完成了。margin属性可以参考这里。 z-index属性可以参考这里。

时间: 2024-10-31 02:19:25

不规则文字排版的CSS样式的定义参考方法的相关文章

DIV CSS网页制作之不规则文字排版的CSS样式

css|网页 我们在网页设计中,会遇到许多意想不到的情况,不规则文字的排版就是其中之一了,我们该如何面对这样的排版要求呢?CSS代码又该如何编写呢? 遇到这样的情况,通常情况下我们有两种选择: 1.用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎很不友好,它不知道你这里到底有什么. 2.用Flash来完成,还可以加上动感的特效,除了同样对搜索引擎不友好之外,还存在着用户是不是安装有flash播放插件的风险,以及浏览器对flash文件的屏蔽的问题. 这两种方法都不是可

DIV CSS解决不规则文字排版

  网页设计时遇到不规则文字排版问题,通常通常情况下我们有两种选择,但是这两种方法都不是可靠的,遇到特殊的上网设备,更不能显示出来发挥它的作用.这里向大家介绍一下使用DIV CSS解决此问题. DIV CSS解决不规则文字排版问题 我们在网页设计中,会遇到许多意想不到的情况,不规则文字排版就是其中之一了,我们该如何面对这样的排版要求呢?DIV CSS代码又该如何编写呢? 遇到这样的情况,通常情况下我们有两种选择: 1.用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎

jsp页面中插入css样式的三种方法总结

 本篇文章主要是对jsp页面中插入css样式的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. 外部样式   当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部:   <head> <link rel="stylesheet"  type="text/css&qu

用JavaScript动态建立或增加CSS样式表的实现方法_javascript技巧

1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ;  //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

CSS实战:写CSS样式表的参考标准实战

文章简介:点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 当谈到CSS,我相信神圣的原则--点分离(SoC).他已经让我们接受膨胀.报废.冗余.缓存甚至更多.现在,我确信唯一的方法是远离这一原则来改善我们的作者样式表. 对于从未听说过SoC原则在Web设计中的上下文,它涉及到一些俗称"三层分离": 结构 表现 行为 为了避免一些担忧,将它划分成独立的资源:一个HTML文档,一个或多个样式文件和一个或多个Ja

jQuery操作元素css样式的三种方法_jquery

我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q

jquery设置css样式最快的方法

测试环境是火狐,IE 没测. 直接给出结果: 最快的 是     function setCss(eLs,name,val){ } 这种设置style的方法,其次是改变类名,最慢就是 css() 建议简单操作样式使用 style的方法,大量css,并且要方便用户自己制作皮肤的话,应该还是改变类名比较好.    代码如下 复制代码 console.time("改变类名");     $("p").addClass("a");     console

CSS样式表定义标签li

定义LI前面的小点样式  view plaincopy to clipboardprint? 语法:   list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragan

添加css样式的三种方法

 一,行内式样式(Inline Style) 即使用style属性,将CSS直接写在HTML标签中. 例如:<p style="color:red">这行段落将显示为红色.</p> 注意:style属性可以用在<body>内的所有(X)HTML标签上,但不能应用与<body>以外的标签,如<title><head>等标签. 二,嵌入式样式表(Embedded Style Sheets) 嵌入式样式表使用"