导航条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 ...
随机推荐
- UVALive 6910 Cutting Tree（并查集应用）
总体来说,这个题给的时间比较长,样例也是比较弱的,别的方法也能做出来. 我第一次使用的是不合并路径的并查集,几乎是一种暴力,花了600多MS,感觉还是不太好的,发现AC的人很多都在300MS之内的过得 ...
- java中的词汇
java中的词汇: 空白符:空格,制表符,换行符.他们的存在使得代码变得很美观. 标识符:由大小写字母,数字,下划线,美元符号组成.且数字不能用于标识符第一个字符. 字面值:变量的值通常使用表示常量的 ...
- kernel Makefile Kconfig说明
实际文档位置:Documentation/kbuild/makefiles.txt,此为翻译稿. *************************************************** ...
- 帝国cms
1:帝国cms 设置安装完成 2: 帝国cms 封面页模板 内容页模板和列表页模板完成
- apache 安装mod_rewrite
如果你的服务器apache还没有安装,那很简单,在编译apache时将mod_rewrite模块编译进去就可以.如果你的apache已经安装好了,现在只想编译出mod_rewrite.so模块,在ap ...
- grunt学习随笔
1 grunt 安装 全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1packa ...
- POJ 1230 Pass-Muraille#贪心+vector迭代器用法
(-￣▽￣)-* (注意下面代码中关于iterator的用法,此代码借鉴某大牛) #include<iostream> #include<cstdio> #include< ...
- Django的使用
Django使用介绍 1.MTV Django中的MTV分别表示models.templates和views. models文件主要定义数据库的连接. templates文件可以放一些html的模版. ...
- 如何安装VM Tool软件包
在linux下,我们想把原windows操作系统下的一些文件拷入到新linux系统中,在windows下对文件(夹)进行复制,在linux下无法进行粘贴,何故?这是因为新装的linux操作系统未安装V ...
- CPU高问题排查
双11大战开始了,这几天公司系统压测,CPU各种报警,于是找了篇关于CPU高问题排查的文章. 一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. (友情提示:本博文章欢迎 ...