zoukankan      html  css  js  c++  java
  • 2014年度辛星解读css第四节

    接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了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.然后我们做出来了一个简易的导航条,读者能够先去完好它,假设读者不去做,我后面再做。

  • 相关阅读:
    目录:数据挖掘
    目录:工具的安装与激活
    目录:Django框架开发Web系统的功能实现过程
    Python3.5在jupyter中使用graphviz画决策树(包括graphviz-2.38.msi的安装)
    2020年全国高校计算机能力挑战赛Python程序设计初赛
    离群异常值与重复数据检测
    数据描述性统计度量方法
    数据挖掘的方法
    Nginx+uWSGI+Django部署方案的详细实现过程
    VMware的联网配置及虚拟机IP配置
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/4005247.html
Copyright © 2011-2022 走看看