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

栏目：古籍资讯发布：2023-08-20浏览：1收藏

不规则文字排版的CSS样式如何定义？,第1张

　我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。

　　创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。但这样有意义吗？

　　现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。

#nav {

height: 30px;

width: 100%;

background-color: #c00;

}

#nav ul {

margin: 0 0 0 30px;

padding: 0px;

font-size: 12px;

color: #FFF;

line-height: 30px;

white-space: nowrap;

}

#nav li {

list-style-type: none;

display: inline;

}

#nav li a {

text-decoration: none;

font-family: Arial, Helvetica, sans-serif;

padding: 7px 10px;

color: #FFF;

}

#nav li a:hover {

color: #ff0;

background-color: #f00;

}

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。有三种方法可以在站点网页上使用样式表：外部样式表、内部样式表和内联样式。

CSS具有精简代码，降低重构难度、提升网页访问速度、利于SEO优化等优势，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<h1>

图书分类

</h1>

<a title="小说"

href="http://bookdangdangcom/0103htmref=book-01-A">小说</a>

</h3>

<a class="first" title="悬疑"

href="http://listdangdangcom/book/010338htmref=book-01-A">悬疑</a><a

title="言情"

href="http://listdangdangcom/book/01034401htmref=book-01-A">言情</a><a

title="历史"

href="http://listdangdangcom/book/010351htmref=book-01-A">历史</a><a

class="last" title="社会"

href="http://listdangdangcom/book/010345htmref=book-01-A">社会</a>

</div>

<h3>

<a title="文艺"

href="http://bookdangdangcom/0105htmref=book-01-A">文艺</a>

</h3>

<a class="first hot" title="文学"

href="http://bookdangdangcom/0105htmref=book-01-A">文学</a><a

title="传记"

href="http://bookdangdangcom/0138htmref=book-01-A">传记</a><a

title="艺术"

href="http://bookdangdangcom/0107htmref=book-01-A">艺术</a><a

class="last" title="摄影"

href="http://categorydangdangcom/all/category_path=010705000000&amp;ref=book-01-A">摄影</a>

</div>

<h3>

青春

</h3>

<a class="first" title="青春文学"

href="http://bookdangdangcom/0101htmref=book-01-A">青春文学</a><a

title="动漫"

href="http://bookdangdangcom/0109htmref=book-01-A">动漫</a><a

class="last" title="幽默"

href="http://listdangdangcom/book/010920htmref=book-01-A">幽默</a>

</div>

<h3>

<a title="励志/成功"

href="http://bookdangdangcom/0121htmref=book-01-A">励志/成功</a>

</h3>

<a class="hot" title="职场"

href="http://listdangdangcom/book/012108htmref=book-01-A">职场</a><a

title="成功"

href="http://listdangdangcom/book/012102htmref=book-01-A">成功</a><a

title="人际"

href="http://listdangdangcom/book/012109htmref=book-01-A">人际</a><a

class="last" title="心灵修养"

href="http://listdangdangcom/book/012103htmref=book-01-A">心灵修养</a>

</div>

<h3>

<a title="少儿"

href="http://bookdangdangcom/childrenref=book-01-A">童书</a>

</h3>

<a title="0-2"

href="http://bookdangdangcom/children/0-2ref=book-01-A">0-2</a><a

title="3-6"

href="http://bookdangdangcom/children/3-6ref=book-01-A">3-6</a><a

title="7-10"

href="http://bookdangdangcom/children/7-10ref=book-01-A">7-10</a><a

title="11-14"

href="http://bookdangdangcom/children/11-14ref=book-01-A">11-14</a><a

class="hot" title="科学"

href="http://bookdangdangcom/children/014105htmref=book-01-A">科学</a><a

title="图画书"

href="http://bookdangdangcom/children/014143htmref=book-01-A">图画书</a><a

title="文学"

href="http://bookdangdangcom/children/014127htmref=book-01-A">文学</a><a

class="last" title="英语"

href="http://bookdangdangcom/children/014151htmref=book-01-A">英语</a>

</div>

<h3>

</h3>

<a class="first" title="两性"

href="http://bookdangdangcom/0116htmref=book-01-A">两性</a><a

title="孕期"

href="http://bookdangdangcom/0106htmref=book-01-A">孕期</a><a

title="育儿"

href="http://bookdangdangcom/0117htmref=book-01-A">育儿</a><a

class="hot" title="亲子关系"

href="http://bookdangdangcom/0115htmref=book-01-A">亲子关系</a><a

title="保健"

href="http://bookdangdangcom/0118htmref=book-01-A">保健</a><a

title="运动"

href="http://bookdangdangcom/0119htmref=book-01-A">运动</a><a

title="美妆"

href="http://bookdangdangcom/0111htmref=book-01-A">美妆</a><a

title="手工DIY"

href="http://bookdangdangcom/0120htmref=book-01-A">手工DIY</a><a

title="美食"

