^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 阿里云1核2g仅需102元/年,今日10点开抢

xhtml+css基础第4课-列表

阿里云双12限时特惠

我们知道,像我们 wordpress 侧边栏的最新文章、热门文章等等、以及点赞墙其实都是一个列表,无非就是有的是文字列表,有的是图片列表,那么我们如何能做到那样的效果呢,跟着陌小雨学习 xhtml+css 基础系列教程第 4 课-列表的课程吧。

一、ul 无序和 ol 有序列表

无序列表是 web 标准布局中最常用的样式,如下面的代码:

<div id="layout">
<ul>
<li><a title="xhtml+css 基础系列教程第 3 课-二列和三列布局
" href="https://dedewp.com/549.html" target="_blank">xhtml+css 基础系列教程第 3 课-二列和三列布局
</a></li>
<li><a title="xhtml+css 基础系列教程第 2 课-列布局" href="https://dedewp.com/532.html" target="_blank">xhtml+css 基础系列教程第 2 课-列布局</a></li>
<li><a title="xhtml+css 基础系列教程第 1 课" href="https://dedewp.com/520.html" target="_blank">xhtml+css 基础系列教程第 1 课</a></li>
</ul>
</div>

无序列表是以 ul 包含 li 的形式,默认每行前的符号是圆点,可以通过样式表改为无、方块,空心圆等。

有序列表是以 ol 包含 li 的形式,是以数字为项目符号的。将上述代码中的 ul 替换为 ol 即可。

二、列表符号样式:

这里主要讲一下图片样式的用法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#layout ul { list-style: none; }
#layout ul li { background: url(/images/icon.gif) no-repeat 0px 4px; padding-left: 20px; }
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a title="xhtml+css 基础系列教程第 3 课-二列和三列布局" href="https://dedewp.com/549.html" target="_blank">xhtml+css 基础系列教程第 3 课-二列和三列布局</a></li>
<li><a title="xhtml+css 基础系列教程第 2 课-列布局" href="https://dedewp.com/532.html" target="_blank">xhtml+css 基础系列教程第 2 课-列布局</a></li>
<li><a title="xhtml+css 基础系列教程第 1 课" href="https://dedewp.com/520.html" target="_blank">xhtml+css 基础系列教程第 1 课</a></li>
</ul>
</div>
</body>
</html>

下面讲今天课程的重点:

三、横向图文列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
<li><a href="#"><img src="/images/pic.jpg" width="68" height="54" />陌小雨</a></li>
</ul>
</div>
</body>
</html>

上面的代码用到了第三节课中讲的 float 属性,去瞧瞧→

当我们加入很多图片后,如何实现后父容器高度自适应呢,实现方法也很简单,给父容器加一个 overflow:auto;属性即可,即变为:

#layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto;}

好了,今天课程就到这里,下一课我们讲相对定位和绝对定位。

让小雨知道,这篇文章帮到了你
扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 方块
    :grin: 好好学习天天向上~话说广告好猥琐....
    • 陌小雨网站管理员
      @方块 那你使劲的打他呀, :grin:
  2. Han
    来的正是时候!
    • 陌小雨网站管理员
      @Han