首页 > 软件开发 > CSS >

div+css制作简单导航菜单

来源:互联网 2023-03-16 19:17:41 127

div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

方法/步骤

  • 1

    1.div css制作简单导航菜单,首先看效果图:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 2

    2.代码如下:m7d办公区 - 实用经验教程分享!

    首先建立 4个超链接m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 3

    3.预览效果:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 4

    4.添加如下样式:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 5

    5.预览效果:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 6

    6.发现链接竟然是竖着排列的,这是因为display:block的属性决定的,现在把a标签这个行内元素变为了块级元素,而每个块级元素默认是占满整个一行的(无论多宽),后边的元素会另起一行。m7d办公区 - 实用经验教程分享!

    那现在要让他们一行展示怎么办?很简单,加个属性float:left;m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 7

    7.预览效果:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 8

    8.好吧,效果出来了,但这样式……m7d办公区 - 实用经验教程分享!

    美化一下,让每个链接都有个间距,而且文字居中。m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 9

    9.预览效果:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 10

    10.再次美化,给它加个滑动的效果,而且去除下划线m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 11

    11.最终预览效果:m7d办公区 - 实用经验教程分享!

    div css制作简单导航菜单m7d办公区 - 实用经验教程分享!

  • 12

    12.简单吧,其实所有的链接效果的基本原理都是这个,更炫酷一点的无非是给它增加几个背景图片而已!m7d办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!m7d办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码