导航条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 ...
随机推荐
- C#之委托（函数参数传递）【转】
原文:http://blog.csdn.net/wangdan199112/article/details/18796527 在学委托这块儿的时候,函数参数这块不是很理解,于是针对一个例子做了深入的理 ...
- JS 阻止整个网页的内容被选中
pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...
- CentOS启动不显示图形界面直接进入命令行模式
我现在用的是 CentOS 6.3 开机后进入图形化界面还是进入命令行取决于inittab文件中的配置.该文件位于etc目录下. # vi /etc/inittab 找到下面的语句: # Defaul ...
- JS逻辑运算大于小于比较
遇到这个问题,结果测试了好半天终于发现原因, 例子: var az = $('#a').css('zIndex'); // 1001 var bz = $('#b').css('zIndex'); / ...
- mvn 如何添加本地jar包 IDEA pom.xm
-------------背景介绍------------------------------------ 最近做的项目,就是office在线浏览功能, 使用的是openoffice+jodconve ...
- PHP验证码程序
[摘自网络,参考学习] <?php/** * vCode(m,n,x,y) m个数字 显示大小为n 边宽x 边高y * http://blog.qita.in * 自己改写记录session $ ...
- jquery获取li中的各项属性值attr
发布新内容时的设计 默认显示一个按钮 如:发布按钮(放在h3字体里面)(鼠标上面时.显示发布到哪个模块下拉菜单发在li里面) $('#pup_model li , #pup_model h3').cl ...
- openwrt源码下载地址（镜像）
与openwrt.org的源码svn路径仅仅多了一个.cn svn://svn.openwrt.org.cn/openwrt/branches/backfiresvn://svn.openwrt.or ...
- kettle连接Hbase中数据导入（8）
http://wiki.pentaho.com/display/BAD/Loading+Data+into+HBase 1)下载样本文件 到官网去下载
- Dubbo协议与连接控制
协议参考手册 (+) (#) 推荐使用Dubbo协议 性能测试报告各协议的性能情况,请参见:性能测试报告 (+) dubbo:// (+) (#) Dubbo缺省协议采用单一长连接和NIO异步通讯,适 ...