这种网页导航栏，栏目中间有“丨”分割线，如何在html里实现？（DIV+CSS布局问题） 请问这种div+css网页这种效果是怎么实现的
html\u4e2d\u5982\u4f55\u5b9e\u73b0\u4e0b\u9762\u7684\u8fd9\u79cd\u5206\u5272\u7ebf\u6548\u679c\uff1f\uff08\u56fe\uff09\u6c42\u5927\u795e\u89e3\u7b54~~\u8fd9\u4e2a\u5e94\u8be5\u4e0d\u662f\u5206\u5272\u7ebf\u3002
\u5982\u679c\u662f\u4e24\u6761\u5206\u5272\u7ebf\uff0c\u8bbe\u7f6e\u5c5e\u6027display:inline-block.
\u4f8b\u5b50\uff1a
//\u8bbe\u7f6e\u5c45\u4e2d
\u4e2d\u95f4\u63d2\u5165\u7684\u6587\u5b57
\u8fd9\u4e2a\u662f\u5305\u8fdb\u53bb\u7684\uff0c\u4ee5jsp\u4e3a\u4f8b\uff1a
\u6bd4\u5982\uff1a\u5bfc\u822a\u505a\u4e00\u4e2ahead.jsp \u5185\u5bb9\u505a\u4e00\u4e2acontent.jsp \u6700\u4e0b\u9762\u662f\u4e00\u4e2afooter.jsp
\u7136\u540e\uff1a\u5728\u91cc\u9762\u653e\u5165
\u8fd9\u6837\u5c31\u5305\u8fdb\u53bb\u4e86\u3002
\u5982\u679c\u4f60\u505a\u53e6\u4e00\u4e2a\u9875\u9762\u7684\u8bdd\u53ea\u9700\u8981\u66f4\u6362conten.jsp\u5c31\u53ef\u4ee5\u4e86\u3002
head.jsp\u548cfooter.jsp\u662f\u4e0d\u4f1a\u53d8\u7684\u3002\u4f60\u600e\u4e48\u70b9\u5bfc\u822a\u91cc\u7684\u6309\u94ae\u53ea\u4f1a\u53d8content\u91cc\u7684\u5185\u5bb9\u3002
\u8fd9\u6837\u7684\u597d\u5904\u5c31\u662f\uff0c\u53ea\u5bf9head.jsp\u548cfooter.jsp\u505a\u5355\u72ec\u7684\u6837\u5f0f\u3002\u66f4\u6539\u4e00\u4e2a\u6837\u5f0f\uff0c\u5168\u90e8\u7f51\u7ad9\u7684head.jsp\u6837\u5f0f\u90fd\u53d8\u4e86\uff0c\u591a\u597d\uff0c\u51cf\u8f7b\u4e86\u7ef4\u62a4\u7684\u8d1f\u62c5\u3002
\u5f53\u7136\u8fd8\u6709\u5c31\u662f\u4f60\u63d0\u5230\u7684\uff0ciframe\u3002\u4e0d\u8fc7\u8fd9\u4e2a\u505a\u52a8\u6001\u7f51\u9875\u7684\u65f6\u5019\u4f1a\u6bd4\u8f83\u9ebb\u70e6\u3002\u73b0\u5728\u6211\u4eec\u5728\u505a\u4e00\u4e2a\u9879\u76ee\uff0c\u662fSSH\u6846\u67b6\u7684\uff0c\u505a\u5206\u9875\u7684\u65f6\u5019\uff0c\u4ece\u8fd9\u4e2aiframe\u641c\u96c6\u4fe1\u606f\u4f1a\u9ebb\u70e6\u3002
\u6240\u4ee5\u6211\u89c9\u5f97\u8fd8\u662f\u4e0d\u8981\u7528iframe\u4e3a\u597d\uff0c\u9664\u975e\u7279\u522b\u9700\u8981\u3002
基本就是这么干的！你阔以参考一下！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ol,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;
text-align:center;
line-height:20px;
margin-top:10px;
margin-right:5px;
float:left;
}
</style>
</head>
<body>
<ul id="main">
<li>首页</li>
<li>新闻中心</li>
<li>企业简介</li>
<li>新闻中心</li>
<li>企业简介</li>
</ul>
</body>
</html>
他这里用的是css伪类元素，就相当于|符号是以类加上去的，并不是直接写上去的，
http://html5.9tech.cn/news/2013/1115/38641.html
你可以看看这个介绍，你那个|符号应该是用过css的after属性添加的
方法很多，就单你这个也是可以用CSS控制的。
.w980{font-size:12px; color:#fff;}
这个是控制线和A标签文字的，然后单独写A标签的属性
.w980 a{font-size:14px; color:#000;}
这样就可以区分开了
不过这个不太好控制"|"的具体之类的
那么就写成
<a>首页</a>
<span>|</span>
<a>独家</a>
.w980 span{font-size:12px; color:#fff;}
.w980 a{font-size:14px; color:#000;}
这样就更直接区分了。
还可以把"|"去掉，使用边框来弄。这样可以弄渐变颜色。想弄那种好看的，还可以用图片当背景弄，各式各样的方法都可以实现。
上面代码中应该用的是m0样式，
.m0{
font-size:14px; color:#fff;
}
另一种方法
做成了背景图片。背景图片就是一条白色的竖线，、
background:url(bg.png) no-repeat right center;
绛旓細doctype html>testol,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;text-align:center;line-height:20px;margin-top:10px;margin-right:5px...
绛旓細涓绾鏍忕洰涓昏鏄湪棣栭〉鍑虹幇锛屼簩绾ф爮鐩竴鑸槸鍑虹幇鍦ㄧ浜屽眰绾х殑椤甸潰銆備竴涓缃戦〉锛鏈甯歌鐨勬槸涓涓缃戠珯涓紝鐢变簬鍏舵墍鍖呮嫭鐨勫唴瀹规瘮杈冨锛屼簬鏄紝涓轰究浜庢祻瑙堬紝涓鑸細灏嗘暣涓綉绔欐垨缃戦〉鐨勪富瑕佸唴瀹瑰垝鍒嗘垚鑻ュ共鏉垮潡锛屾瘡涓澘鍧楀湪缃戦〉涓殑浣撶幇灏辨槸鏍忕洰銆備互娓呭崕澶у瀹樼綉涓轰緥锛屼笅鍥句腑绠ご鎵鎸囩孩鑹叉鍐呯殑鈥滃鏍℃鍐碘濄佲滈櫌绯...
绛旓細涓轰簡浣挎祻瑙堣呬笉鍦ㄧ綉绔欎腑杩峰け鏂瑰悜锛屾渶濂界殑鍔炴硶鏄负缃戠珯璁捐瀵艰埅绯荤粺锛屾渶浣庨檺搴﹀簲璇ヤ繚璇佹瘡涓缃戦〉涓嚦灏戞湁涓涓寚鍚戜富椤电殑閾炬帴銆傛湁涓ょ被瀵艰埅锛氾紙1锛夊叏灞瀵艰埅銆傚寘鎷缃戠珯鐨涓昏鏍忕洰鍜屼竴绾х洰褰曞唴瀹规墍瀵瑰簲鐨椤甸潰锛杩欎簺椤甸潰鐨勯摼鎺ュ嚭鐜板湪缃戠珯鐨勬瘡椤典笂銆傝繖鏍凤紝鐢ㄦ埛娴忚缃戠珯鐨勪换浣曟椂鍒诲拰浠讳綍鍦扮偣锛岄兘鏈夊彲浠ョ敱鍏ㄥ眬瀵艰埅閾炬帴...
绛旓細鍦ㄤ晶杈鏍忓鑸鐨勮璁′腑,瑕佹敞鎰忓鑸爮鐨勫搴︺傚鏋滃鑸爮涓殑瀛椾綋澶暱,鍦ㄦ樉绀轰笂浼氭湁涓浜涢棶棰,鍗充娇鍋氭垚婊戝姩鏄剧ず涔熶笉鑳藉緢濂界殑瑙ｅ喅闂銆傚鍒剁殑缃戠珯涓嶉傚悎杩欑瀵艰埅,渚ц竟鏍忓簲璇ユ湁鏇村鐨勪簩绾瀵艰埅鏍忕洰,鎵浠ヨ繖绉嶅鑸ぇ澶氶傚悎涓浜涜璁″笀鎴栬呬釜浜哄畼缃戙傚綋鐒朵篃鏈変竴浜涚粨鏋勭畝鍗曠殑缃戠珯浼氶噰鐢ㄨ繖绉嶅鑸 浠ヤ笅theHOUSE鏃跺皻绀兼湇瀹樼綉灏嗕晶杈规爮...
绛旓細缃戦〉涓殑涓绾鏍忕洰鎸囩殑鏄缃戠珯鍩熷悕鎵鍦ㄧ殑棣栭〉锛岃屼簩绾ф爮鐩垯鏄寚棣栭〉閾炬帴涓殑瀛椤甸潰锛瀹冧滑閮芥槸缃戠珯寤鸿鐨勪富瑕佹澘鍧楀唴瀹癸紝鍒嗙骇璁剧疆涓昏鏄负浜嗘柟渚跨敤鎴峰揩閫熸壘鍒拌嚜宸辨兂浜嗚В鐨勪笢瑗匡紝澧炲己鐢ㄦ埛浣撻獙銆傜綉椤典腑鐨勪竴绾ф爮鐩拰浜岀骇鏍忕洰鏄綉椤佃璁′腑鐨勪竴涓噸瑕佽璁¤鐐癸紝閫氳繃鏀寔澶氬眰鍒嗙被鐨勭壒鎬э紝鎻愪緵涓板瘜鐨勯夋嫨锛岄氳繃涓嶅悓淇℃伅...
绛旓細text-align:center;}strong{color: #FF0000;} 鏂伴椈鐗堝潡 涓撴爮涓鍓嶇┖濮 鍥介檯涓ㄥ墠绌哄 璐㈢粡涓ㄥ墠绌哄 绉戞妧涓ㄥ墠绌哄 鐑偣涓ㄥ墠绌哄
绛旓細棣栧厛鎵撳紑SublimeText杞欢锛屾柊寤轰竴涓猦tml椤甸潰锛鍦╤tml椤甸潰涓噯澶囧ソhtml缁撴瀯锛屽涓嬪浘鎵绀恒傛帴涓嬫潵锛屾垜浠湪html鐨刡ody缁撴瀯涓坊鍔瀵艰埅鏍鐨勫唴瀹癸紝濡備笅鍥炬墍绀恒傜劧鍚庨渶瑕佸湪style鏍囩涓敤CSS瀹氫箟瀵艰埅鏉鐨勬牱寮忥紝濡備笅鍥炬墍绀恒傚啓鏍峰紡鐨勬椂鍊欎竴瀹氳娉ㄦ剰鍐欏湪鏍峰紡鏍囩閲屻傛渶鍚庯紝杩愯html椤甸潰锛屾偍灏嗙湅鍒板涓嬪浘鎵绀虹殑瀵艰埅鏍忋
绛旓細濡備綍涓簑eb瀵艰埅鏍鍒朵綔jsp 涓昏鍒╃敤妗嗘灦闆嗗埗浣渨eb瀵艰埅鏍忕殑jsp鏄竴绉嶅父鐢ㄧ殑鏂规硶銆傛鏋堕泦鍙互閫氳繃鐩爣杩炴帴鐩稿叧椤甸潰锛瀹炵幇瀵艰埅銆1index.jsp鍨傜洿:涓诲鑸紝涓婚〉闈㈠拰椤佃剼銆傛í鍚:涓婚〉闈㈠垎涓哄乏瀵艰埅鍜屼袱涓唴瀹广備娇鐢2.top.jsp琛ㄦ牸鎴杁iv鍜宑ss鏉ユí鍚戝竷灞鐩稿簲鐨勬枃鏈傛牴鎹洰鏍囩殑鏂瑰悜锛屽彲浠ュ悜宸﹀鑸備娇鐢3.left.jsp琛ㄦ牸...
绛旓細缃戠珯瀵艰埅鐨勫熀鏈綔鐢ㄦ槸涓轰簡璁╃敤鎴峰湪娴忚缃戠珯杩囩▼涓笉鑷宠糠澶憋紝骞朵笖鍙互鏂逛究鍦板洖鍒扮綉绔欓椤典互鍙婂叾浠栫浉鍏冲唴瀹圭殑椤甸潰銆傝繖涓昏鏄熀浜庤繖鏍蜂竴涓噸瑕佷簨瀹烇細缁濆ぇ澶氭暟鐢ㄦ埛锛堝ぇ绾50锛90锛咃級閮戒笉鏄氳繃涓涓綉绔欑殑棣栭〉閫愮骇娴忚鍚勪釜鏍忕洰鍜岀綉椤靛唴瀹圭殑锛屽鏋滅敤鎴蜂粠鏌愪釜缃戦〉鏉ュ埌涓涓綉绔欙紝濡傛灉娌℃湁璇︾粏鐨勫鑸紩瀵硷紝鐢ㄦ埛鍒欏緢瀹规槗...
绛旓細缃戦〉瀵艰埅锛椤惧悕鎬濅箟锛屾槸涓绉嶆妧鏈墜娈碉紝鏃ㄥ湪涓虹綉椤垫祻瑙堣呮彁渚涙柟渚跨殑璁块棶璺緞锛屼互渚夸粬浠交鏉惧湴鎵惧埌鎵闇鐨勪俊鎭傚畠浣撶幇鍦ㄥ悇绉嶅舰寮忎腑锛屼緥濡傜綉椤电殑鏍忕洰鑿滃崟銆佽緟鍔╄彍鍗曚互鍙婂湪绾垮府鍔╃瓑銆傚湪缃戦〉璁捐涓紝瀵艰埅璁剧疆閫氬父寤虹珛鍦ㄦ槑纭殑鏍忕洰缁撴瀯鍩虹涓婏紝涓虹敤鎴锋彁渚涗簡棰濆鐨勫鍚戝姛鑳姐傜劧鑰岋紝鐢变簬缂轰箯缁熶竴鐨勮鑼冿紝姣忎釜缃戦〉鐨勮彍鍗...
