css用背景图片制作导航栏分割线 怎么在CSS里设置导航的分割线
\u5bfc\u822a\u6761\u69fd\u72b6\u5206\u5272\u7ebf\u7528css\u600e\u4e48\u505a\u7528border\u6765\u505a \u53ea\u8981\u7ed9\u4f60\u7684\u6807\u7b7e\u52a0\u4e0a border-right:1px solid #EE6254
\u5c31\u53ef\u4ee5\u4e86
\u4e5f\u53ef\u4ee5\u7528\u56fe\u7247\u6765\u505a\uff0c\u56fe\u7247\u505a\u51fa\u6765\u7684\u6548\u679c\u6bd4\u8f83\u7f8e\u89c2
\u7ed9\u6bcf\u4e2ali \u540e\u9762\u52a0\u4e2a\u91cc\u9762\u52a0\u5165\u56fe\u7247 \u5728\u5427span \u6d6e\u52a8\u4e3a\u5de6\u6d6e\u52a8
\u8bbe\u7f6e\u5206\u5272\u7ebf\u5728\u6211\u591a\u4e2a\u7684\u7ecf\u9a8c\u65bd\u884c\u540e\uff0c\u6ca1\u6709\u4e00\u6210\u4e0d\u53d8\u901a\u7528\u7684\u65b9\u6cd5\uff0c\u5f97\u6839\u636e\u8981\u6c42\u91c7\u7528\u6700\u9002\u5408\u7684\u3002
1\u3001\u4f7f\u7528\u5b57\u7b26\u201c|\u201d\uff0c\u9002\u5408\u5bfc\u822a\u680f\u95f4\u8ddd\u4e0d\u4e00\u81f4\u65f6\uff0c\u4e5f\u5c31\u662f\u4e0d\u9002\u5408\u4f60\u3002
2\u3001\u91c7\u7528\u80cc\u666f\u65b9\u5f0f\uff0c\u80cc\u666f\u56fe\u7247\u5373\u662f\u90a3\u6761\u95f4\u9694\u7ebf\uff0c\u9700\u8981\u5f62\u6210jpg\u3001gif\u3001png\u683c\u5f0f\u7684\u5c0f\u56fe\u7247\uff0c\u5728\u80cc\u666f\u91cc\u8bbe\u7f6e\u5c45\u5de6\uff0c\u5e76\u63a7\u5236\u4e00\u4e0b\u5782\u76f4\u4f4d\u79fb\uff0c\u8fd9\u6837\u5c31\u4f1a\u51fa\u73b0\u4f60\u7b2c\u4e00\u5f20\u56fe\u7684\u8981\u6c42\u3002
3\u3001\u4f46\u6700\u540e\u4e00\u9879\u53ef\u80fd\u4f1a\u51fa\u73b0\u6ca1\u6709\u95f4\u9694\u7ebf\u7684\u60c5\u51b5\uff0c\u90a3\u4e48\u5c31\u591a\u6dfb\u52a0\u4e00\u4e2a\u7a7a\u7684li\u6216a\uff0c\u8fd9\u6837\u5c31\u591a\u51fa\u6765\u4e00\u4e2a\u95f4\u9694\u7ebf\uff0c\u597d\u770b\u3002
\u5177\u4f53\u7ec6\u8282\u9700\u8981\u628a\u63e1\uff0c\u4ee3\u7801\u4e3e\u4f8b\uff1a
xlMenu a { background:url(menuLine.gif) no-repeat; display:block; width:77px; text-align:center; float:left;}.xlMenu a.first { width:43px; background:none; text-align:left;}\u6548\u679c\uff1a
\u5c0f\u56fe\u6807\uff1a
\u5f88\u5c0f\u5f88\u5c0f\u7684\u4e00\u6761\u7ebf\u3002\u3002\u3002
<html>
<head>
<style>
#div1{
width:960px;
height:30px;
}
#div1 ul li{
float:left;
width:60px;
height:30px;
border-right:1px solid;
}
</style>
</head>
<body>
<div id='div1'>
<ul>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
</ul>
</div>
</body>
</html>
绛旓細1銆佷娇鐢ㄥ瓧绗︹渱鈥濓紝閫傚悎瀵艰埅鏍忛棿璺濅笉涓鑷存椂锛屼篃灏辨槸涓嶉傚悎浣銆2銆侀噰鐢ㄨ儗鏅柟寮忥紝鑳屾櫙鍥剧墖鍗虫槸閭ｆ潯闂撮殧绾匡紝闇瑕佸舰鎴恓pg銆乬if銆乸ng鏍煎紡鐨勫皬鍥剧墖锛屽湪鑳屾櫙閲岃缃眳宸︼紝骞舵帶鍒朵竴涓嬪瀭鐩翠綅绉伙紝杩欐牱灏变細鍑虹幇浣犵涓寮犲浘鐨勮姹傘3銆佷絾鏈鍚庝竴椤瑰彲鑳戒細鍑虹幇娌℃湁闂撮殧绾跨殑鎯呭喌锛岄偅涔堝氨澶氭坊鍔犱竴涓┖鐨刲i鎴朼锛岃繖鏍峰氨...
绛旓細棣栧厛锛屼竴鑸仛瀵艰埅鏉★紝閮芥槸閫氳繃ul銆乴i鏉ュ仛锛屽皢ul鍖呰９鍦ㄤ竴涓猟iv涓紝鐒跺悗璁剧疆濂絯idth鍜宧eight锛屽垎闅旂嚎锛屾崲涓悊瑙ｏ紝缁檒i涓涓彸杈圭殑杈规灏卞彲浠ヤ簡锛岄氳繃浠ｇ爜鏉ョ悊瑙ｏ細 div1{ width:960px;height:30px;} div1 ul li{ float:left;width:60px;height:30px;border-right:1px solid;} muli1 m...
绛旓細浣犲ソ锛屽湪style閲岃缃甦iv鐨刴argin灞炴э紝margin:0px;鍗冲彲
绛旓細ul { list-style: none; }#main{margin:20px auto;width:800px;height:40px;background:blue;}#main li{width:100px;height:20px;font-weight:600;color:#FFFFFF;border-right:1px solid #ffffff;
绛旓細瀵艰埅涓 瀵艰埅鍥 瀵艰埅浜 浠ｇ爜杩欓噷鍙戜笉鍏紝濂藉湪杩欐牱涔熸槸鍙互鐨勩傚嚑涓摼鎺ラ兘瑕佷互锛屽彧瑕佹斁寰椾笅锛涘鏋滆繕鏈鑳屾櫙鍥锛屽彲浠ュ湪鏍峰紡閲屽姞涓婏紝閫氳繃background灏卞彲浠ワ紝寰堢畝鍗曠殑銆
绛旓細璁剧疆瀵艰埅鏉鍐呯殑涓绾у垎绫 /*涓绾у垎绫鐨勫垎闅绾匡紝瀹為檯涓婂氨鏄彸杈规鐨勯鑹*/ .skin-box-bd .menu-list .menu{border-right:1px #006205 solid;} /*涓绾у垎绫荤殑鏂囧瓧鏍峰紡*/ .skin-box-bd .menu-list .menu .title{color:#棰滆壊浠ｇ爜;font-size:瀛楀彿px;} /*涓绾у垎绫绘墍鍦ㄧ殑li 鍒楄〃鐨勮儗鏅鑹*/ ....
绛旓細杩欎箞绠鍗曠殑浜嬫儏 鐢ㄤ笁涓崟鍏冩牸鎴栦笁涓猟iv left鏀惧乏杈 right鏀惧彸杈 瀹藉害閮戒笌鍥剧墖瀹藉害涓鑷 涓棿鐨勫崟鍏冩牸鎴杁iv瀹藉害璁炬垚浣犳兂瑕佺殑瀹藉害 鎶奵enter鍥剧墖浣滀负鑳屾櫙鍥剧墖鏀惧湪閲岄潰 骞剁敤css璁剧疆涓烘í鍚戦噸澶 鎼炲畾
绛旓細瀵艰埅鏍忕殑楂樺害鐜板湪鏄粠44鐐癸紙88鐢荤礌锛夋洿鏀逛负64鐐癸紙128鐢荤礌锛夈 浠嶇劧鍙互浣跨敤浜唖etBackgroundImage锛氭柟娉曟潵鎸囧畾鑷畾涔夊奖璞鐨勫鑸爮銆備笅闈㈡槸绋嬪紡鐮佽璁惧畾鑳屾櫙鍥剧墖锛 [objc] view plaincopy [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:...
绛旓細鍥剧墖骞抽摵鍑虹幇鍒嗗壊绾 璇存槑浣犲浘鐗囧乏鍙充袱杈圭殑棰滆壊涓嶄竴鏍凤紝瀵艰嚧鍑虹幇鑹插樊锛屽氨鍑虹幇鍒嗗壊绾夸簡 浣犻渶瑕佷慨鏀逛竴涓嬪浘鐗囨墠琛岋紝鐢╬s銆
绛旓細鍙鍒╃敤鑳屾櫙鍥鏉ュ疄鐜板拰background-color鍘熺悊涓鏍穐tml涓垪琛ㄥ浣曞悜妯帓鍒楋紵html涓垪琛ㄥ悜妯帓鍒楁柟娉曟湁锛氫竴锛岃繖瑕佺敤鍒癴loat娴姩灞炴т簩锛宖loat:left;浠ｈ〃鎯冲仛娴姩锛屼篃灏辨槸妯悜鎺掑垪鏄悜宸﹁竟鎺掑垪鍥涳紝浠ｇ爜濡備笅:{} dw濡備綍鍒朵綔妯悜瀵艰埅鏉锛熻缃css锛屾诞鍔紝瀹氫綅锛屾垨鑰呰缃甦isplay涓鸿鍐呭厓绱狅紝褰撶劧锛屽搴︿竴瀹氳澶熺敤锛
