接下来的这一节我计划讲解的是超链接和列表的样式，然后我们做出一个导航栏出来，其实导航栏是非常常见的，但是我们这里做得这个有点并不那么完善，等我们学完了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代码如下：

<html>

<head>

    <title>2014年辛星CSS教学夏季版</title>

    <link rel="stylesheet" type="text/css" href="my.css">

</head>

<body>

    <ul>

        <li><a href="#">辛星</a></li>

        <li><a href="#">小倩</a></li>

        <li><a href="#">小楠</a></li>

        <li><a href="#">辛勇</a></li>

        <li><a href="#">辛强</a></li>

    </ul>

</body>

</html>

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

ul{list-style-type: none;}

a{text-decoration: none;}

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. Mysql命令行连接

    mysql在线参考手册地址: http://dev.mysql.com/doc/refman/5.1/zh/tutorial.html#connecting-disconnecting 在linux平 ...

  2. 如何打开“USB调试”模式？

    请首先确认您的系统版本, 点击「设置」-「关于手机」查看您当前的手机版本号. 如果您使用的是 Android 3.2及以下系统,请按以下步骤操作: STEP1:在应用列表选择「设置」进入系统设置菜单: ...

  3. TCP/IP协议原理与应用笔记04：子网掩码

    1. 子网掩码 是IP 参照物:分网段用的! 比如 192.168.0.1 和192.168.0.2(1).子网掩码为 255.255.255.0那么192.168.0.X 在同一个网段,能互相访问. ...

  4. 如何去除掉inline-block元素之间的默认间距

    前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...

  5. LoadRunner测试问题

    1.关于Error -27791: Error -27790:Error -27740: 错误如下: Action.c(198): Error -27791: Server has shut down ...

  6. epoll讲解--转自”知乎“

    http://my.oschina.net/dclink/blog/287198 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套 ...

  7. jquery checkbox的判断和设置方法

    jquery的操作复选框偶尔能用到,每次都是百度去查,不得不说现在百度的搜索真的很垃圾,好多特别老的文章都排在前面,想要甄别出有用的东西挺费劲.脑子又记不住这么多东西,好记性不如烂笔头,还是记下来吧 ...

  8. MSP430常见问题之工作模式和功耗类

    Q1:1,MSP430进入LP 模式后,CPU 停止运行,那么,进入中断执行退出后,由于SR的恢复,导致还处于LP 模式,是否意味着,CPU 在退出中断后立即停止了呢?2,也就是说,进入LP 模式后, ...

  9. 基于Selenium2+Java的UI自动化(4) - WebDriver API简单介绍

    1. 启动浏览器 前边有详细介绍启动三种浏览器的方式(IE.Chrome.Firefox): private WebDriver driver = null; private String chrom ...

  10. SonarQube(5.0.1) 环境的安装配置

    SonarQube 安装步骤 确定 JDK 和 MySQL 已经成功安装. 下载 SonarQube 及工具 SonarQube Runner,下载地址:http://www.sonarqube.or ...