CSS学习四：列表css属性、背景css属性、显示与隐藏css属性、三种菜单示例

 

一、列表css声明：

css列表属性，允许你设置、改变列表项的标志或图像作为列表项标志。

  • list-style：简写属性，用于把所有用于列表的属性，设置在一个声明中
  • list-style-image：将图像设置为列表项标志
  • list-style-position：设置列表中，列表项标志的位置
  • list-style-type：设置列表项标志的类型

示例：

        <ul>
            <li>C</li>
            <li>C++</li>
            <li>python</li>
            <li>C#</li>
            <li>JS</li>
            <li>oc</li>
        </ul>

 

        <style>
            li {
                list-style: none; /*去掉列表项的标志
                list-style-image: url(img/timg.jpg);
                list-style-position: inside;
            }
        </style>

 

使用list-style简写的方式，代替上面的style，效果一样：

        <style>
            li {
                list-style: none url(img/timg.jpg) inside;
            }
        </style>

 

以上是内部样式表。

使用行内样式表：

<li style="list-style: disc;">JS</li>

 

 

 

list-style-position的值有：inside和outside

inside：列表项目标记，放置在文本以内，且环绕文本根据标记对齐。

outside：默认值。保持标记位于文本的左侧。

<ul>
            <li>C</li>
            <li>C++</li>
            <li style="list-style: disc outside;">python</li>
            <li style="list-style: disc inside;">C#</li>
            <li style="list-style: disc inside;">JS</li>
            <li>oc</li>
        </ul>

 

 list-style的值，比较多，常用的有：

  • none：无标记
  • disc：默认值。实心圆
  • circle：空心圆
  • square：实心方块
  • decimal：数字
  • lower-alpha：小写英文字母
  • upper-alpha：大写英文字母

 

二、CSS背景

css允许应用纯色作为背景，也允许使用背景图像创建复杂的背景。

css背景相关的属性一：

  • background：简写属性，作用是将背景属性，设置在一个声明中。
  • background-attachment：背景图像是否固定，或者随着页面的其余部分滚动。
  • background-color：设置元素的背景颜色
  • background-image：把图像设置为背景
  • background-position：设置背景图像的起始位置
  • background-repeat：设置背景图像是否，及如何重复。

background简写：url(图像位置) no-repeat fixed；

background-repeat的属性值：

  • no-repeat：不平铺
  • repeat：平铺
  • repeat-x：横向平铺
  • repeat-y：纵向平铺

 示例：

            #box {
                width: 600px;
                height: 480px;
                background-image: url(img/timg.jpg);
                background-repeat: no-repeat;
                background-position: ;
            }
        <div id="box">
            abc
        </div>

 

 

三、显示与隐藏：

display：none隐藏元素，该方式隐藏在页面中，不占位。

visibility：hidden隐藏元素，该方式隐藏的元素在页面中，占位。

border-raduis：数字。以此数字为半径的圆。

 

对以下HTML结构，实现折叠菜单、手风琴菜单、tab菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>导航栏</title>
        <link rel="stylesheet" type="text/css" href="css/good.css"/>
    </head>
    <body>
        <ul id="menu">
            <li>
                <a href="#">good</a>
                <ul>
                    <li>good1</li>
                    <li>good2</li>
                    <li>good3</li>
                </ul>
            </li>
            <li>
                <a href="#">bad</a>
                <ul>
                    <li>bad1</li>
                    <li>bad2</li>
                    <li>bad3</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

 

四、折叠菜单示例

* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
li a {
    color: #008000;
    text-decoration: none;
}
#menu {
    width: 160px;
    margin: 50px;
}
#menu li {
    font-size: 16px;
}
#menu>li {
    background: url(../img/qt.jpg);
    line-height: 24px;
    text-indent: 60px;
}
#menu ul {
    display: none;
}
#menu ul li {
    text-indent: 30px;
}
#menu>li:hover ul {
    display: block;
}

 

 

五、手风琴菜单

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            li {
                list-style: none;
            }
            a {
                text-decoration: none;
                color: #008000;
                font-size: 16px;
            }
            #menu>li,#menu>li>a,#menu>li>ul {
                float: left;
            }
            #menu>li>a {
                display: block;
                width: 35px;
                height: 150px;
                padding: 12px 10px 0 10px;
                background-color: blue;
            }
            #menu>li:hover ul {
                display: block;
            }
            #menu ul {
                display: none;
                width: 100px;
                background-color: #FF0000;
                padding-top: 30px;
            }
        </style>

 

posted on 2018-11-11 15:45  myworldworld  阅读(293)  评论(0)    收藏  举报

导航