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

    假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...

  2. c#_DropdownList Panel Textbox 控件交互使用，有autopostback和没有的区别

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  3. Editing and Deleting Data

    Editing and Deleting Data In the previous chapter we've come to learn how we can use the zend-form a ...

  4. 在 iOS 8 中使用模糊效果

    在 iOS 7 出來一個背景模糊的效果, Apple 官方的 sample code 則有提供怎麼使用 vImage, Quartz 來實作這個效果.接著在 iOS 8 出來之後,則提供了  UIVi ...

  5. CSS——选择器

    css选择器 css选择器可分为:标签(元素)选择器,ID选择器,类选择器,属性选择器,后代选择器,子代选择器,相邻兄弟选择器和兄弟选择器.... 标签选择器: //E{attr:value;attr ...

  6. JAVA_Gson_example

    package cn.kjxy.GSON; import java.util.List; import cn.kjxy.JSON.HttpHelpers; import com.google.gson ...

  7. Redis failover过程

    在Leader触发failover之前,首先wait数秒(随即0~5),以便让其他sentinel实例准备和调整.如果一切正常,那么leader就需要开始将一个salve提升为master,此slav ...

  8. -bash: lampp: command not found解决方案

    在/opt目录下安装完lampp后,需要到/opt/lampp/下执行lampp启动或者停止服务,如果在其余目录下执行lampp,会提示:-bash: lampp: command not found ...

  9. (译文)12个简单(但强大)的JavaScript技巧(一)

    原文连接: 12 Simple (Yet Powerful) JavaScript Tips 我将会介绍和解析12个简单但是强大的JavaScript技巧. 这些技巧所有的JavaScript程序员都 ...

  10. hasshmap输出value

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; pub ...