导航条css实现和table实现

时间：2023-03-08 16:28:30

导航条式样

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

相关文章