Css Study - Top Menu in Header 横向间隔的菜单
.shortcut ul li {
display: inline;
}
CSS
<style>
ol, ul {
list-style: none;
}
html, body, ul, li, div, form {
margin: 0px;
border: 0px;
padding: 0px;
font-size: 11px;
color: #;
}
.header {
width: %;
height: 100px;
line-height: 100px;
}
.shortcut {
width: %;
line-height: 30px;
height: 30px;
background: #F7F7F7;
border-bottom: 1px solid #eee;
}
.shortcut ul li {
display: inline;
}
.shortcut .fl {
left: 50px;
position: absolute;
}
a {
text-decoration: none;
color: #;
}
a:hover {
color: #E4393C;
text-decoration: underline;
}
.fav {
top: 8px;
left: ;
width: 13px;
height: 13px;
background: url(http://misc.360buyimg.com/lib/skin/2013/i/20130725.png) no-repeat 0 0;
cursor: pointer;
position: absolute;
overflow: hidden;
}
.add_home {
top: 8px;
left: 78px;
width: 13px;
height: 13px;
background: url(http://misc.360buyimg.com/lib/skin/2013/i/20130725.png) no-repeat 0 0;
cursor: pointer;
position: absolute;
overflow: hidden;
}
.fl ul li a {
margin-left: 20px;
}
.shortcut .fr {
width: 500px;
float: right;
right: 20px;
position: absolute;
}
</style>
Header
<div class="header">
<div class="shortcut">
<div class="fl">
<ul>
<li><b class="fav"></b><a href="javascript:addToFavorite()" rel="nofollow">收藏我们</a></li>
<li><b class="add_home"></b><a href="javascript:addToFavorite()" rel="nofollow">加为首页</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li>
<span style="color: #e3840a; font-weight: bold">Willa</span>
您好,欢迎使用My System! <%=DateTime.Now.ToString("yyyy-MM-dd hh:mm")%></li>
<li><a>[退出]</a></li>
<li>|</li>
<li><a>On Duty</a></li>
<li>|</li>
<li><a>Off Duty</a></li>
</ul>
</div>
</div>
</div>
Css Study - Top Menu in Header 横向间隔的菜单的更多相关文章
- Css Study - 纵向Menu - By html and Css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...
- css study
---恢复内容开始--- html{filter:expression(document.execCommand("BackgroundImageCache",false,true ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 使用jquery获取css的top和left属性
使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...
- JS实现的简单横向伸展二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript 横向下拉菜单演示
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...
- Css Study - 横向MENU
http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条
table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...
随机推荐
- C语言中指针的使用
什么是指针:指针就是一个变量,是一个存放内容的内存空间.指针存放的内容是另一个内存空间的起始地址.不同于一般变量存放的就是变量值.取值操作符*对于指针的作用是取得指针变量存放的内存地址里面的值,不加* ...
- linux中,常用的账号管理命令
创建新用户:adduser 用户名创建新用户并将其加入一个现有组中:adduser 用户名 -G 组名创建新用户并使其只属于该组:adduser 用户名 -g 组名创建用户密码:passwd 用户名创 ...
- Android错误:W/ResourceType(2411): No package identifier when getting value for resource number 0x
报错信息: 07-04 11:14:43.064: W/ResourceType(2411): No package identifier when getting value for resourc ...
- centos6 搭建ELK
mark一下时间:2016年2月19日10:17:09 记录使用 Logstash: Logstash服务的组件,用于处理传入的日志. Elasticsearch: 存储所有日志 Kibana 4: ...
- tomcat重启session不过期的处理
tomcat关闭后重启,SESSION 仍然有效的处理方法很多时候明明在服务器上关闭了TOMCAT,但是客户端的表示 SESSION仍然在线,原因及解决方案如下: 每当正常关闭或者重启tomcat服务 ...
- BizTalk动手实验(十二)WCF-Oracle适配器使用
1 课程简介 通过本课程熟悉WCF-Oracle适配器的的使用 2 准备工作 1. 新建BizTalk空项目 2. 配置BizTalk项目的应用程序名称及程序签名. 3. Oracle数据库 ( Or ...
- 详解 Python 中的下划线命名规则
在 python 中,下划线命名规则往往令初学者相当 疑惑:单下划线.双下划线.双下划线还分前后……那它们的作用与使用场景 到底有何区别呢?今天 就来聊聊这个话题. 1.单下划线(_) 通常情况下,单 ...
- 怎样成为全栈工程师(Full Stack Developer)?
"Facebook 工程师说 Facebook 只招 full stack engineer,那么 Facebook engineer 都是怎样的人啦."? 具体经验不重要,重要的 ...
- 基于swoole的网页一对一实时聊天
需求分析 网站上实现一对一即时沟通,能查看聊天记录以及离线留言,新消息提醒. 核心技术 html5的websocket,php的swoole扩展http://wiki.swoole.com/ 数据表 ...
- ASP.NET MVC 5 中 使用富文本编辑器 Ueditor
一.Ueditor插件下载自:http://ueditor.baidu.com/website/ 二.将解压文件目录ueditor复制到项目根目录后, 修改以下几个文件配置: 1.访问路径配置:ued ...