02(前端)应用CSS导航

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

实现效果:

02(前端)应用CSS导航_第1张图片

 

<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>


 

你可能感兴趣的:(html,css,网站开发)