接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了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第五节

    本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...

  2. 2014年辛星解读css第六节

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

  3. 2014年辛星解读css第一节

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

  4. 2014年辛星解读css第二节

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

  5. 2014年辛星解读css第三节

    第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...

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

    上面一节中我们介绍了HTML文件的书写和几个标签,接下来我们来认识几个其他的标签,这里我们主要介绍一下head标签和文本标签. ***************head标签*************** ...

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

    从今天起开始在博客园开启自己的html教程啦,先从第一节开始把,首先推荐一个网站,就是http:/www.w3cschool.cc,这是一个公开的教学网站,但是它有一个问题,那就是虽然很全面,但是不是 ...

  8. 2014年度辛星css教程夏季版第四节

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

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

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

随机推荐

  1. 基于visual Studio2013解决面试题之0603调整数组

     题目

  2. Fedora 17 下安装codeblocks

    Fedora 17 下安装codeblocks:        1.直接从yum源安装:        sudo yum install codeblocks        2.源码安装        ...

  3. Theano学习笔记(二)——逻辑回归函数解析

    有了前面的准备,能够用Theano实现一个逻辑回归程序.逻辑回归是典型的有监督学习. 为了形象.这里我们如果分类任务是区分人与狗的照片. 首先是生成随机数对象 importnumpy importth ...

  4. android launcher开发之图标背景以及默认配置

    1:然后我自己看了一下桌面图标的载入过程: 桌面第一次载入时是默认读取一个xml配置文件,完毕配置工作.这个配置文件在Launcher文件夹下, 路径是:\Launcher\res\xml\defau ...

  5. WebService 之 WSDL文件 解说

    恩,我想说的是,是不是常常有人在开发的时候,特别是和第三方有接口的时候,走的是SOAP协议,然后用户给你一个WSDL文件,说依照上面的进行适配,嘿嘿,这个时候,要是你曾经没有开发过,肯定会傻眼,那假设 ...

  6. Android开发系列(二十八):使用SubMenu创建选项菜单

    大部分手机上边都会有一个"MENU"键,在一个应用安装到手机上之后,能够通过"MENU"显示该应用关联的菜单. 可是,从Android 3.0開始,Androi ...

  7. Effective C++_笔记_条款01_视C++为一个语言联邦

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) C++的各种能力和特性使它成为一个无可匹敌的工具,但也可能引发某 ...

  8. ABAP常用字符串处理

    1.SEARCH搜索指定字符串 REPORT Z_CHAR. ). MOVE 'Welcom to sap world!' to str. SEARCH str for 'sap'. 如果查找成功sy ...

  9. CF卡技术详解——笔记

    知识太全面了,摘抄摘不完,还是粘过来加上注释和笔记吧. 重点以及断句用加粗,注释用红括号. 一.CF卡技术及规格 一.CF卡技术及规格 1.CF卡简史 随着数码产品的高速普及,近年来闪存卡也进入了高速 ...

  10. Selenium HtmlUnitDriver 多浏览器的支持

    1.HtmlUnitDriver WebDriver包括一个基于HtmlUnit的无界面实现,称为HtmlUnitDriver,即使用HtmlUnit时并不会打开真实的浏览器,而是在内存中执行代码,因 ...