第7讲 内容细化 list部分的应用
在XHTML中,有一种对应HTML的table的标记,它就是list的两种标记.分别是ul和li.
你可以把它们看做一个整体,像目录一样,ul是一级标题,而li是二级标题,它们可以组成很多样式,比如说纵列排行的样式,也可以通过前面我们所讲的float组成横向列表样式.
我们先用一段代码来简单认识下
Body代码部分:
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
你可以自己新建一个网页,把代码放入,看到他们明显的区别.
当然,这种单纯的应用我们可以通过CSS把它复杂化,或者说是美化.
我们可以设定一个背景图,比如类似下面的图片
18*265的图
我们可以设定整个区域的<li>标记
list-style:none,先消除原始的li的识别符号
然后在<ul>中加入背景图
设定向左浮动25px,每行高27px,书写行高line-height:27px,看下效果
HTML body部分代码
复制内容到剪贴板
代码:
<ul id="l"><!--ID为l-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>CSS部分
复制内容到剪贴板
代码:
#l{background:url(http://www.yannei.com/video/system/template/fashion/images/top10.gif) no-repeat left; padding-left:25px;}
/*设定背景图,不重复,左靠,内容向左浮动25px*/
#l li{list-style:none; line-height:27px; height:27px;}
/*list样式无,书写行高27,高度27*/下面我们换一种,用浮动实现横排的美化,我们用CSS进行简单的美化
看下和上面相同的HTML代码,不同CSS实现的不同效果吧
CSS部分
复制内容到剪贴板
代码:
#l li{padding-left:5px; border-right:1px solid #000000; float:left; list-style:none; height:20px; line-height:20px;}
/*统一内容向左浮动5px,右边框1px宽,样式为基本,颜色为黑色,统一向左浮动,list样式无,高度20px,书写高度20px*/今天的讲解就到这里结束了.主要讲了list的两个基本应用,希望大家练习一下以便熟悉内容
下周讲解内容:内容细化: <a>标记的华丽应用
我的助手
