导航条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 ...
随机推荐
- 在UE4中使用SVN作为source control工具
==========预先处理 1.到这个目录下 2.鼠标在空白处 按住shift键 同时右键 会多出一个 可以打开的cmd 3.输入命令,修改红线部分. me: 登陆svn地址的用户名, URL网址: ...
- 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage“提示信息
在安装过vs2015之后出现未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage“提示信息在VS的安装目录下,找到 ...
- iOS开发QQ空间半透明效果的实现
//1.首先我们可以确定的是cell的半透明, /* white The grayscale value of the color object, specified as a value from ...
- 你应该知道的CSS文字大小单位PX、EM、PT
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用 ...
- POJ 3026 Borg Maze（Prim+BFS建邻接矩阵）
(￣▽￣)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...
- Java 集合 LinkedList的ListIterator
Java 集合 LinkedList的ListIterator @author ixenos 摘要:ListIterator<E>是继承自Iterator<E>的接口.list ...
- 安卓.点击头像-->编辑个人姓名-->提交后.同时调用js关闭页面-->返回上一层
$(document).ready(function() { $('#selfbtn').click(function(){ var u = navigator.userAgent; if (u.in ...
- SQLServer乱码问题的分析及解决方法（中文字符被存入数据库后，显示为乱码）
注:本文为个人转存,原文地址:http://blog.csdn.net/qiuyu8888/article/details/8021410 问题:SQL版在使用过程中有时会出现乱码,我的症状是中文字符 ...
- mac 上面安装mysql－python
安装过程中一直报错: EnvironmentError: mysql_config not found 最终下面的方式解决: 58down voteaccepted +200 Ok, well, fi ...
- javascript 中的console.log的作用
主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...