导航条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 ...
随机推荐
- Intent的几种Flag的不同
冬天有点冷,不想写博客. 研究下Intent的几种Flag的不同: 1,FLAG_ACTIVITY_CLEAR_TOP:会清理掉目标activity栈上面所有的activity Intent inte ...
- HDU 5306 Gorgeous Sequence
如果维护max,sum,那么可以得到一个暴力方法,如果t>=max,那可以return,否则往下更新,显然超时. 在上面基础上,再维护一下次大值,与最大值的个数.这样一来,次大值<t< ...
- C#_传单小子
2013/4/13日编写,已经许久不用了,今天又翻出来了,打算继续完善这个小软件,明年将发布出来提供给大家使用.
- POJ 2311 Cutting Game(SG+记忆化)
题目链接 #include<iostream> #include<cstdio> #include<cstring> using namespace std; ][ ...
- POJ 3268 Silver Cow Party(dij+邻接矩阵)
( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<algorithm> #include<cs ...
- 调用短信接口,先var_dump()看数据类型是object需要json_decode(json_encode( $resp),true)转换成array
返回的数据.先看类型,如果是object类型 先json_encode, 再json_decode,加true 转换成数组 $resp = $c->execute($req); var_dump ...
- osg + cuda
#include <osg/Notify> #include <osgViewer/Viewer> #include <osgCompute/Memory> #in ...
- [ An Ac a Day ^_^ ] Codeforces Round #368 Div. 2 A B C
昨天才回学校 刚好赶上CF所以就没写博客 不过还是水题了…… A. 比赛的时候被hack了 仔细读题才知道grey也算是黑白的 英语不好好伤心…… #include<stdio.h> #i ...
- 洛谷-火柴棒等式-NOIP2008提高组复赛
题目描述 Description 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: ...
- android Tweened Animations
Android提供了两种类型的动画: 一类是Tween动画:提供了旋转.移动.伸展和淡出等效果: 第二类是Frame-by-frame动画:这一类Animations可以创建一个Drawable序列, ...