接下来的这一节我计划讲解的是超链接和列表的样式，然后我们做出一个导航栏出来，其实导航栏是非常常见的，但是我们这里做得这个有点并不那么完善，等我们学完了css之后再完善它。

**************超链接*************

1.我们讲伪类的时候已经讲到了，一个超链接可以有link（正常状态）、visited（已经访问过）、hover（获得鼠标焦点）active（被鼠标点击中）这样四个状态，我们前面也分别设置过不同的颜色了，使用选择器:伪类的形式。

2.我们还可以使用background-color来设置其背景颜色，我们可以用text-decoration：none来去掉超链接的下划线。

*************列表**************

1.我们前面讲HTML的时候讲过，列表分为有序列表和无序列表，我们这里讲解它的一个属性：list-style-type。

2.list-style-type属性是什么意思呢，就是列表的风格类型，对于无序列表，可以用circle和square，即分别用圆形和方形来作为无序列表的开头。

3.list-style-type属性还可以取值为upper-roman来设置为大写罗马数字，还可以用lower-alpha来设置为小写的英文字母。

4.它还有一个属性是list-style-image：用图片来作为列表项的开头，它需要用url导入一个图片，这个我们后面再说。

***********实现一个导航栏*************

1.第一步，我们先来一个无序列表，然后给他们加上超链接，由于这里我不知道连接到哪里，用#表示一个空连接，下面我们新建一个my.html代码如下：

  1. <html>
  2. <head>
  3.     <title>2014年辛星CSS教学夏季版</title>
  4.     <link rel="stylesheet" type="text/css" href="my.css">
  5. </head>
  6. <body>
  7.     <ul>
  8.         <li><a href="#">辛星</a></li>
  9.         <li><a href="#">小倩</a></li>
  10.         <li><a href="#">小楠</a></li>
  11.         <li><a href="#">辛勇</a></li>
  12.         <li><a href="#">辛强</a></li>
  13.     </ul>
  14. </body>
  15. </html>

2.然后新建一个my.css文件如下：

  1. ul{list-style-type: none;}
  2. a{text-decoration: none;}
  3. li{display: inline;}

3.我们的这个横向的导航条就算完成了，但是它还是太简单了，它只是单纯的列出了五个连接，并且水平排列，我们到后面再去完善。

4.这里说明一下，这个li属性的display：inline表示设置格式为内联，即它不是以块级元素出现的，是内联元素，即向右排列而不是向下排列。

*************小结*************

1.本小节我们认识了超链接和列表的常见样式。

2.然后我们做出来了一个简易的导航条，读者可以先去完善它，如果读者不去做，我后面再做。

2014年度辛星css教程夏季版第四节的更多相关文章

  1. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  2. 2014年度辛星css教程夏季版第五节

    本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...

  3. 2014年度辛星css教程夏季版第七节

    本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动* ...

  4. 2014年度辛星html教程夏季版第四节

    我们前面也涉及了HTML中的一些东西,接下来我们要涉及到图像了,如果没有图像,即使文字的样式再多,再复杂,终归还是单调的,我们就需要用图片来给我们的网页增加更多的表现形式. ************* ...

  5. 2014年度辛星css教程夏季版第三节

    第二节我们讲述的几乎全是CSS的选择器,那么下面这一节我们来讲一下CSS的颜色和文本的一些东西,虽然我对调色不大敏感,但是对于颜色还是比较感兴趣的. *********CSS中的颜色********* ...

  6. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  7. 2014年度辛星css教程夏季版第一节

    CSS是Cascading Style Sheets的缩写,即层叠样式表,它用于表现HTML的样式,即HTML只是去写该网页有哪些内容,至于如何去表现它们,由CSS去定制. ************* ...

  8. 2014年度辛星html教程夏季版第六节

    不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格********* ...

  9. 2014年度辛星html教程夏季版第七节

    经过前面六节的学习,我们大致清楚了HTML教程中的基础内容,那么接下来我们开始继续向后推进,可以说,下面我们介绍一下HTML中的区块. ***************区块*************** ...

随机推荐

  1. Java基础知识强化之IO流笔记69：Properties练习之 判断文件中是否有指定的键，如果有就修改值的案例

    1. 我有一个文本文件(user.txt),我知道数据是键值对形式的,但是不知道内容是什么. 请写一个程序判断是否有"lisi"这样的键存在,如果有就改变其值为"100& ...

  2. 自己写http获取网络资源和解析json数据

    虽然github上有很多开源的,方便的jar报,用起来也很方便,但我们也需要了解其中的原理,如何自己不用第三方jar包来获取网络资源 主要代码如下:  因为联网是耗时的操作,所以需要另开一个线程来执行 ...

  3. 读jQuery官方文档：样式

    样式 使用jQuery,无论是设置或者获取元素样式都十分简便. // 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式) $('h1').css('fontSize'); $( ...

  4. mysql同时向一个表中插入多条数据问题！！见详细

    INSERT INTO `表名` (`字段1`,`字段2`,`字段3`,`字段4`) values ('数组1数据1','数组1数据2','数组1数据3','数组1数据4'), ('数组2数据1',' ...

  5. JAXB - XML Schema Types, Binary Data

    Data that has no "natural" representation with printable characters must, for inclusion in ...

  6. RabbitMQ 原文译02--工作队列

    工作队列: 在上一篇文章中我们我们创建程序发送和接受命名队列中的消息,在这篇文章我会创建一个工作队列,用来把耗时的操作分配给多个执行者. 工作队列(任务队列)的主要实现思想是避免马上执行资源密集型的任 ...

  7. C#学习笔记10：Try-catch的用法和引用类型、值类型整理

    Try-Catch: 将可能发生异常的代码放到try中,在catch中进行捕获. 如果try中有一行代码发生了异常,那么这行代码后面的代码不会再被执行了. Try写完了以后,紧接着就要写Catch   ...

  8. Asp.Net Cookie的清除

    背景 最近做到一个asp.net项目,项目中保存用户信息用到了cookie,因此,在注销身份的时候,就需要清除掉cookie. 探索过程 我先是试验了这种代码,在没有特殊声明前,代码都是写在Page_ ...

  9. Java_Web学习路线

  10. Lodop错误汇总

    代码方面 需要修改 LodopFuncs.js 里面的src地址,主要是端口号,端口号需要和服务器里面的程序的端口一样.如下:   调试错误 可以通过查看调用lodop的地方,查看lodop是否为空( ...