关于网页导航栏制作的几种方法与常见问题解决（新人向）
无序列表是html页面排版经常用到的非常实用的标签，但是新手在使用无序列表时，经常会在横向排版上出现问题，笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题。（以css内部样式为例）
[注：有同学之前问过我怎么制作一张网页，但只会html，本文用到均为css。故说明：若急需制作导航，无css技术基础的，在<head>标签中加<style rel="stylesheet" type="text/css"><style>,再将css写入其中就行了。需要按键代码，可在最后看到。]
1.通过<li>标签设置浮动排列。
①使用方法：在css样式中加入float:left;属性。
②常见问题：当网页页面有调整时导航同时改变，排版变混乱。
③解决方法：⑴在笔者接触的网站学习中比较常见方法有对li标签进行绝对定位，然后调节left大小。
这种方式比较王道，利于单个修改。但是对于网页要求低的，可能偏麻烦。
⑵基于自身实验，笔者提出一个十分简单的方法
可以通过<div>标签设置格式，方法十分简单，只要把div的whith值设成等于或者大于网页最大长度即可。
2.第二种方法：
①利用<li>标签的display属性的inline属性值达到同行排列。同时可以通过对margin，padding值修改距离。
?②问题与解决方法与第一种相同。
3.第三种方法：
①完全使用绝对定位，适用于对按钮位置有特殊要求。（由于比较麻烦，而且一般导航都是一列，所以并不推荐，但是需要的朋友还是很好用的）
②一般不会出现排版问题
③优点：稳定，版面一般不会出问题，自由度高。缺点：不如前面的统一规整，相对麻烦，排版麻烦。
?
绛旓細]1.閫氳繃鏍囩璁剧疆娴姩鎺掑垪銆傗憼浣跨敤鏂规硶锛氬湪css鏍峰紡涓姞鍏loat:left;灞炴с傗憽甯歌闂锛氬綋缃戦〉椤甸潰鏈夎皟鏁存椂瀵艰埅鍚屾椂鏀瑰彉锛屾帓鐗堝彉娣蜂贡銆傗憿瑙ｅ喅鏂规硶锛氣懘鍦ㄧ瑪鑰呮帴瑙︾殑缃戠珯瀛︿範涓瘮杈冨父瑙佹柟娉曟湁瀵筶i鏍囩杩涜缁濆瀹氫綅锛岀劧鍚庤皟鑺俵eft澶у皬銆傝繖绉鏂瑰紡姣旇緝鐜嬮亾锛屽埄浜庡崟涓慨鏀广備絾鏄浜庣綉椤佃姹備綆鐨勶紝鍙兘鍋忛夯鐑︺傗懙鍩轰簬...
绛旓細璁捐甯堝彲浠ヨ冭檻鎶婁晶杈规爮鍋氭垚婊戝姩鏄剧ず鐨勬柟寮,杩欐牱鏃㈣妭鐪佷簡缃戠珯涔嬮棿鐨勭┖闂寸┖,鍙堟洿鍔犵畝娲銆 鍦ㄤ晶杈规爮瀵艰埅鐨勮璁′腑,瑕佹敞鎰忓鑸爮鐨勫搴︺傚鏋滃鑸爮涓殑瀛椾綋澶暱,鍦ㄦ樉绀轰笂浼氭湁涓浜涢棶棰,鍗充娇鍋氭垚婊戝姩鏄剧ず涔熶笉鑳藉緢濂界殑瑙ｅ喅闂銆傚鍒剁殑缃戠珯涓嶉傚悎杩欑瀵艰埅,渚ц竟鏍忓簲璇ユ湁鏇村鐨勪簩绾у鑸爮鐩,鎵浠ヨ繖绉嶅鑸ぇ澶氶傚悎涓浜涜璁″笀鎴栬...
绛旓細1.妯帓鏃犻潪鏄湰韬爣绛炬槸琛屽唴鏍囩鎴栬呭皢鍧楃姸鏍囩娣诲姞娴姩鏁堟灉锛岀劧鍚庡彉鎴愭í鎺掓帓鍒楃殑瀵艰埅銆俛鏍囩鏃㈠彲浠ュ綋鍋氶摼鎺ョ鍙锋潵鐢紝鏈韩涔熸槸琛屽唴鏍囩鐨勪竴绉嶏紝鐩存帴鐢╝鏍囩杈撳叆鏂囧瓧锛屽彲浠ョ洿鎺ュ湪妯帓鏄剧ず銆2.濡傚浘鎵绀烘晥鏋滐紝妯帓鏄剧ず鐨勫鑸3.濡傛灉鎯宠瀵规暣浣撶殑瀵艰埅杩涜绉诲姩浣嶇疆锛屽彲浠ュ鏁翠釜鐨刟鏍囩娣诲姞涓婁竴涓ぇ鐨勭洅瀛恉iv锛...
绛旓細涓昏鍒╃敤妗嗘灦闆嗗埗浣渨eb瀵艰埅鏍忕殑jsp鏄竴绉嶅父鐢ㄧ殑鏂规硶銆傛鏋堕泦鍙互閫氳繃鐩爣杩炴帴鐩稿叧椤甸潰锛屽疄鐜板鑸1index.jsp鍨傜洿:涓诲鑸紝涓婚〉闈㈠拰椤佃剼銆傛í鍚:涓婚〉闈㈠垎涓哄乏瀵艰埅鍜屼袱涓唴瀹广備娇鐢2.top.jsp琛ㄦ牸鎴杁iv鍜宑ss鏉ユí鍚戝竷灞鐩稿簲鐨勬枃鏈傛牴鎹洰鏍囩殑鏂瑰悜锛屽彲浠ュ悜宸﹀鑸備娇鐢3.left.jsp琛ㄦ牸鎴杁iv鍜宑ss灏嗙浉搴旂殑鏂囨湰...
绛旓細4锛銆佸埄鐢ㄥ鑸獊鐮村叧閿瘝鎺掑悕 濡傛灉浣犲湪SEO琛屼笟鏈変竴娈垫椂闂达紝浣犱細鍙戠幇涓涓棶棰橈紝鏌愪釜鍏抽敭璇嶇儹搴﹂珮鐨勮瘝锛屾庢牱鍋氭帓鍚嶉兘鏃犳硶鎻愬崌锛岃繖涓椂鍊欙紝鍏跺疄浣犲彲浠ュ厖鍒嗗埄鐢紝缃戠珯瀵艰埅鐨勯珮鏉冮噸锛屽皢璇ュ唴瀹归〉闈紝鍐欏叆缃戠珯瀵艰埅銆傞氬父鏉ヨ锛屼竴瀹氭椂闂村悗锛屼綘鐨勫叧閿瘝鎺掑悕浼氭湁涓瀹氭敼鍠勩5)銆佸敖閲忎笉瑕佷娇鐢ㄥ浘鐗囧仛缃戝潃瀵艰埅 濡傛灉蹇呴』...
绛旓細缃戦〉涓殑header锛屼竴鑸垜浠О涔嬩负椤堕儴瀵艰埅鏍锛岃繖閲屼负浜嗚鏂囨柟渚匡紝浠ヤ笅閮界畝绉伴《閮ㄦ爮銆傞《閮ㄦ爮瀵逛簬涓涓綉绔欑殑鐢ㄦ埛浣撻獙鏉ヨ鏄嚦鍏抽噸瑕佺殑锛屽洜涓烘牴鎹敤鎴风殑娴忚涔犳儻锛堜粠宸﹀埌鍙筹紝浠庝笂鍒颁笅锛夛紝褰撲粬浠繘鍏ヤ竴涓柊鐨勭綉绔欙紝椤堕儴鏍忛氬父鏄粬浠渶鍏堢湅鍒扮殑鍦版柟銆傛垜浠兘鐭ラ亾鐢ㄦ埛瀵逛簬浣犱骇鍝佺殑绗竴鍗拌薄鏄緢閲嶈鐨勶紝鍥犱负瀹冧細...
绛旓細4銆佸瀭鐩村鑸紝鍒涙柊瑙嗚鐨勪晶鏍忛瓟娉 鍨傜洿瀵艰埅閫氳繃涓ょ鏂瑰紡灞曠幇锛氶殣钘忓紡鑿滃崟锛岀偣鍑诲嵆鐜帮紝涓鸿璁″娣荤绉樻劅锛涘浐瀹氫晶杈规爮鍒欐彁渚涚ǔ瀹氱殑瀛樺湪鎰燂紝閫傚悎鍐呭杈冨鐨缃戠珯銆傝繖涓ょ鏂瑰紡閮戒负缃戠珯璁捐娉ㄥ叆浜嗘柊椴滅殑瑙嗚鍏冪礌锛岃娴忚鑰呭湪鎺㈢储涓韩鍙楃嫭鐗圭殑瑙嗚涔嬫梾銆傛讳箣锛岄夋嫨鍝绉嶅鑸椋庢牸锛屽叧閿湪浜庣悊瑙ｄ綘鐨勭洰鏍囩敤鎴峰拰椤圭洰鐨...
绛旓細CSS瀵艰埅鑿滃崟姘村钩灞呬腑鐨勬柟娉曪紵1銆侀鍏堟墦寮鎴戜滑鐨勬祴璇曠紪杈戝伐鍏峰鍥炬墍绀烘柊寤轰竴涓」鐩2銆佺劧鍚庢墦寮index.html鏂囦欢锛岃緭鍏ヤ互涓嬩唬鐮併3銆侀鍏堢涓涓柟娉灏辨槸浣跨敤display:inline-block灏唘l鏍囩璁剧疆鎴愯鍐呭潡绾у厓绱犵劧鍚庡皢li鏍囩璁剧疆涓哄乏娴姩鍗冲彲銆4銆佺浜绉嶆柟娉灏辨槸灏辨槸灏唒璁剧疆涓篸isplay:table;灏唘l璁剧疆鎴恉isplay:...
绛旓細鏂规硶/姝ラ 1.浣跨敤ul鍒楄〃璁剧疆瀵艰埅鏍 2.璁剧疆nav鍏冪礌CSS鏍峰紡瀹藉害楂樺害鑳屾櫙棰滆壊 3.灏唋i鍏冪礌鍐呭绉诲姩 4.鍘婚櫎涓嬪垝绾 5.鍐呭灞呬腑 閫熷崠閫氱殑瀵艰埅鏉℃庝箞鍒朵綔锛熷紩鍏ss鏍峰紡琛紝鏂板缓涓涓猧d涓簄av鐨勫眰锛屼娇鐢╱l>銆乴i>銆乤>鏍囩鏉ュ埗浣滃畬鎴愭晥鏋 绗簩姝ヨ缃瓹SS鏍峰紡CSS3+Js瀹炵幇鍝嶅簲寮瀵艰埅鏉℃柟娉 dw濡備綍鍒朵綔妯悜瀵艰埅鏉★紵璁...
绛旓細浣跨敤NAV鍏冪礌涓鸿秴閾炬帴鏉ュ畾涔瀵艰埅鏍 瀵艰埅鏍忓浜缃戦〉鏉ヨ鏄緢閲嶈鐨勮缃悎閫傜殑瀵艰埅鏍忎篃鏄緢瑕佸繀瑕佺殑 涓嬮潰浠嬬粛HTML鐨勫鑸爮璁剧疆 甯屾湜鑳藉府鍔╁埌澶у 鏂规硶/姝ラ 1.浣跨敤ul鍒楄〃璁剧疆瀵艰埅鏍 2.璁剧疆nav鍏冪礌CSS鏍峰紡瀹藉害楂樺害鑳屾櫙棰滆壊 3.灏唋i鍏冪礌鍐呭绉诲姩 4.鍘婚櫎涓嬪垝绾 5.鍐呭灞呬腑 ...
