导航条css实现和table实现

导航条式样

<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实现的更多相关文章

css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
CSS水平导航条和纵向导航条
问题描述: 使用CSS制作水平导航条和纵向导航条问题解决: (1)水平导航条 1.1 效果预览: 1.2 ...
css 导航条布局
导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...
辛星与您使用CSS导航条
第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

转：Web性能压力测试工具之ApacheBench（ab）详解
PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题.Apache中有个自带的,名为ab的程序,可以对Apache或其它类型的服务器进行网 ...
SVM与LR的比较
两种方法都是常见的分类算法,从目标函数来看,区别在于逻辑回归采用的是logistical loss,svm采用的是hinge loss.这两个损失函数的目的都是增加对分类影响较大的数据点的权重,减少与 ...
Java Swing 日期控件（转载）
http://www.cnblogs.com/lzy1991/p/5714935.html
Sass入门：第一章
1.什么是预处理器? CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用.CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题. ...
编写高质量iOS代码的52个有效方法1-1
一.使用向前声明(@class)的好处 1.有效减少编译器编译的时间: 2.有效避免循环引用: 二.字面量语法的好处 1.字面常量精简.可用于所有数据类型,如: NSNumber *intNumbe ...
digitalocean教程：你应该知道的10件事
DigitalOcean VPS性价比高,全球拥有多处机房,无须备案,非常适合守规矩的中国用户使用.digitalocean优惠码.digitalocean速度.digitalocean评测是网友关心 ...
JSON.parse()和JSON.stringify()&&traditional(ajax请求)的作用
parse是一个字符串中解析出json对象,如 var str = '{"name":"haizeiwang"}' 结果: JSON.parse(str) na ...
【卷一】正则四 |> 练习
参考:<Python核心编程(3rd)>—P39 1-1 识别后续的字符串: "bat", "bit", "but" &quo ...
Announcement
本来是习惯把每天的内容写在一个txt里. 似乎不符合要求.无论格式还是内容.于是转战blog. 事实上.有专业课学习加上马上考四级以及下学期可能的专业调整.此学期时间紧张. 能完成日常作业并掌握周课内 ...
ural 1355. Bald Spot Revisited（数的素因子划分）
1355. Bald Spot Revisited Time limit: 1.0 secondMemory limit: 64 MB A student dreamt that he walked ...

导航条css实现和table实现

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

随机推荐

热门专题