href="http://bookdangdangcom/0110htmref=book-01-A">美食</a><a

class="hot" title="旅游"

href="http://bookdangdangcom/0112htmref=book-01-A">旅游</a><a

title="休闲"

href="http://bookdangdangcom/0104htmref=book-01-A">休闲</a><a

title="家庭家居"

href="http://bookdangdangcom/0114htmref=book-01-A">家庭家居</a><a

class="last" title="风水占卜"

href="http://bookdangdangcom/0123htmref=book-01-A">风水占卜</a>

</div>

<h3>

<a title="人文社科"

href="http://staticdangdangcom/book/contents/1890/9732htmlref=book-01-A">人文社科</a>

</h3>

<a class="hot" title="历史"

href="http://bookdangdangcom/0136htmref=book-01-A">历史</a><a

title="古籍"

href="http://bookdangdangcom/0132htmref=book-01-A">古籍</a><a

class="hot" title="哲学/宗教"

href="http://bookdangdangcom/0128htmref=book-01-A">哲学/宗教</a><a

title="文化"

href="http://bookdangdangcom/0134htmref=book-01-A">文化</a><a

title="政治/军事"

href="http://bookdangdangcom/0127htmref=book-01-A">政治/军事</a><a

title="法律"

href="http://bookdangdangcom/0126htmref=book-01-A">法律</a><a

title="社会科学"

href="http://bookdangdangcom/0130htmref=book-01-A">社会科学</a><a

class="last hot" title="心理学"

href="http://bookdangdangcom/20130204_hmvwref=book-01-A">心理学</a>

</div>

<h3>

经管

</h3>

<a class="first" title="经济"

href="http://bookdangdangcom/0125htmref=book-01-A">经济</a><a

title="管理"

href="http://bookdangdangcom/0122htmref=book-01-A">管理</a><a

class="last hot" title="投资理财"

href="http://bookdangdangcom/0124htmref=book-01-A">投资理财</a>

</div>

<h3>

</h3>

<a class="first hot" title="科普"

href="http://bookdangdangcom/0152htmref=book-01-A">科普</a><a

title="建筑"

href="http://bookdangdangcom/0155htmref=book-01-A">建筑</a><a

title="医学"

href="http://bookdangdangcom/0156htmref=book-01-A">医学</a><a

class="hot" title="计算机"

href="http://bookdangdangcom/0154htmref=book-01-A">计算机</a><a

title="农林"

href="http://listdangdangcom/book/0166htmlref=book-01-A">农林</a><a

title="自然科学"

href="http://bookdangdangcom/0162htmref=book-01-A">自然科学</a><a

title="工业"

href="http://bookdangdangcom/0163htmref=book-01-A">工业</a><a

class="last" title="通信"

href="http://listdangdangcom/book/016307htmlref=book-01-A">通信</a>

</div>

</BODY>

</HTML>

结果如下

很抱歉，没有你的这个语法：

语法：writing-mode : lr-tb、tb-rl

　　参数：lr-tb：从左向右，从上往下tb-rl：从上往下，从右向左

　　示例：div { writing-mode: tb-rl; }

<div style="width:500px;

color:#FF0000;text-decoration:underline;text-transform:capitalize;

text-shadow:#000000 10px 10px 50px; line-height:19px;

writing-mode:tb-rl;">

writing-mode:tb-rl，table标签不具有此属性，

</div>

最后一点要说明的是“writing-mode”目前只有IE浏览器支持，Nestscape、ff浏览器不支持！

方法有很多种，是我就采用以下几种方式之一：

方式一：table布局

这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗

{

margin: 0;

padding: 0;

}

personName{

text-transform: uppercase;

}<table>

<tr>

<span class="personName">Georage：</span>

</td>

</td>

</tr>

<tr>

</td>

</td>

</tr>

</table>

方式二：利用dl标签

{

margin: 0;

padding: 0;

}

personName{

text-transform: uppercase;

float: left;

width: 80px;

clear: left; / 清除左浮动 /

}

words{

float: left;

}

dailog{

overflow: hidden; / 可以清除浮动 /

margin-bottom: 20px;

line-height: 24px;

font-size: 14px;

}

Georage:

</dt>

</dd>

Ken:

</dt>

</dd>

</dl>

方式三：可以利用 ul 或者 ol 标签，方法类似方式二。

方式四：可以全用div，具体也类似方式二，这里就不罗列了。

一些详细的样式就不写了，这里只写了主要的样式，仅供参考。

每个人的代码都不一样的，这里只能提供一个思路给你，世界等着你去改变。两块解决你的问题。

这个排版可以分为三个大块，一个是导航栏，一个是每日通知，一个是详细内容栏。但从空间上看，它可以分为上下两部分，所以，先用两个 div 分出上下空间分布，下面又分两块，再用两个 div 或者其它标签分成两块都行，个人习惯的话左边用一个 div 嵌套一个 p 标签，再加一个 ul 。这种类型的基本都可以这样。