我要实现这样的导航条，用css怎么写, 上下都是两张背景图片. 纯CSS写两张背景图片代码可以吗
\u7528css\u600e\u6837\u5728\u4e00\u4e2adiv\u4e2d\u8bbe\u7f6e\u4e24\u5f20\u80cc\u666f\u56fe\u7247\u5728\u4e00\u4e2adiv\u91cc\u9762\u8bbe\u7f6e\u4e24\u5f20\u80cc\u666f\u56fe\u7247\u7528css3\u7684\u591a\u80cc\u666f\u53ef\u4ee5\u505a\u5230\uff0c\u5199\u6cd5\u4e5f\u5f88\u5bb9\u6613\uff0c\u7c7b\u4f3c\u4e0b\u9762\u8fd9\u6837\u5c31\u884c\u4e86:
background:url(top.jpg) center top no-repeat,
url(bottom.jpg) center bottom no-repeat;
\u4e0d\u8fc7\u56e0\u4e3a\u4e0d\u540c\u6d4f\u89c8\u5668\u5bf9\u4e8eCSS3\u7684\u652f\u6301\u5ea6\u6709\u9650\uff0c\u8fd9\u79cd\u5199\u6cd5\u5728\u5927\u591a\u6570\u6d4f\u89c8\u5668\u91cc\u9762\uff0c\u7279\u522b\u662fIE\u91cc\u9762\u662f\u65e0\u6548\u7684\u3002\u6240\u4ee5\u901a\u5e38\u7684\u4f5c\u6cd5\u8fd8\u662f\u5d4c\u5957\u4e24\u4e2adiv\uff0c\u4e00\u4e2adiv\u91cc\u9762\u662f\u4e0a\u9762\u7684\u80cc\u666f\u56fe\uff0c\u4e00\u4e2adiv\u91cc\u9762\u662f\u4e0b\u9762\u7684\u80cc\u666f\u56fe\uff0c\u8fd9\u6837\u7684\u517c\u5bb9\u6027\u4f1a\u597d\u4e00\u4e9b\u3002
\u5408\u7406\u4f7f\u7528\u4f2a\u5143\u7d20\u53ef\u4ee5\u5728css2\u505a\u5230\u591a\u80cc\u666f\u56fe\u7247\uff1a
div {width: 100%;height: 200px;background: url("t1.jpg") no-repeat scroll left top transparent;}div:before {position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;width:100%;height: 200px;content:"";background: url("t2.jpg") no-repeat scroll left top transparent;opacity: .5;filter: alpha(opacity=50);}My Div Area\u53ef\u4ee5\u53c2\u8003\uff1ahttp://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
绛旓細寰堝灏忎紮浼村涔犱簡涓娈垫椂闂寸殑HTML鍜css锛灏辨兂鑷繁鍔ㄦ墜璇曡瘯鍒朵綔瀵艰埅鏉鑿滃崟锛屼笉杩囧嵈娌℃湁鎬濊矾锛屼粖澶╁皬缂栨垜灏辨潵鍒嗕韩涓涓婬TML鍜宑ss鍒朵綔瀵艰埅鏉＄殑瀹炰緥锛屽ぇ瀹跺彲浠ュ弬鑰冨弬鑰冦傚鍥撅紝鍒朵綔瀵艰埅鏉¤彍鍗曚竴鑸槸鐢ㄤ竴涓猟iv宓屽ul鍜宭i鏍囩锛岀劧鍚巐i閲岄潰鏈塧鏍囩銆傚竷灞鍋氬ソ涔嬪悗锛屽紑濮嬪啓瀵艰埅鏉＄殑鏍峰紡锛屽鍥撅紝鍏堟竻闄ゅ鑸潯鐨刴argin...
绛旓細濡傛灉瑕佺敤html鍔犱笂css鏉ュ埗浣滃鑸潯鐨勮瘽锛岄毦搴︿笉澶э紝浠ｇ爜涔熶笉澶氥傝鏄敤浜庡涔犵殑璇濆缓璁嚜宸辩敤鍘熺敓浠ｇ爜瀹炵幇銆傝鏄敤浜庣敓浜х幆澧冩垨椤圭洰涓婄殑璇濓紝寤鸿閲囩敤bootstrap绛夊墠绔鏋讹紝鐩存帴濂楃敤浠栦滑鐨勫鑸爮浠ｇ爜鍗冲彲锛屾牱寮忎笉浠呭ソ鐪嬩唬鐮佷篃鏄撹锛屽悗鏈熸兂瑕佷慨鏀逛竴涓嬩篃瀹规槗锛
绛旓細css+div鍋氬浘鐗囦腑鐨勫鑸潯鐨勬柟娉曪細鎬濊矾锛氬ul閲岀殑li璁剧疆鎺掓垚涓鎺掓墍浠ラ渶瑕佽缃竴涓CSS display:inline璁﹍i鎺掓垚涓鎺掞紝浠庤岃li骞舵帓甯冨眬銆傜劧鍚庨渶瑕佸ul li閲岀殑a鏍囩璁剧疆display:block鐨勶紝浣哸鐖剁骇li涓嶈缃叿浣撳搴︼紝鎵浠ラ渶瑕佸a璁剧疆display:inline-block璁╁叾a闅弆i骞舵帓缁ф壙鍚屾椂瀵筧璁剧疆瀹藉害楂樺害绛夋牱寮忕敓鏁堛1銆...
绛旓細鏂板缓html椤甸潰 鎵撳紑html缂栬緫杞欢锛屾柊寤轰竴涓猦tml椤甸潰銆傚鍥撅細娣诲姞瀵艰埅鏍囩 鍦╞ody鏍囩閲屾柊寤轰竴涓猽l/ul鏍囩锛岀劧鍚庡湪ul鏍囩閲屾坊鍔犲嚑涓猯i/li鏍囩銆傚鍥撅細鍦╨i鏍囩鍐呮坊鍔犳枃瀛椼 鍦ㄦ柊寤虹殑li娣诲姞瑕佹樉绀虹殑鍐呭銆傚鍥撅細鍒涘缓鏍峰紡鏍囩 鍦╰itle鏍囩鍚庢柊寤轰竴涓猻tyle type="text/css"/style鏍囩銆傚垱寤烘í鍚戝鑸...
绛旓細- -,涓嶇煡閬撲綘閭ｄ唬鐮佹槸鍦ㄥ摢閲屾潵鐨勶紝鍥惧張鍍忔槸鐧惧害绌洪棿閲岀殑锛屾檿銆傝繖鏍风殑绠鍗瀵艰埅锛绔熺劧鑳藉啓鎴杩欐牱鐨凜SS锛鐪熸湁鈥滄墠鈥濓紝鍢涳紝濡傛灉鏄綘鑷繁鍐欑殑閭ｅ氨娌′粈涔堜簡銆傚氨鐢ㄤ笂闈㈢殑閫夋嫨鍣ㄨ繖鏉′緥瀛愶細.tabs-holder .tabpanel{width:100%;border-bottom:1px solid #000;} .tabs-holder .tabpanel a{display:block...
绛旓細1銆佹柊寤轰竴涓猦tml椤甸潰銆2銆佸湪html椤甸潰涓婃柊寤轰笁涓猟iv鏍囩锛屽垎鍒负杩欎笁涓猟iv娣诲姞class涓:header銆乵ain銆乫ooter銆3銆佸垱寤簊tyle鏍囩鐢ㄤ簬璁剧疆css鏍峰紡銆傚湪title鏍囩涓嬪垱寤轰竴涓猻tyle鏍囩锛岀劧鍚庝负header绫昏缃甦iv鐨勯珮銆佽儗鏅鑹叉牱寮忋4銆佷负鏄剧ず涓昏鍐呭鐨刴ain绫昏缃牱寮忋傚湪style鏍囩閲岃缃甿ain绫绘牱寮忕殑杈规銆佸銆侀珮...
绛旓細涓嶇敤鍥剧墖鐨勮瘽瑕佺敤鍒 CSS3 鐨勮儗鏅笎鍙橈紝浣犲彲浠ユ煡涓涓 background-image, linear gradient
绛旓細濡傛灉鍙敤css鐨勮瘽灏辫繖涔堝啓鍚 .level2{ display:none}.level1 > li:hover > .level2{ display:block }html閲屽ぇ姒杩欐牱鐨缁撴瀯 l1 l2 l2 l2 l1 l2 l2
绛旓細鍙埄鐢ㄨ儗鏅浘鏉瀹炵幇鍜宐ackground-color鍘熺悊涓鏍穐tml涓垪琛ㄥ浣曞悜妯帓鍒楋紵html涓垪琛ㄥ悜妯帓鍒楁柟娉曟湁锛氫竴锛岃繖瑕佺敤鍒癴loat娴姩灞炴т簩锛宖loat:left;浠ｈ〃鎯冲仛娴姩锛屼篃灏辨槸妯悜鎺掑垪鏄悜宸﹁竟鎺掑垪鍥涳紝浠ｇ爜濡備笅:{} dw濡備綍鍒朵綔妯悜瀵艰埅鏉锛熻缃css锛娴姩锛屽畾浣嶏紝鎴栬呰缃甦isplay涓鸿鍐呭厓绱狅紝褰撶劧锛屽搴︿竴瀹氳澶熺敤锛
绛旓細杩欐槸鍏ㄩ儴浠ｇ爜锛屽鏋滀綘浼CSS鐨勫彲浠ヨ瘯鐫鏀逛竴涓嬪氨鍙互鐢ㄤ簡銆傝缃瀵艰埅鏉鐨勮儗鏅壊 /* 瀵艰埅鏍鑳屾櫙鑹*/ .skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;} /* 瀵艰埅鍒楄〃鑳屾櫙鑹*/ .skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;} /*瀵艰埅鏉...
