辛星与您使用CSS导航条
第一步。我们创建了一个新的my.html档。在内容填入如下面。这个html文件不动,直到最后。正是这些内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="xin.css">
</head>
<body>
<div class = "nav">
<ul>
<li><a href="#">辛星PHP</a></li>
<li><a href="#">辛星Python</a></li>
<li><a href="#">辛星CSS</a></li>
<li><a href="#">辛星HTML</a></li>
<li><a href="#">辛星jQuery</a></li>
<li><a href="#">辛星Java</a></li> </ul></div>
</body>
</html>
第二步,我们開始新建一个xin.css文件,然后開始进行调整这些导航条的显示格式。我们要做的第一步就是先把列表的小圆点给去掉。我们先写例如以下代码:
.nav ul{list-style-type: none;}
我们发现小圆点没了。可是。如今这些列表元素都是竖向排列的,我们想让它们横向排列。
第三步,我们通过设置li的浮动来让它们横向排列,我们在第二行加入代码,因此整个代码成为:
.nav ul{list-style-type: none;}
.nav li{float:left;}
第四步,我们发现如今它们是到了一起了,可是是连在一起的,这是为什么呢,由于它们没有设置宽度,我们仅仅要给他们设置了一定的宽度。它们就会分开啦,可是我们同一时候还能够设置一下背景色,因此该代码就成为了例如以下代码:
.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;background:#CCC;}
第五步我们就開始设置鼠标的样式了,顺便我们把下划线给去掉。我们前面介绍过伪类的概念,假设读者不熟悉。也能够到前面翻翻我的教程。我们同一时候加入背景颜色什么的,因此它的代码成为以下这个样子:
.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;background:#CCC;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}
第六步也是源自我们的问题,我们调整一下大小,即我们设置一下.nav a的属性值,代码例如以下:
.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}
.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}
第七步就是我们的这个导航条是黏在一起的,我们须要分开菜看上去更加舒服一点,因此我们这里设置一下li的属性。让它的边距设置为3px,然后在让字体的大小适合该导航条的大小。最后的代码例如以下:
.nav ul{list-style-type: none;}
.nav li{float:left;width: 100px;margin-left: 3px;line-height: 30px;}
.nav a:link{color:#666;background: #CCC;text-decoration: none;}
.nav a:visited{color: #666;text-decoration: none;}
.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}
.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}
到如今为止。我们的导航条就做完了,假设读者是一位高手,可能会指出它的不足,可是毕竟是用手写的,没用不论什么的图片,让我们来看一下总体效果把:
版权声明:本文博主原创文章,博客,未经同意不得转载。
辛星与您使用CSS导航条的更多相关文章
- css -- 导航条
1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...
- css 导航条 布局
导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...
- CSS导航条nav简单样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css导航条等元素位置不变
在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.
- css导航条的设计
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css导航条
#nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}
- 2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...
- 2014年度辛星css教程夏季版第四节
接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...
- 辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
随机推荐
- Servlet过滤器——异常捕获过滤器
1.概述 介绍如何实现异常捕获过滤器. 2.技术要点 本实例主要是在过滤器Filter的doFilter()方法中,对执行过滤器链的chain的doFilter()语句处添加try…catch异常捕获 ...
- Http请求工具实例编写(超长,比较清楚)
HTTP协议工作方式首先客户端发送一个请求(request)给服务器,服务器在接收到这个请求后将生成一个响应(response)返回给客户端.在这个通信的过程中HTTP协议在以下4个方面做了规定:1. ...
- VS2008下编译BOOST 1.39的ASIO库
由于全部编译BOOST库需要的时间太长,而且耗费空间,况且我只需要用ASIO库,所以就没有必要全部编译了. boost库到www.boost.org上下载. 编译很简单,假设你的boost存放的目录是 ...
- Maven插件之portable-config-maven-plugin(不同环境打包)
在大型的项目组中,分不同的开发环境,测试环境,生产环境(说白了就是配置文件不同,或者数据源,或者服务器,或者数据库等);问题来了,如何使用Maven针对不同的环境来打包呢? Maven提供了Profi ...
- IT行业,需要经常锻炼,开篇从本钱开始
今天下完班,和部门兄弟一起去打了两小时乒乓球,大汗淋漓,很痛快. 败给了两个高手,感觉年龄大了些,灵活性没有以前那么好了. 想想以前读书时,在整个学校都叱诧风云,如今即败给了几个老手,唉. 看来以后要 ...
- ASP.NET - 获得客户端的 IP 地址
通常我们都通过下面的代码获得IP: REMOTE_ADDR 说明:访问客户端的 IP 地址. 此项信息用户不可以修改.如果真的给改了的话,你也和服务器连接不了了,服务器就是按照这个来与客户端建立连接并 ...
- 细说UI线程和Windows消息队列
在 Windows应用程序中,窗体是由一种称为“ UI线程( User Interface Thread)”的特殊类型的线程创建的. 首先, UI线程是一种“线程”,所以它具有一个线程应该具有的所有特 ...
- 七个你无法忽视的Git使用技巧(转)
与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命 ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- c 可变参数 定义可变参数的函数
定义可变参数的函数,需要在stdarg.h头文件中定义的va_list类型和va_start.va_arg.va_end三个宏. 定义可变参数函数 va_list ap; //实际是定义一个指针va ...