CSS样式定义不规则文字排版

开发 前端
我们在网页设计中,会碰到许多意想不到的情况,不规则文字的排版就是其中之一,这里向大家描述一下如何CSS样式如何定义不规则文字排版。

这里向大家描述一下CSS样式如何定义不规则文字排版,通常有两种方法解决,但是这两种方法都不是可靠的,所以我们采用DIV CSS来完成它,主要的思路就是用不同的容器,将容器进行定位来实现。

CSS样式如何定义不规则文字排版

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

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

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

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

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

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

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

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

【编辑推荐】

  1. CSS中块元素和内联元素的区别
  2. 解析CSS类class及id规范化命名
  3. 详解CSS定位属性Position用法
  4. CSS2.0中page-break-after属性用法
  5. 探究CSS中border:none;与border:0;的区别

 

责任编辑:佚名 来源: mb5u.com
相关推荐

2010-09-14 10:34:17

DIV CSS

2022-12-22 08:34:22

CSS不规则图形

2015-07-17 13:31:20

按钮单独控制

2010-09-01 14:20:19

CSS排版

2010-09-14 11:11:09

DIV+CSS样式表

2011-05-12 16:30:44

自定义滚动条

2010-08-30 13:29:06

超链接CSS

2011-06-20 17:06:56

Qt Widget

2009-08-26 09:48:14

DIV+CSS样式表命

2010-08-24 13:05:23

CSS超链接

2009-07-10 11:31:45

Swing支持透明和不规则窗口

2012-12-28 14:23:12

Android开发TextView

2022-05-27 07:51:07

自定义无序列表CSS

2010-09-13 13:21:29

CSS排版

2010-09-14 10:41:24

DIV+CSS排版

2010-03-26 09:32:54

CSS

2017-07-20 11:11:39

前端CSS书写规范

2021-03-30 07:47:46

SVG 滤镜 CSS技巧

2010-08-31 09:46:23

C#

2009-12-25 10:20:28

WPF窗口
点赞
收藏

51CTO技术栈公众号