网赚妈妈

 找回密码
 立即注册
搜索
查看: 1075|回复: 0

[新手网赚] 如何利用 CSS 和ul、li制作竖向菜单

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-19 20:07:29 | 显示全部楼层 |阅读模式

    菜单是网页中必不可少的元素,之前曾发表过一篇利用 td 和 css 来制作只有左右边框的导航菜单的文章。今天向大家介绍一种利用 css 和 ul、li 来制作的竖向菜单的方法。案例效果如下图所示。

    sQo0B2d5QU2qCQbM.jpg

    首先,先在网页中插入项目列表:一种方法是在代码视图输入以下代码(下图)。图中的标签"<ul></ul>"是项目列表标签,"<li></li>"是列表项。"<a></a>"是超链接标签,而 href= "#"是制作了一个空链接,即只显示链接的效果,但却没有链接的地址。

    rXxNACC3Yj3N6IGT.jpg

    另一种方法是选择[插入]菜单>HTML>文本对象>项目列表(如下图)。这样在设计视图中会出现一个默认的列表项,并且每回车一次,就会再增加一个列表项。

    fU5yz36LAw7YIwlZ.jpg

    插入的列表效果如下图:

    RUtJit3jtJCGigt4.jpg

    现在,要想达到本案例的效果,需要解决三个问题,分别是:①去掉项目列表符号;②添加边框和背景;③改变超链接的样式。下面我们依次解决。

    1、去掉项目列表符号

    列表符号的样式是 ul 的属性项,所以我们首先在 ul 的 CSS 代码中写入"list-style-type:none",这是设置列表符号为的 CSS 代码。如下图:

    W7rRppa107MKz7KC.jpg

    效果为:

    QXG08q8z780XO8po.jpg

    2、添加边框和背景

    要想为每一个列表项都添加边框和背景,可以将每一个列表项都看做是一个盒子,运用盒子模型概念,代码如下:

    fNcNThrxuxmBwb6X.jpg

    其中,ul 和 li 是标签名,其 css 样式不需引用,直接作用在网页中的<ul>和<li>标签中。而类".menu"需要引用,代码如下图:

    ukK8YYT4lyKkvYw4.jpg

    此时效果为:

    lx8u4H4htHnTv0TT.jpg

    3、改变超链接样式,代码如下图所示:

    TfsYPLI7xcXLl87X.jpg

    效果完成!

    ZyzAw02WMWw8Nzun.jpg

    全部的代码为:

    L4mH6HQ1jTvGZTch.jpg

    以上就是本次文档的全部内容。希望对大家学习网页设计和 CSS 有所帮助。如果有某些地方我没有说清楚,请留言哦,我会尽可能的解答^_^

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 21:17 , Processed in 0.177038 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

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