导航条式样

<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 1532 Drainage Ditches

    网络最大流模版题,用了(Ford-Fulkerson算法)  代码不贴了,模版见我博客 http://www.cnblogs.com/zufezzt/p/4585752.html  

  2. ecshop里的$_CFG从哪来的

    以前经常有朋友问我, ecshop系统的$_CFG这个数组是从哪里来的,在哪里定义并赋值的.   下面就给大家说一下这个全局变量 $GLOBALS['_CFG']. ecshop里的 $_CFG数组主 ...

  3. vconfig

    创建虚拟的vlan设备 例如: vconfig  add eth0  10 就创建了一个eth0.10的设备 vconfig的使用说明如下: root@hbg:/# vconfigBusyBox v1 ...

  4. 为什么推荐Zookeeper作注册中心

    Zookeeper的数据模型很简单,有一系列被称为ZNode的数据节点组成,与传统的磁盘文件系统不同的是,zk将全量数据存储在内存中,可谓是高性能,而且支持集群,可谓高可用,另外支持事件监听.这些特点 ...

  5. erlang dets

    1.dets表包含set.bag.和duplicate bag 2.dets:open_file(TableName,Options)创建或打开表 3.Options 1){auto_save,Int ...

  6. NSBundle、UIImageView和UIButton对比、Xcode文档安装路径、Xcode模拟器安装路径

    1.NSBundle1> 一个NSBundle代表一个文件夹,利用NSBundle能访问对应的文件夹2> 利用mainBundle就可以访问软件资源包中的任何资源3> 模拟器应用程序 ...

  7. MySQL5.5.源码安装

    MySQL5.5.34安装需要用到cmke  ncurses-devel yum install -y ncurses-devel cmake gcc gcc-c++ bison 下载http://m ...

  8. 【python问题系列--2】脚本运行出现语法错误：IndentationError: unindent does not match any outer indentation level

    缩进错误,此错误,最常见的原因是行之间没有对齐. 参考:http://www.crifan.com/python_syntax_error_indentationerror/comment-page- ...

  9. HDU 5804 Price List

    只需和总和比较即可. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> ...

  10. oracle11g 卸载和安装（win7，32位）

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraDb11 ...