02.net网站开发（前端）：2.应用CSS导航

最新推荐文章于 2024-09-21 11:29:05 发布

iteye_11790

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量112

点赞数

文章标签：前端 javascript php ViewUI

上一篇说了关于html input 表单元素，虽然像文本框、选择框这些，都可以使用服务端控件直接拖拽出来，就算.net连局部刷新控件都有（其实编译完成后都是渲染出html元素给用户的），但真实操作中，复杂点的需求很难实现，或者说有些效果你需要使用html元素+js，而你用的又是服务端控件并且刷新的时候无法整合，在实习的时候我经常碰到这样的情况，第一期的产品是完全只使用服务端控件的，第二期我们要先把一部分功能移植到手机Web，需要用到jQuery Mobile ，那时就要改一堆代码了。而且，多使用html元素，应该很容易适应其它如PHP平台，虽然我没用过，但应该差不多的。

实现效果：

<style type="text/css">
	/* 竖向导航Id */
	#menu1
	{
		list-style-type:none; /* 去掉<ul>标签默认的前符号“·” */
　　position:fixed;/* 脱离文档流。fixed为漂浮在相对位置 */
　　	top:20px;
　　	left:0px; /* 这里表示竖向导航一直相对漂浮在距浏览器左上方（0，-20）的位置 */
	}
	#menu1 li
	{
		border-bottom:1px dotted; /* 下边框1px，点类型 */
		width:70px; /* 宽 */
		text-align:center;/* 文字居中 */
	}
	/* 横向导航Id */
	#menu2
	{
		list-style-type:none;
　　position:absolute; /* 脱离文档流。Absolute为漂浮在绝对位置 */
		top:1px;
		left:100px;
	}
	#menu2 li
	{
		float:left;/* 左浮动，让默认为列排布的<ul>标签变成行排布 */
		width:50px;
	}
</style>
</head>

<body>
	<ul id="menu1">
		<li>首页</li>
		<li>电影</li>
		<li>音乐</li>
		<li>小说</li>
	</ul>
	<ul id="menu2">
		<li>首页</li>
		<li>电影</li>
		<li>音乐</li>
		<li>小说</li>
	</ul>
　　<div style="clear:left"></div>
	<!--上面的<div>标签用来清除左浮动布局。不然，后面的内容会继续浮动。-->
</body>