/***********二级菜单样式************/ .camTitleBig{ position: relative; background: url("/static/images/systemPicture/cambgBig.jpg") repeat-x scroll left top; margin:20px auto 0; width:1117px; height:55px } .camNavBig{ float: left; } .camNavBigUl > li{ border-right: 1px solid #f4f4f4; border-top: 2px solid #fff; float: left; height: 55px; position: relative; } .camNavBigUl > li > a{ display: inline-block; font-size: 14px; line-height: 47px; padding-right: 20px; position: relative; text-align: center; text-decoration: none; width: 140px; } .camNavBigUl > li > a b { border-color:#6f6f6f transparent transparent; border-style: solid; border-width: 5px; font-size: 0; height: 0; line-height: 0; position: absolute; right: 30px; top: 22px; width: 0; } .camNavBigUl > li.active, .camNavBigUl > li:hover { background: none repeat scroll 0 0 #fff; border-top: 2px solid #1abd96; } .camNavBigUl > li.active > a, .camNavBigUl > li:hover > a { color: #1abd96; font-weight: bold; } .camNavBigUl > li.active > a b, .camNavBigUl > li:hover > a b { border-color: #1abd96 transparent transparent; } .camNavBigUl > li.active .cnpopCon, .camNavBigUl > li:hover .cnpopCon { display: block; } .cnpopCon{ background: none repeat scroll 0 0 #fff; border-bottom: 2px solid #1abd96; box-shadow: 0 5px 15px #ccc; display: block; left: 0; min-height: 110px; min-width: 160px; position: absolute; top: 55px; z-index: 22; display:none; } .ccNav > ul{ padding: 10px 0; } .ccNav li{ height: 31px; line-height: 31px; padding: 0 10px; white-space: nowrap; } .ccNav > ul > li > a{ color: #2d2d2d; display: block; padding: 0 0 0 30px; text-decoration: none; } .ccNav > ul > li:hover > a { background: none repeat scroll 0 0 #1abd96; font-weight: bold; } .ccNav > ul > li.hasCon.active > a, .ccNav > ul > li.active > a{ color:#1abd96; } .ccNav > ul > li.hasCon.active > a:hover, .ccNav > ul > li.active > a:hover{ color:#2d2d2d; background-color:#1abd96; } .ccNav > ul > li.hasCon:hover > a { background: url("/static/images/r.png") no-repeat scroll 118px center #1abd96; } .ccNav > ul > li.hasCon.active.hover > a{ color: #2d2d2d; } .ccNav > ul > li > .ccNavSon li.active > a{ background-color: #1abd96; color: #2d2d2d; } .ccNav > ul > li.hasCon:hover > .ccNavSon{ z-index: 10; } .ccNav > ul > li > .ccNavSon{ background: none repeat scroll 0 0 #fff; border-bottom: 2px solid #1abd96; bottom: -2px; box-shadow: 0 5px 10px #ddd; display: none; left: 160px; min-width: 120px; position: absolute; top: 0; z-index: 0; } .ccNav > ul > li > .ccNavSon ul { padding: 10px 0 0; } .ccNav > ul > li > .ccNavSon li:hover > a{ background: none repeat scroll 0 0 #1abd96; font-weight: bold; } .ccNav > ul > li > .ccNavSon a { color: #2d2d2d; display: block; padding: 0 0 0 20px; text-decoration: none; } .ccNav > ul > li:hover > .ccNavSon, .ccNav > ul > li.active > .ccNavSon { display: block; } .ccNav > ul > li > .ccNavSon:before { background: none repeat scroll 0 0 #fff; border-right: 1px solid #f4f4f4; bottom: 0; content: ""; display: block; left: -10px; overflow: hidden; position: absolute; top: 0; width: 10px; z-index: 211; } .model_list_top2 { width: 1130px; margin: 0 auto; height: 55px; z-index: 11; position: relative; }
这段代码从别的页面拷的,可是放到新页面就是调不好。由于没有美工,所以只能请求网上的朋友帮忙看看,解释下这些css代码的意思
1.选择元素
.camTitleBig控制的是class="camTitleBig"的元素;
.camNavBigUl > li是指class="camNavBigUl"下面的li元素;以此类推。
2.常用属性:
background,width,height,font这些就不用说了吧。
float: http://www.w3school.com.cn/css/css_positioning_floating.asp
margin和padding参考这里:http://www.w3school.com.cn/css/css_boxmodel.asp
这个不好解释,1:都是一个一个的样式,看你引用了那些2:.camNavBigUl > li这样的层级结构不管前端与后台都应该需要知道把,js也是这种结构的3:里面的背景图片高度,宽度什么的,你自己试一下把,别人直接也看不出什么东西5:你是考过来的,背景图也全考过来,.ccNav这种你到底你页面用了没有
1楼就帮你基本的都说了,很小的多少像素什么的,我们也很难帮你
我是写CGKE网站的前端作者,www.cgke.com,你应该是从这里参考的吧?