`
yxgblog
  • 浏览: 38407 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS---竖着的文字导航菜单制

CSSIEXHTMLHTML浏览器 
阅读更多

来自走走停停看看的博客

 

网上目前两种方法竖排，
一种是用 writing-mode:tb-rl;
另一种是用 layout-flow: vertical-ideographic;
但遗憾的是，这两种方法都基本是 IE Only 的……
那么维基文库是如何做到的呢？随便翻看一下代码，恍然大悟~

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="font-size:xx-large; font-weight:bold; width:30px; height:12px; float:right;">水调歌头</div>
<div style="width:1.5em; float:right;">　</div>
<div style="width:1.5em; float:right;">蘇軾　</div>
<div style="width:1.5em; float:right;">　</div>
<div style="width:1.5em; float:right;">明月幾時有　</div>
<div style="width:1.5em; float:right;">把酒問青天　</div>
<div style="width:1.5em; float:right;">不知天上宮闕　</div>
<div style="width:1.5em; float:right;">今夕是何年　</div>
<div style="width:1.5em; float:right;">我欲乘風歸去　</div>
<div style="width:1.5em; float:right;">又恐瓊樓玉宇　</div>
<div style="width:1.5em; float:right;">高處不勝寒　</div>
<div style="width:1.5em; float:right;">起舞弄清影　</div>
<div style="width:1.5em; float:right;">何似在人間　</div>
<div style="width:1.5em; float:right;">　</div>
<div style="width:1.5em; float:right;">轉朱閣　</div>
<div style="width:1.5em; float:right;">低綺戶　</div>
<div style="width:1.5em; float:right;">照無眠　</div>
<div style="width:1.5em; float:right;">不應有恨　</div>
<div style="width:1.5em; float:right;">何事長向別時圓　</div>
<div style="width:1.5em; float:right;">人有悲歡離合　</div>
<div style="width:1.5em; float:right;">月有陰晴圓缺　</div>
<div style="width:1.5em; float:right;">此事古難全　</div>
<div style="width:1.5em; float:right;">但願人長久　</div>
<div style="width:1.5em; float:right;">千里共嬋娟　</div>
</body>
</html>
虽然代码不是很优雅，但大概意思也知道了。设置宽度为1.5倍的字宽，保证列距，然后让所有div右浮动。
很简单又很有用的技巧，兼容各个主流浏览器~

分享到：
| CS4的内容识别比例命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS蓝色竖导航

    【CSS蓝色竖导航】是一种常见的网页设计元素，它在网页布局中扮演着至关重要的角色，为用户提供清晰的页面导航。这种导航菜单以蓝色为主题色，通常以垂直布局展示，为网站带来专业且易于使用的视觉效果。下面我们将...

    CSS蓝色竖导航.rar

    【CSS蓝色竖导航】是一种常见的网页设计元素，用于构建页面的主要导航结构。在这个主题中，我们将深入探讨如何使用CSS（层叠样式表）创建一个美观、功能完善的蓝色垂直导航栏。这种导航栏常用于网站的左侧或顶部，...

    CSS3垂直图标菜单 带Tooltip提示框.zip

    本资源“CSS3垂直图标菜单 带Tooltip提示框.zip”提供了一个利用这两种技术实现的实用功能：一个垂直布局的图标菜单，并且每个图标都带有Tooltip提示框。下面将详细介绍这个知识点及其相关技术。 首先，让我们讨论...

    用ul、li标签创建css横向导航菜单示例

    创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，...对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    - `.topnav` 类设置了导航菜单的基本布局和字体属性。 - `***nav` 选择器定义了无序列表的样式，包括内边距、外边距和字体大小等。 - `***nav li` 选择器定义了菜单项的基本样式。 - `***nav li a` 选择器定义了链接...

    jquery实现红色竖向多级向右展开的导航菜单效果

    在这个导航菜单设计中，通过CSS和jQuery的组合，创建了一个竖向多级菜单。多级菜单意味着菜单可以包含若干层级的子菜单，本例中通过嵌套和标签实现了多级结构，并且通过CSS设置了子菜单向右展开的效果。这显示了...

    JS+CSS实现的竖向简洁折叠菜单效果代码

    根据提供的文件信息，我们可以提取出关于使用JavaScript和CSS实现竖向简洁折叠菜单效果的相关知识点。下面将详细介绍这些知识点： ### 1. 竖向折叠菜单的概念与实现 竖向折叠菜单是一种常见的网页导航布局，它以...

    javascript经典效果示例

    37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果（仿PHOTOSHOP） 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___...

    js鼠标经过选项卡

    这种效果通常应用于导航菜单、产品展示、信息筛选等多个场景，为用户提供直观且便捷的操作体验。在网页开发中，JavaScript是实现这种交互的关键技术。 JavaScript是一种轻量级的解释型编程语言，广泛用于网页动态...

    一台电视

    5. **自定义组件**：电视界面上的元素，如播放控制器、导航菜单等，可以通过CSS进行定制，使其符合品牌形象或者提供独特的交互体验。 6. **优化性能**：在电视平台上，CSS的优化显得尤为重要，因为电视硬件性能可能...

    页面常用图标

    在网页设计和开发中，图标扮演着至关重要的角色。它们为用户提供直观的视觉指示，帮助用户快速理解页面功能，增强用户体验。"页面常用图标"这一主题涵盖了多种在网站和应用程序中常见的图标，这些图标通常包括但不...

Magicbox
Global site tag (gtag.js) - Google Analytics