如何用CSS制作横向菜单 让ul li横向排列及圆点处理VIP免费
- 阅读 198
- 下载 21
- 格式 doc
- 大小 31 KB
- 约3页
- 2024-11-12 发布于河南
- 收藏
- 点赞(0)
- 海报
- 举报
如何用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、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。