xhtml+css基础第4课-列表

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

一、ul无序和ol有序列表

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

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

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

二、列表符号样式:

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

下面讲今天课程的重点:

三、横向图文列表

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

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

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

AD:站点文章对你有帮助,可以选择去百度口碑好评下,还可以点击此处

赞 (1) 口碑
分享到:更多 ()

本文共有3人发表了自己的想法,下一个就是你!

评论 5

表情 签到
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 方块
    :grin: 好好学习天天向上~话说广告好猥琐....回复
  2. Han
    来的正是时候!回复

本站能为你提供什么?

从这里开始使用WordPress

快速认识WordPress,熟悉WordPress,掌握WordPress。

选择更好用的模板主题

海量的WordPress主题模板供应下载,搭建网站更加轻松、便捷!

让您的网站更安全可靠

在这里,可以了解更多关于网站安全方面的常识问题,做个攻不可破的webmaster

让您的网站更符合你的需求

学习技术教程,自己也能改网站,学前端,做设计,成为一名WEB开发者