Dreamweaver新建一个HTML文件——修改title为html+css——新建一个div id为“a”——设置代码，给li设置左浮动效果。
具体步骤：
1、用Dreamweaver新建一个HTML文件
2、修改title为html+css实现横向导航
3、新建一个div id为“a”，添加ul li标签
4、在li中添加自己想要的文字 并调整好文字间距,按F12预览，如下图所示
5、首先去掉字体前面的小黑点，代码如下：
6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果
7、按F12预览，效果如下
语法：writing-mode:lr-tb或writing-mode:tb-rl参数：
1、lr-tb：从左向右，从上往下
2、tb-rl：从上往下，从右向左
1
2
3
4
5
6
<style>
body{text-align:center}
.shuli{ margin:0 autowidth:20pxline-height:24pxborder:1px solid #333}
</style>
<div class="shuli">
我是竖列排版</div>
HTML超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
这个需要css3中的一个属性transform:rotate()意思就是让页面旋转，不过这个属性ie9以下版本不支持了就。transform:rotate(90deg)
-ms-transform:rotate(90deg) /* IE 9 */
-moz-transform:rotate(90deg) /* Firefox */
-webkit-transform:rotate(90deg)/* Safari 和 Chrome */
-o-transform:rotate(90deg) /* Opera */
代码例子如下：
<!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/htmlcharset=utf-8" />
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body style="width:700pxheight:800pxtransform:rotate(90deg)-ms-transform:rotate(90deg)-moz-transform:rotate(90deg)-webkit-transform:rotate(90deg)">
<div id="aa">
html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码html 横屏显示的代码
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）