尽可能简洁的用CSS写一个漂亮的横向菜单

简介: 网页布局经常要用到DIV+CSS,CSS虽然不难,但是要精通也没有那么容易,为了学点CSS,我也做了一个菜单,拿出来献丑。 做的时候有个疑问,为什么去掉position:absolute;背景色就不会横向100%撑满,请拍砖指教。

      网页布局经常要用到DIV+CSS,CSS虽然不难,但是要精通也没有那么容易,为了学点CSS,我也做了一个菜单,拿出来献丑。

做的时候有个疑问,为什么去掉position:absolute;背景色就不会横向100%撑满,请拍砖指教。

效果图:

 

CSS部分:

   

     ul{
		padding:0px;  
		background:url(button1_bg.jpg) repeat-x; width:100%; position:absolute; 
	}
	ul li{
	    list-style:none; 
		background:url(button1.jpg) repeat-x;
	    float:left;
		text-align:center;
		width:80px; 
		height:32px;
		font-size:12px;
	}
	
	ul li a{ 
		display:block;  /*区块显示,横向撑满整个li*/
		color:#000;
		text-decoration:none; 
		padding:9px 0px 10px 0px;
	}
	
	ul li a:hover{ 
		background:url(button2.jpg) no-repeat; 
		color:#FFF;  
	}

 

HTML部分:

<ul>
	<li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    
</ul>  

链接下载

目录
相关文章
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
338 54
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
592 21
|
前端开发 计算机视觉
|
JavaScript 前端开发
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
1650 2
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
|
前端开发 编译器 Python
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
|
前端开发
HTML+CSS实现菜单的3D翻转特效
HTML+CSS实现菜单的3D翻转特效
|
JSON 前端开发 数据格式
CSS横向滚动条自定义样式
CSS横向滚动条自定义样式
550 0
|
JSON 前端开发 数据格式
CSS横向滚动条实现
CSS横向滚动条实现
280 0
|
前端开发
CSS 等距菜单悬停效果
纯HTML和CSS实现立体等距菜单悬停,动态效果由CSS实现
CSS 等距菜单悬停效果

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    718
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    582
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    585
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    358
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    675
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    855
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1688
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    403
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1395
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    700