导航条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 ...
随机推荐
- 第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- Android非常有用的开源库介绍整理
Android开源库 自己一直很喜欢Android开发,就如博客副标题一样,我想做个好的App. 在摸索过程中,GitHub上搜集了很多很棒的Android第三方库,推荐给在苦苦寻找的开发者,而且我会 ...
- 获取生日对应星座的PHP函数
PHP 获取指定日期对应的星座名称 /** * 获取指定日期对应星座 * * @param integer $month 月份 1-12 * @param integer $day 日期 1-31 * ...
- java web部署问题
将maven项目转化成web 项目的过程中,出现了许多问题,下面进行总结,首先是tomcat问题,tomcat的配置,如果在eclipse中开启了tomcat,页面无法展示,此时是环境路径配置不对,应 ...
- [妙味JS基础]第八课：return、定时器基础
知识点总结 return 1)函数名+括号 ＝ return 返回值 2)所有的函数默认的返回值 ＝ 未定义 3)return后面的代码不执行 arguments =>为实参的集合,当参数个数 ...
- html5权威指南：表单元素
一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...
- C#数组和元组
声明数组 int[] myArray; 初始化数组 myArray = new int[4]; 数组是引用类型当初始化完毕后,将在托管堆上分配内存空间,其结构图如下
- 一行一行分析JQ源码学习笔记-06
节点类型获取$("span")首先 判断 if(select.nodeType) markarray() 类数组 转化成真正的数组 var adiv = document.getE ...
- 设置div控件居中的方法
margin是设置外边距的,它有四个值,margin:4px 5px 5px 5px;分别表示上边距,右边距,下边距,和左边距,是从上按顺时针设置的,如果单个设置,他又有margin-top:3px: ...
- Delphi的StringReplace[转]
原文:http://blog.csdn.net/genispan/article/details/4458319 function StringReplace (const S, OldPattern ...