电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

如何用CSS制作横向菜单 让ul li横向排列及圆点处理VIP免费

如何用CSS制作横向菜单 让ul li横向排列及圆点处理_第1页
1/3
如何用CSS制作横向菜单 让ul li横向排列及圆点处理_第2页
2/3
如何用CSS制作横向菜单 让ul li横向排列及圆点处理_第3页
3/3
如何用CSS制作横向菜单让ulli横向排列及圆点处理我们先建立一个无序列表,来建立强化美术培训学校导航菜单的结构。代码是:
  • 首页
  • 杜建奇
  • 走进强化
  • 师资力量
  • 招生资讯
  • 优秀作品
  • 录取过线
  • 资讯中心
  • 视频中心
  • 联系我们
效果是:•首页•杜建奇•走进强化•师资力量•招生资讯•优秀作品•录取过线•资讯中心•视频中心•联系我们第二步:隐藏li的默认样式,去掉圆点因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:
  • 首页
  • 杜建奇
  • 走进强化
  • 师资力量
  • 招生资讯
  • 优秀作品
  • 录取过线
  • 资讯中心
  • 视频中心
  • 联系我们
CSS定义为:.testul{list-style:none;}说明:“.testul”表示我要定义的样式将作用在test的层里的ul标签上。现在的效果是没有圆点了:•首页•杜建奇•走进强化•师资力量•招生资讯•优秀作品•录取过线•资讯中心•视频中心•联系我们第三步:关键的浮动这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的左面。CSS定义为:.testli{float:left;}效果是:•首页•杜建奇•走进强化•师资力量•招生资讯•优秀作品•录取过线•资讯中心•视频中心•联系我们看,菜单变横向了。就这么简单!下面需要做的就是优化细节了。

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

如何用CSS制作横向菜单 让ul li横向排列及圆点处理

您可能关注的文档

墨香书阁+ 关注
实名认证
内容提供者

热爱教学事业,对互联网知识分享很感兴趣

相关文档

热门下载

相关标签

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部