一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件

一个是ui 相关的js文件

另一个是 ui相关的 css文件!

参考这个css布局

通常多个平行的items 都是用ul li来做的

在布局上: 而ul >li并不一定都是用float:left来做的, 同样可以用display: inline-block的方式来做!!!

在css上:

ul class="nav"
.nav {
list-style: none;
text-align: center; // 让ul中的li居中,因为默认的是从最左边开始排列的
padding: 0;
} .nav .nav-selected {
border-top-color: #000; //被选中的元素添加这个类. border的样式设置: border-top(指定哪一边)-color(哪个属性):
font-weight: bold;
} .nav li { // 默认的没有被选中的li,
margin: -1px 0 0 0;
padding: 0;
display: inline-block;
border-top: 1px solid #ccc; // 这里只设置某一个边的 边线: border-top, 没有选中的 时候是灰色!
}

怎样突出显示当前选中的li? 通过:字体的font-weight:bold; 和 (上)边线颜色的改变:( 默认的边线颜色是: ccc, 选中的是000)来实现的!!

.nav a { //nav里面的li中的a, 默认的都是黑色, 只是在当前选中的链接上通过 font-weight: bold加粗来突出.
color: #000;
display: block; // 这个要设置为块: block
text-align: center;
padding: 12px 24px;
}

jquery左右链接类似frameset的插件的更多相关文章

  1. 15款最好的 jQuery Modal(模态窗口)插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  2. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

  5. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  7. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  8. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  9. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

随机推荐

  1. 推荐一个Android开发懒人库 -- ButterKnife

    ButterKnife -- 项目地址:https://github.com/JakeWharton/butterknife 都说程序员都是比较懒的,什么事情都想着让程序自动化帮忙减轻工作量,这个开源 ...

  2. [cf140e]New Year Garland

    Description 用$m$种颜色的彩球装点$n$层的圣诞树.圣诞树的第$i$层恰由$l[i]$个彩球串成一行,且同一层内的相邻彩球颜色不同,同时相邻两层所使用彩球的颜色集合不同. 求有多少种装点 ...

  3. C#中的斜变性和逆变性的详解

    1,问题 大家可以看到定义泛型类型的可以看到out和in这两个关键字,那么具体代表什么意思呢? 2,文字解释 C# 4.0通过两个关键字:out和in来分别支持以协变和逆变的方式使用泛型. 如果某个返 ...

  4. Windows下Nginx+Mysql+Php(wnmp)环境搭建

    前言 最近想在windows下使用nginx搭建web环境,本来想用套件(WNMP)一键安装,但后来放弃了,觉得还是自己动手,丰衣足食的好,而且套件的局限性太大.所以后来就各种搜索,看到前辈写关于wn ...

  5. centos虚拟机克隆

    vmware vsphere平台上克隆centos6 一.删掉/etc/udev/rules.d/70-persistent-net.rules文件 reboot 二.vim ifcfg-eth0 删 ...

  6. linux文件系统简介

    文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储结构.软链接 ...

  7. HDU 1285 确定比赛名次(简单拓扑排序)

    题目链接: 传送门 确定比赛名次 Time Limit: 1000MS     Memory Limit: 65536K Description 有N个比赛队(1 Input 输入有若干组,每组中的第 ...

  8. Mac配置一些开发环境(随时补充)

    Mac安装mysql并启动 brew install mysql mysql.server start /usr/local/Cellar/mysql/5.6.10/support-files/mys ...

  9. 修改oracle系统用户system的密码

    C:\Users\Administrator>echo %ORACLE_SID% %ORACLE_SID% C:\Users\Administrator>set ORACLE_SID=or ...

  10. Linux操作系统发展史

    1984年,面对美国电话电报公司启动的UNIX商业化计划和程序开发的封闭模式,麻省理工学院的RichardM.Stallman发起了一项国际性的源代码开放的GNU(GNU's Not Unix)计划, ...