请选择 进入手机版 | 继续访问电脑版

驱动 化学 物理论文 酒店管理系统 08cms 第七章 qq空间 放大电路 英语论文 下载 脆梨漫画 起诉 精品课 奇迹MU 站帮网 片资源库 爱家 智能门铃 数据库清空 翻译软件

查看: 1238|回复: 0

教你了解DIV+CSS系列教程(第7讲)

[复制链接]
发表于 2012-4-25 00:42:39 | 显示全部楼层 |阅读模式
  在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() 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的两个基本应用,希望大家练习一下以便熟悉内容

相关帖子

回复

使用道具 举报

使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表