(1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口.
(2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把 元素设 display 属性设置成 inline-block .这在大多数浏览器中都有效. 针对IE7 可以加入下面一段条件注释来达到同样效果
复制代码 代码如下:
(3) 在途中看到前两个菜单有图标,实际上每个菜单都可以添加图标, 没个菜单有两个图标 , 一个是初始状态, 一个是鼠标滑过状态. 它们的命名规则是 , 如果初始状态是tubiao.jpg , 则鼠标滑过图标必须是 tubiao-hover.jpg. 图标的大小必须是 220px * 25px. 那如何指定每个菜单的图标呢? 可以在HTML里面指定. 比如在随后的代码中能看到.
复制代码 代码如下:
图书音像
这时初始状态的图片地址,鼠标滑过图片不用指定,但要和初始图片在同一目录下.
下面是完整的源代码文件 sidebar.html
复制代码 代码如下:
#sidebar-menu {
border-left : 1px solid #F93;
width : 237px;
margin : 0;
padding : 0;
background : #FFF7F0;
}
#sidebar-menu > ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu > ul > li {
list-style : none;
padding : 0;
margin : 0;
border-bottom : 1px solid #FDEADB;
position : relative;
}
#sidebar-menu > ul > li.selected {
background : #FFF;
border-top : 1px solid #F93;
border-bottom : 1px solid #F93;
}
#sidebar-menu > ul > li.first {
border-top : 1px solid #F93;
}
#sidebar-menu > ul > li.last {
border-bottom : 1px solid #F93;
}
#sidebar-menu .menu-item {
background : #FFF7F0 no-repeat left center;
height : 32px;
border-right : 1px solid #F93;
z-index : 10000;
position : relative;
}
#sidebar-menu > ul > li.selected .menu-item {
border-right : 1px solid #FFF;
background : #FFF no-repeat left center;
}
#sidebar-menu .menu-item span {
font-size : 13px;
font-weight : bold;
height : 32px;
line-height : 32px;
padding-left : 35px;
padding-top : 2px;
display : inline-block;
}
#sidebar-menu .menu-panel {
padding : 10px 20px;
display : none;
border : 1px solid #F93;
width : 560px;
position : absolute;
left : 236px;
top : -1px;
z-index : 5000;
min-height : 50px;
box-shadow: 1px 1px 4px #888888;
}
#sidebar-menu div.menu-panel.selected {
display : block;
}
#sidebar-menu div.menu-panel ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu div.menu-panel ul li {
list-style : none;
padding : 5px 0px;
margin : 0;
}
#sidebar-menu div.menu-panel>ul>li>h2 {
margin : 0;
padding : 0;
padding-top : 2px;
font-size : 13px;
color : red;
float : left;
width : 60px;
}
#sidebar-menu div.menu-panel>ul>li>div.link-list {
float : left;
padding-left : 10px;
width : 450px;
}
#sidebar-menu div.menu-panel div.link-wrapper {
display : inline-block;
padding : 3px 0px;
}
#sidebar-menu div.menu-panel div.link-wrapper span {
font-size : 13px;
color : #888;
padding-right : 4px;
}
#sidebar-menu div.menu-panel div.link-list a {
font-size : 13px;
color : #888;
text-decoration : none;
}
#sidebar-menu div.menu-panel div.link-list a:hover {
text-decoration : underline;
}
#sidebar-menu div.clear {
clear : both;
height : 0;
line-height : 0;
}
-
图书音像
-
高考图书
|物理习题
|生物
|高考复习题
|语文作文大全
|政治时事
|历年高考真题解析与答案
|考试题
|化学实验测试
|生物测试
-
专辑
|郑智化专辑
|台湾伍佰
|大陆张含韵
|刘德华
|成龙
|王菲
|最新歌曲排行榜
-
生活图书
|领悟人生
|天文地理
|旅游百科
|炒菜一本通
-
-
生活类
-
炒菜宝典
|领悟人生
|天文地理
|旅游百科
|炒菜一本通
-
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
-
商品分类
商品分类内容......
