接下来的这一节我计划讲解的是超链接和列表的样式，然后我们做出一个导航栏出来，其实导航栏是非常常见的，但是我们这里做得这个有点并不那么完善，等我们学完了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. 老蜗牛写采集：一个漂亮的客户端-几个C#平台下的Winform 皮肤控件

    搞采集多年,避免不了搞个简单的UI来曹州,所谓人靠衣装马靠鞍,一套漂亮的皮肤会给你的程序带来高大上的感觉.有时候老板也是看心情的,好的东西总归可以避免点缺点.今天给大家介绍几个曾经研究过的WinFor ...

  2. linux下修改环境变量

    把/etc/apache/bin目录添加到PATH中,方法有三: 1.#PATH=$PATH:/etc/apache/bin 使用这种方法,只对当前会话有效,也就是说每当登出或注销系统以后,PATH ...

  3. Android_Intent_startActivityForResult

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  4. C++获取文件长度

    ifstream fin("example.txt", ios::binary); fin.seekg(0, ios::end); // 设置指针到文件流尾部 streampos ...

  5. oracle的sid

    SID是一个数据库的唯一标识符!是你在建立一个数据库时系统自动赋予的一个初始ID,虽说他和数据库名(DB_NAME)都是一个数据库的唯一标识符,但是在作用上就有不小区别.SID主要用于在一些DBA操作 ...

  6. ViewState原理

    1.IsPostBack原理 1.1 所有的服务端控件,都必须放在runat="server"的表单里面,runat="server"的表单会生成__VIEWS ...

  7. linux远程执行命令

    经常要部署多台服务器上面的应用,如果一个个机器的登录太麻烦. 所有就想到编写一个脚本来部署不同的服务器 前提条件: 配置ssh免登陆 (1)命令行执行登录并且在目标服务器上执行命令 ssh user@ ...

  8. 第十篇、自定义UIBarButtonItem和UIButton block回调

    // 自定义导航栏左边按钮 self.navigationItem.leftBarButtonItem = [JQBlockedBarButtonItem blockedBarButtonItemWi ...

  9. Css颜色定义的方法汇总color属性设置方式

    颜色的定义方式用rgb()里面带上十进制的数字来定义. color:rgb(211,123,135); 用预定义的颜色名称. color:red; rgba()最后一个参数是不透明度. color:r ...

  10. Container容器控件的使用、Hbox与Vbox布局管理器的使用、以及AjaxAction前后台事件响应

    1.由于有前后台交互功能,需要在Spring上下文中注册一个用于提供服务的bean,对于这个bean使用Spring提供的@Component标注,如果需要使用@Component注解,需要在项目中W ...