导航条式样

<style type="text/css">

		ul,li{

			margin:0;

			padding:0;

			list-style:none;

		}

		#navtop{

			width:100%;

			height:45px;

			background-color:#ecf0f1;

			text-align:center;

			overflow:hidden;

		}

		.navtop-skin{

			float:left;

			position:relative;

			left:50%;

		}

		.navtop-skin li{

			float:left;

			margin:0px;

			padding:0 20px;

			position:relative;

			right:50%;

			line-height:40px;

			border:solid 0px #000;

		}

	</style>

body

<body>

<h1>跨浏览器实现float:center，No CSS hacks</h1>

<div id="macji">

<ul class="macji-skin">

<li>列表一,我是浮动的</li>

<li>列表二</li>

<li>列表三</li>

<li>这里可能是N</li>

<li>这里可能是N这里可能是N这里可能是N</li>

<li>1</li>

</ul>

</div>

</body>

table实现

<table align="center" bgcolor="#ecf0f1" width="100%" height="47px" style="border-radius: 0px;">

			<td text-align="left" style="margin-left:10px;" >

				                    

				<input type="text" placeholder="Search"  name="selectitem" id="selectitem"  onKeyUp="AjaxTest(1,null)" type="text" style="padding-left:5px;border-radius:5px;  width:160px; height:25px; vertical-align:middle;">

				     

				<select id="state" name="state" onChange="getResult(this.value);" style="font-size:14px; vertical-align:middle;  border-radius:5px; width:128px;" >

         		<option value="choose" >- Select -</option>

         		<option value="ms" >Milestone</option>

         		<option value="spt">Project Type</option>

         		<option value="pg">Prod.Group</option>

         		<option value="ps">Pjt. Status</option>

				<%-- <option value="pl">PL</option>--%>

 				</select>

				<select id="city"  onChange="AjaxTest(1,this.value)" style="font-size:14px; border-radius:5px;width:128px; vertical-align:middle;" >

					     <option value=""><font face="Arial" style="font-size:14px;">- Select -</font></option>

				</select>

				             <font color="grey" style="font-weight:bold;">Milestone	</font>

				<select id="milestone" style="font-size:14px;  border-radius:5px;width:128px; height:30px;vertical-align:middle; " >

						<option value="choose" style="font-size:14px;">- Select -</font></option>

						<option value="PIA" style="font-size:14px;">PIA</option>

					    <option value="PVR" style="font-size:14px;">PVR</option>

				</select>

				<font color="grey" style="font-weight:bold;">From	</font>

				<input type="text" id="startdate" value="2015-01-01" onClick="return Calendar('startdate');" class="text_time" style=" vertical-align:middle;padding-left:5px;  font-size:14px;  border-radius:5px;align:center;width:128px;height:25px;font-style:Arial" />

				<font color="grey" style="font-weight:bold;">to</font>

				<!-- <input id="enddate" type="date" value="2017-01-01"/ style="border-radius:5px;"> -->

				<input type="text" id="enddate" value="<%=endd %>" onClick="return Calendar('enddate');" class="text_time" style="vertical-align:middle;padding-left:5px; font-size:14px;  border-radius:5px;width:128px;height:25px;font-style:Arial"/>

				   

				<%-- <input type="button" value="      "  style="border-radius:5px;height:30px; background:url(images/dustbin.png) no-repeat" onclick="location='mainpage.jsp'"></input>

				<input type="button" value="              "  style="border-radius:5px;height:30px; background:url(images/Search.JPG) no-repeat" onclick="AjaxTest(1,null)"></input>--%>

				<img src='images/search3.png'  style="vertical-align:middle; height:30px; " onclick="AjaxTest(1,null)"/>	

			</td>

			<td>

				<table>

					<tr>

						<td rowspan="2"><img id="obj1" src="data:images/clock.png"  height=30px;width=30px /></td>

						<td><font   style="font-weight:bold; font-size:12px; font-style: Arial">   Data Update Time:   </font></td>

					</tr>

					<tr>

						<td><font color="gray" style=" font-weight:bold;font-style:Arial;font-size:12px">   <%=UpdateTime %></font></td>

					</tr>

				</table>

			</td>

			</tr>

			</table>

导航条css实现和table实现的更多相关文章

  1. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  2. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  3. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  6. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  7. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  8. css 导航条 布局

    导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...

  9. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

  1. HDU 3127 WHUgirls

    二维完全背包,理解似乎还不够全面,过几天回来再看看这题. #include<cstdio> #include<cstring> #include<cmath> #i ...

  2. Mac笔记本中使用postgresql

    安装 brew install postgresql 安装了两个依赖包 ==> Installing dependencies for postgresql: openssl, readline ...

  3. 《JS权威指南学习总结--8.3 函数的实参和形参》

    内容要点: 一.可选形参 当调用函数的时候传入的实参比函数声明时指定的形参个数要少,剩下的形参都将设置为undefined值. 例如: //将对象o中可枚举的属性名追加至数组 //如果省略a,则创建一 ...

  4. ajaxFileUpload 报这错jQuery.handleError is not a function

    今天刚打个一个技术群,里面有人问标题上的问题,嘿,我恰好遇过,现在大家至少也在用jquery1.9以上的版本,ajaxfileupload的版本早就不更新了,大家可以下载看:地址这里, 它例子里使用的 ...

  5. （转）了解JNDI

    JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...

  6. 【Python@Thread】threading模块

    theading模块的Thread类 属性: name 线程名 ident 线程标识符 daemon  布尔值,标示是否为守护线程 方法: __init__(target=None, name=Non ...

  7. 读书笔记之C# delegate

    c#代理的使用主要在:需要将一个方法当做参数传递到另一个方法时. 比如启动一个线程执行任务,而这个线程要执行的方法可以通过代理传递过来. 代理包括一个方法或者多个方法的地址和C++的函数指针很相似,但 ...

  8. Union、Union All、Except、InterSect的区别

    UNION: 将多个「结果集 (result set)」的「行 (row)」合并,作为单个结果集返回,并移除重复的行.若有重复的行,只留下一个. UNION ALL: 将多个「结果集 (result ...

  9. [SOJ] 1282. Computer games (KMP)

    坑爹题 1282. Computer Game Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description Brian is an ...

  10. PBO

    #include <GL/glew.h> #include <GL/freeglut.h> #include <iostream> GLuint pboID[]; ...