html5中ul以及li的用法以及实战!

原创 qw296609675 随笔 学习知识篇幅 687阅读 2017-05-25 17:17:35 举报

<ul>标签, 定义无序列表(从上到下的顺序排列)!
ul li 都为块级元素
当有li时,会出现ul自带的一个黑点,可用css进行去除,一般的导航,大都是用ul,li来设置的,下面我们来做一个漂亮的导航栏

html 代码

这是随便打了一个ul li的代码,当然我们要做的稍微好看一点.前面的黑点不好看,我们来取消掉! 添加 list-style-type:none;html 代码

这就大致出现了一个导航栏了,不过要让他横向,就要给每一个li加一个css浮动(float),这个浮动暂时不做解释了,后面会给浮动单独开一篇,来让大家更容易的了解,浮动带来的好处以及弊端!
顺便我们来给li旁边加一定的距离,这样看着就不会那么拥挤 margin-left:; 指的是各个外边框的距离 我们暂且给50px
html 代码

感觉是不是有点样子了? 剩下我们就继续慢慢加样式就好了。

ps:如果要给li添加可点击效果,方法有很多,这里推荐给每个li里面加一个<a>标签.当然是用a标签后会出现一些a标签自带的样式,可是用css进行改变.这边不进行一一讲解了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复