`

css列表样式

    博客分类：
  • Css
css 
阅读更多
1. css列表样式

1) 设置列表的符号 

list-style-type: square;

<style type="text/css">
    ul,ol{
        list-style-type: square;
    }
</style>
</head>
<body>
<ul>
    <li>主页</li>
    <li>我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ul>
<ol>
    <li>主页</li>
    <li style="list-style-type: circle;">我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li style="list-style-type: none;">关于我</li>
</ol>
</body>


2) 设置列表图片符号 

list-style-image: url("../li.png");

<style type="text/css">
    ul,ol{
        list-style-image: url("../li.png");
    }
</style>
</head>
<body>
<ul>
    <li>主页</li>
    <li>我的博客</li>
    <li style="list-style-image: url('../image.png');">我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ul>
<ol>
    <li>主页</li>
    <li>我的博客</li>
    <li>我的相册</li>
    <li>留言</li>
    <li>关于我</li>
</ol>
</body>


3) 创建简单导航菜单 

<style type="text/css">
#navigation {
    width:120px;
    font-family:Arial;
    font-size:14px;
    text-align:right
}    
#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
}
#navigation li a{
    display:block;
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
    <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>
</div>
</body>


<style type="text/css">
#navigation {
    font-family:Arial;
    font-size:14px;
    text-align:center;
}    

#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
    float: left;
}
#navigation li a{
    width:120px;
    display:block;
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
    <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>
</div>
</body>
分享到：
| css超链接样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS列表样式设计

    总结，CSS列表样式设计涵盖了许多方面，从基础的符号类型更改到高级的动画效果和响应式设计。熟练掌握这些技巧，可以使您的网页列表更加丰富多彩，提升用户体验。通过不断的实践和创新，您还可以探索出更多个性化的...

    好看的css table列表样式

    好看的css table列表样式

    CSS3实现的漂亮动感有序列表特效.

    CSS3实现的漂亮动感有序列表特效.CSS3实现的漂亮动感有序列表特效.

    CSS作业实验三

    在本“CSS作业实验三”中，我们将深入探讨和学习CSS（Cascading Style Sheets）在构建网页样式和布局中的核心概念与应用。这个实验旨在帮助你熟练掌握CSS技术，以便创造出美观、响应式的网页设计。 首先，CSS是用于...

    非常酷炫的css样式菜单

    本主题“非常酷炫的css样式菜单”聚焦于如何利用CSS创建吸引人的交互式菜单，这种菜单常用于网站的主导航，帮助用户轻松浏览网站的不同部分。 首先，CSS菜单的设计通常涉及到以下几个关键点： 1. **布局与定位**：...

    css列表

    综上所述，CSS列表样式提供了丰富的定制选项，帮助设计师创建各种各样的列表，以满足不同网站和应用的需求。通过结合使用背景图像、伪类选择器、布局属性等，我们可以打造出富有吸引力和功能性的排行榜或书籍推荐...

    30个大屏模板带html css 源码

    大屏可视化，里面有Html css等文件，方便大家使用 能学到什么: 可直接在项目中使用代码。让后端工程师也能用上简单的大屏代码。 阅读建议: 此大屏代码供大家学习，提高。帮助扩宽思路。大家都做优化，方便开发出更...

    DIV CSS问答排行列表样式代码.zip

    标题 "DIV CSS问答排行列表样式代码.zip" 涉及的核心技术主要集中在前端网页布局和设计上，特别是使用HTML和CSS来实现一个交互式的问答排行榜列表。在这个项目中，开发者可能利用了HTML5的结构元素来组织内容，如`...

    CSS通用样式基本文档

    通过以上分析可以看出，这套CSS通用样式集合覆盖了前端开发中常见的布局需求，如全局样式设置、文档结构样式、输入控件样式、列表样式、图片样式、链接样式、文本对齐方式以及其他常用样式。这些样式不仅能够帮助...

    CSS样式初始化commonInitialize.css

    3. **元素样式初始化**：针对常见的HTML元素，如`h1`到`h6`标题、段落`p`、列表`ul`和`ol`、链接`a`等，进行统一的样式设置，如文本颜色、字体、对齐方式等。 4. **清除浮动**：为了避免浮动元素导致的父级元素高度...

    CSS层叠样式表技术参考手册

    - **列表样式**：展示如何设置列表样式。 - **列表应用**：演示列表在网页设计中的应用。 - **7.8 CSS表格实例** - **表格布局**：展示如何设置表格布局。 - **表格样式**：演示如何美化表格。 - **7.9 轮廓...

    div css教程TOP排行榜或新闻列表最标准div css样式表代码写法

    本教程将深入讲解如何使用`div`和`css`来创建一个高质量的“TOP排行榜”或“新闻列表”的样式表代码。 1. **理解Div元素**： `div` 是 "division" 的缩写，是一个块级元素，意味着它默认占据整个宽度并换行显示。`...

    css2.0样式表中文手册

    CSS2.0提供了控制列表符号和列表项样式的能力，以及设置边框宽度、样式和颜色的选项。边框可以是实线、虚线、点线等，并且可以独立设置每一边的样式。 **8. 溢出和透明度** `overflow`属性用于控制内容溢出其容器时...

    jQuery+div+css选项卡列表样式

    本项目结合jQuery、div和CSS实现了一个兼容IE6、7、8以及Firefox的选项卡列表样式，适用于新闻文章和图片发布类网站。 首先，让我们深入理解每个部分的作用： 1. **jQuery**：jQuery 提供了一组强大的 API，使得...

    CSS3默认样式

    `去除列表项目的默认项目符号，便于自定义列表样式。 ```css ol, ul { list-style-type: none; } ``` #### 五、清除浮动 1. **浮动元素清理**：`.clears`类使用伪元素清除浮动，确保容器正确包裹其内部浮动...

    css 链接样式.

    同时，通过CSS Grid或Flexbox，可以创建复杂的链接布局，如网格布局的链接列表。 总结，CSS链接样式是网页设计中不可或缺的一部分，它使我们能够自定义链接的外观，提升用户体验。理解并熟练运用链接的四种状态和伪...

    CSS.rar_css_css样式_css网页样式_html_网页模板

    **压缩包子文件的文件名称列表** 仅列出了“样式表模版”，这可能是一个CSS文件或者一个包含多个CSS文件的文件夹。如果是一个CSS文件，那么它可能包含了全局的样式规则，用于快速应用到整个网站；如果是文件夹，里面...

Magicbox
Global site tag (gtag.js) - Google Analytics