【墨夜拎月 · web1.0 · html】列表标签使一些案例学习

墨夜拎月
50 阅读1分钟

简单的使用：


<html>

<head>

<title>项目列表</title>

<style>

<!--

body{

    background-color:#c1daff;

}

ul{

    font-size:0.9em;

    color:#00458c;

    list-style-type:decimal;        /* 项目编号 */

}

-->

</style>

   </head>

<body>

<p>水上运动</p>

<ul>

    <li>freestyle 自由泳</li>

    <li>backstroke 仰泳</li>

    <li>breaststroke 蛙泳</li>

    <li>butterfly 蝶泳</li>

    <li>individual medley 个人混合泳</li>

    <li>freestyle relay 自由泳接力</li>

</ul>

</body>

</html>

加个项目符号



<html>

<head>

<title>项目列表</title>

<style>

<!--

body{

    background-color:#c1daff;

}

ul{

    font-size:0.9em;

    color:#00458c;

    list-style-type:decimal;        /* 项目编号 */

}

li.special{

    list-style-type:circle;

}

-->

</style>

   </head>

<body>

<p>水上运动</p>

<ul>

    <li>freestyle 自由泳</li>

    <li>backstroke 仰泳</li>

    <li class="special">breaststroke 蛙泳</li>

    <li>butterfly 蝶泳</li>

    <li>individual medley 个人混合泳</li>

    <li>freestyle relay 自由泳接力</li>

</ul>

</body>

</html>

图片符号：



<html>

<head>

<title>图片符号</title>

<style>

<!--

body{

    background-color:#c1daff;

}

ul{

    font-family:Arial;

    font-size:13px;

    color:#00458c;

    list-style-image:url(icon1.jpg);    /* 图片符号 */

}

-->

</style>

   </head>

<body>

<p>自行车</p>

<ul>

    <li>Road cycling 公路自行车赛</li>

    <li>Track cycling 场地自行车赛</li>

    <li>sprint   追逐赛</li>

    <li>time trial 计时赛</li>

    <li>points race   计分赛</li>

    <li>pursuit   争先赛</li>

    <li>Mountain bike 山地自行车赛</li>

</ul>

</body>

</html>

  



<html>

<head>

<title>图片符号</title>

<style>

<!--

body{

    background-color:#c1daff;

}

ul{

    font-family:Arial;

    font-size:13px;

    color:#00458c;

    list-style-type:none;                   /* 不显示项目符号 */

}

li{

    background:url(icon1.jpg) no-repeat;    /* 添加为背景图片 */

    padding-left:25px;                      /* 设置图标与文字的间隔 */

}

-->

</style>

   </head>

<body>

<p>自行车</p>

<ul>

    <li>Road cycling 公路自行车赛</li>

    <li>Track cycling 场地自行车赛</li>

    <li>sprint   追逐赛</li>

    <li>time trial 计时赛</li>

    <li>points race   计分赛</li>

    <li>pursuit   争先赛</li>

    <li>Mountain bike 山地自行车赛</li>

</ul>

</body>

</html>

使用列表控件制作垂直导航：

<html>

<head>

<title>无需表格的菜单</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    width:200px;

    font-family:Arial;

}

#navigationul {

    list-style-type:none;               /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigationli {

    border-bottom:1pxsolid#ED9F9F;    /* 添加下划线 */

}

#navigationlia{

    display:block;                      /* 区块显示 */

    padding:5px5px5px0.5em;

    text-decoration:none;

    border-left:12pxsolid#711515;     /* 左边的粗红边 */

    border-right:1pxsolid#711515;     /* 右侧阴影 */

}

#navigationlia:link, #navigationlia:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigationlia:hover{                 /* 鼠标经过时 */

    background-color:#990020;           /* 改变背景色 */

    color:#ffff00;                      /* 改变文字颜色 */

}

-->

</style>

   </head>

<body>

<div id="navigation">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">My Blog</a></li>

        <li><a href="#">Friends</a></li>

        <li><a href="#">Next Station</a></li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>

水平导航制作：


<html>

<head>

<title>菜单的横竖转换</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    font-family:Arial;

}

#navigationul {

    list-style-type:none;               /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigationli {

    float:left;                         /* 水平显示各个项目 */

}

#navigationlia{

    display:block;                      /* 区块显示 */

    padding:3px6px3px6px;

    text-decoration:none;

    border:1pxsolid#711515;

    margin:2px;

}

#navigationlia:link, #navigationlia:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigationlia:hover{                 /* 鼠标经过时 */

    background-color:#990020;           /* 改变背景色 */

    color:#ffff00;                      /* 改变文字颜色 */

}

-->

</style>

   </head>

<body>

<div id="navigation">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">My Blog</a></li>

        <li><a href="#">Friends</a></li>

        <li><a href="#">Next Station</a></li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>




<html>

<head>

<title>菜单横竖转换</title>

<style>

<!--

body{

    background-color:#f8ffd3;

    margin:0px; padding:0px;

}

table.banner{

    background:url(banner_bg.jpg) repeat-x;

    width:100%;

}

table.btn{

    background:url(button1_bg.jpg) repeat-x;

    width:100%;

}

