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 ...
随机推荐
- html5的本地存储
转载1:http://www.cnblogs.com/fly_dragon/p/3946012.html 转载2:http://www.cnblogs.com/xiaowei0705/archive/ ...
- html5.js让IE(包括IE6)支持HTML5元素方法
引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...
- Distinct删除重复数据时 自定义的方法比较【转】
最近项目中在用Linq Distinct想要将重复的资料去除时,发现它跟Any之类的方法有点不太一样,不能很直觉的在呼叫时直接带入重复数据判断的处理逻辑,所以当我们要用某个成员属性做重复数据的判断时, ...
- 汇编基础知识之二debug的使用
DEBUG的使用 (要在win32位习题下进行,win7 64位需要安装DosBox和debug这2个软件): 1:win64位下debug的使用教程: 下载debug.exe,这里我把debug放在 ...
- Unity UGUI 裁剪TTF字体
BitBucket上找到了一个perl工程,font-optimizer.拉取代码到本地.为了运行它,还需要装Perl解释器,可以在Perl的官网上下载ActivePerl.装好ActivePerl后 ...
- Java 正则表达式[转载]
PS:转载自CSDN博客看上去很美 众所周知,在程序开发中,难免会遇到需要匹配.查找.替换.判断字符串的情况发生,而这些情况有时又比较复杂,如果用纯编码方式解决,往往会浪费程序员的时间及精力.因此,学 ...
- jsp开发模式和web计算器案例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 前端文摘:Web 开发模式演变历史和趋势
今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...
- Composer : php依赖管理工具
原始时代 我记得在当时用php的时候还没有composer,只有个pear,但是不好用呀,还不如直接在互联网上到处复制代码了,更快更不容易出错,当时也没有github这么好的社区工具了 总结如下 代码 ...
- 主机与虚拟机通信:以主机VS2010连接虚拟机MySql为例
1.首先解决环境配置.网络互相通信的问题: 主机:Win7 32bit.虚拟机 Winxp 32bit(不要鄙视我不大会用unix之类的东西).使用virtualBox安装. 网络:虚拟机配置成Bri ...