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 ...
随机推荐
- Java.lang.NoSuchFieldError: INSTANCE异常
解决方案: java.lang.NoSuchFieldError: INSTANCE异常. 1.jar包重复了. 2.版本还不相同,如果包的版本不同也会报相应的错,不过一般情况自己导入的jar包主要看 ...
- github提交失败并报错java.io.IOException: Authentication failed:
一.概述 我最近在写一个android的项目. 软件:android studio.Android studio VCS integration(插件) Android studio VCS inte ...
- Eclipse中添加PyDev插件
思路 1.启动Eclipse, 2.点击Help->Install New Software... 3.在弹出的对话框中,点Add 按钮. 4.Name中填:Pydev, Location中填h ...
- UVA12532 线段树(单点更新,区间求乘积的正负)
It’s normal to feel worried and tense the day before a programming contest. To relax, you went out f ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- 前端技术-PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 实验一Java开发环境的熟悉
实验一Java开发环境的熟悉 实验内容 •命令行下Java程序开发 •IDEA下Java程序开发.调试 •练习(通过命令行和Eclipse两种方式实现,在Eclipse下练习调试程序) •实现凯撒密码 ...
- BizTalk开发系列(十六) XML命名空间
BizTalk开发过程中如果有对XML进行开发操作,比如在自定义代码里操作XML消息或者在Mapping的时候使用Xpath对XML进行操 作.则有机会遇到XML命名空间的问题.常见的是使用Xpath ...
- IOS第一天多线程-04GCD通信
**** #define HMGlobalQueue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0) #define HMM ...
- UrlRewriteFilter
UrlRewriteFilter是一个改写URL的Java Web过滤器,可见将动态URL静态化.适用于任何Java Web服务器(Resin,Jetty,JBoss,Tomcat,Orion等).与 ...