#navigation{

    margin:0px; padding:0px;

    list-style-type:none;

    height:32px;

    font-size:12px;

}

#navigationli{

    text-align:center; width:80px; height:32px;

    background:url(button1.jpg) repeat-x;

    float:left; 

}

#navigationlia{

    padding:10px0px10px0px;

    text-decoration:none;

    display:block;

}

#navigationlia:link, #navigationlia:visited{color:#526d00;}

#navigationlia:hover{

    color:#FFFFFF;

    background:url(button2.jpg) no-repeat;

}

-->

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0" class="banner"><tr><td align="left"><img src="banner1.jpg" border="0"></td></tr></table>

<table cellpadding="0" cellspacing="0"class="btn">

    <tr> 

        <td>

        <ul id="navigation">

            <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>

            <li><a href="#">休闲娱乐</a></li>

            <li><a href="#">常见问题</a></li>

        </ul>

        </td>

    </tr>

</table>

</body>

</html>



<html>

<head>

<title>百度——全球最大中文搜索引擎</title>

<styletype="text/css">

td,p{font-size:12px;}

p{width:600px; margin:0px; padding:0px;}

.ff{font-family:Verdana; font-size:16px;}

#navigation{

    margin:0pxauto;

    font-size:12px;

    padding:0px;

    border-bottom:1pxsolid#00c;

    background:#eee;

    width:600px;height:18px;

}

#navigationli{

    float:left;                 /* 水平菜单 */

    list-style-type:none;       /* 不显示项目符号 */

    margin:0px;padding:0px;

    width:67px;

}

#navigationlia{

    display:block;              /* 块显示 */

    text-decoration:none;

    padding:4px0px0px0px;

    margin:0px;

}

#navigationlia:link, #navigationlia:visited{

    color:#0000CC;

}

#navigationlia:hover{         /* 鼠标经过时 */

    text-decoration:underline;

    background:#FFF;

    padding:4px0px0px0px;

    margin:0px;

}

#navigationli#h{width:56px;height:18px;}       /* 左侧空间 */

#navigationli#more{width:85px;height:18px;}    /* “更多”按钮 */

#navigation.current{                           /* 当前页面所在 */

    background:#00C;

    color:#FFF;

    padding:4px0px0px0px;

    margin:0px;

    font-weight:bold;

}

</style>

   </head>

<body>

<center><br><imgsrc="http://www.baidu.com/img/logo.gif"><br><br><br><br>

<divid="navigation">

<ul>

    <liid="h"></li>

    <li><ahref="#">资 讯</a></li>

    <liclass="current">网 页</li>

    <li><ahref="#">贴 吧</a></li>

    <li><ahref="#">知 道</a></li>

    <li><ahref="#">MP3</a></li>

    <li><ahref="#">图 片</a></li>

    <liid="more"><ahref="#">更 多 &gt;&gt;</a></li>

</ul>

</div>

<pstyle="height:44px;">&nbsp;</p>

<tablewidth="600"border="0"cellpadding="0"cellspacing="0">

    <tr>

    <tdwidth="92"></td>

    <td><form><inputtype="text"name="wd"class="ff"size="35">

    <inputtype="submit"value="百度搜索"></form></td>

    <tdwidth="92"valign="top"><ahref="#">搜索帮助</a><br><ahref="#">高级搜索</a></td>

    </tr>

</table>

</center>

</body>

</html>

实现tab栏效果：


<html>

<head>

<title>流行的Tab菜单</title>

<linkhref="8-9.css"type="text/css"rel="stylesheet">

<styletype="text/css">

<!--

#leftpic{

    width:160px;

    float:left;

    padding-right:15px;

}

#leftpica:link, #leftpica:visited{

    color:#006eb3;

    text-decoration:none;

}

#leftpica:hover{

    color:#000000;

    text-decoration:underline;

}

img{

    border:1pxsolid#0066b0;

    margin-bottom:5px;

}

ul#list{

    list-style-type:none;

    margin:0px;

    padding:5px0px5px2px;

}

ul#listli{

    line-height:18px;

}

ul#listlia:link{

    color:#000000;

    text-decoration:none;

}

ul#listlia:visited{

    color:#333333;

    text-decoration:none;

}

ul#listlia:hover{

    color:#006eb3;

    text-decoration:underline;

}

-->

</style>

   </head>

<body id="home">

<ul id="tabnav">

    <li class="home"><a href="8-9_home.html">首页</a></li>

    <li class="news"><a href="8-9_news.html">新闻</a></li>

    <li class="sports"><a href="8-9_sports.html">体育</a></li>

    <li class="music"><a href="8-9_music.html">音乐</a></li>

    <li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>

    <li class="blog"><a href="8-9_blog.html">博客</a></li>

</ul>

<div id="content">

    <span id="leftpic">

        <a href="#"><img src="pic1.jpg"><br>

        <center>追忆往事，展望未来</center></a>

    </span>

    <ul id="list">

        <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>

        <li><a href="#">[博客] 自由博客新版正式发布，网友...</a></li>

    </ul>

</div>

</body>

</html>
avatar
文章
阅读
粉丝