你說的是那種韓國人做的，界面很炫，效果很流暢的那種嗎？是用flash畫的，建議你搜索一些模版看看。如果單純圖片跟文字的話，你可以試著用photoshop設計，添加熱點做鏈接，這樣也能實現！
② 濡備綍鍒╃敤CSS浠ｇ爜浣垮浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屾樉紺轟笖瀵歸綈_html/css_WEB-ITnose
瀵逛簬鍒濆css鐨勬柊鎵嬫湅鍙嬫潵璇達紝緇忓父浼氶亣鍒拌繖鏍蜂竴涓闂棰橈紝褰撴枃瀛楀拰鍥劇墖鍑虹幇鍦ㄥ悓涓琛屾垨鑰呭悓涓涓猟iv閲岄潰鐨勬椂鍊欙紝鍦ㄦ祻瑙堝櫒涓榪愯屽嚭鏉ョ殑鏄劇ず鏁堟灉寰寰鏄鍦ㄤ笉鍚岀殑琛岋紝閭ｄ箞錛屾垜浠鎬庝箞鎵嶈兘鍒╃敤CSS浠ｇ爜浣垮浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屾樉紺轟笖瀵歸綈鍛錛
瀵逛簬榪欑嶇幇璞★紝鏂規硶鏈3縐嶏細
1銆侀氳繃娣誨姞css鐨勨渧ertical-align:middle;鈥濓紱
2銆佸傛灉鍥劇墖鏄鑳屾櫙鍥劇墖錛屽彲浠ュ湪css涓璁劇疆鑳屾櫙鍥劇墖錛岀劧鍚庤劇疆鏂囧瓧鐨刾adding灞炴э紱
3銆佹妸鏂囧瓧鍜屽浘鐗囧垎鍒鏀懼叆涓嶅悓鐨刣iv涓銆
緇忚繃澶氭＄殑嫻嬭瘯錛屼笂闈涓夌嶆柟娉曢兘鍙浠ヨ╁浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屾樉紺猴紝涓嬮潰椹嫻風ゥ灝辯敤瀹炰緥鏉ヤ負澶у舵搷浣滀竴涓嬶細
1銆佸湪css涓緇檇iv娣誨姞涓娾渧ertical-align:middle鈥濆睘鎬
鏈変簺鏈嬪弸浼氬彂鐜幫紝濡傛灉涓琛屽唴瀹逛腑鏈夊浘鐗囨湁鏂囧瓧鐨勮瘽錛屾枃瀛楀線寰浼氳嚜鍔ㄧ殑搴曢儴瀵歸綈錛屽獎鍝嶇編瑙傦紝閭ｅ備綍璁╁畠浠鐩稿逛簬鍨傜洿灞呬腑鍛錛屽緢綆鍗曪紝灝辨槸鍦ㄥ浘鐗囧拰鏂囧瓧鎵鍦ㄧ殑琛屼腑娣誨姞CSS灞炴э細vertical-align:middle錛涜繖鏍鳳紝瀹冧滑鍦ㄥ悓涓琛屽氨浼氬瀭鐩村眳涓瀵歸綈浜嗐
鍦ㄦわ紝椹嫻風ゥ灝辯敤鈥滄敞鍐屻佺櫥闄嗐佹壘鍥炲瘑鐮佲濊繖涓鍦ㄥ疄闄呰繍鐢ㄤ腑緇忓父閬囧埌鐨勬儏鍐佃繕鍋氬疄渚嬶紝鎶娾滄敞鍐屸濆拰鈥滅櫥闄嗏濆仛鎴愬浘鐗囷紝鈥滄壘鍥炲瘑鐮佲濊劇疆鎴愭枃瀛椼
html浠ｇ爜濡備笅錛
鎵懼洖瀵嗙爜
css浠ｇ爜濡備笅:
#denglu *{vertical-align:middle; /* 灞呬腑瀵歸綈錛 */font-size:14px;}
鍦ㄦ祻瑙堝櫒涓榪愯屽悗鐨勬晥鏋滃浘濡備笅錛
浣跨敤css鐨勨渧ertical-align:middle鈥濆睘鎬ц╁浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屽歸綈鏄涓縐嶉潪甯稿父鐢ㄧ殑鏂規硶錛屼篃鏄姣旇緝鍒╀簬浠ｇ爜浼樺寲鍜岀簿綆鐨勪竴縐嶆柟娉曪紙鍏蜂綋鍙鏌ョ湅椹嫻風ゥ鍗氬銆婄綉絝機SS浠ｇ爜浼樺寲鐨7涓鍘熷垯銆嬬殑鐩稿叧浠嬬粛錛夛紝甯屾湜澶у跺彲浠ユ帉鎻°
2銆佹妸鍥劇墖璁劇疆涓鴻儗鏅鍥劇墖
濡傛灉鎴戜滑鐨勫浘鐗囨湰韜鏄涓涓鑳屾櫙鍥劇墖鐨勮瘽錛屽彲浠ュ湪css涓浣跨敤鈥渂ackground鈥濇潵璁劇疆璇ュ浘鐗囷紝鐒跺悗璁劇疆鏂囧瓧鐨刾adding灞炴у氨鍙浠ヤ嬌浠栦滑鍦ㄥ悓涓琛屾樉紺轟簡銆
html浠ｇ爜濡備笅錛
鎵懼洖瀵嗙爜
css浠ｇ爜濡備笅錛
#denglu {background:url(https://www.gxlcms.com/login.gif) no-repeat left center;}#zhaohuimima{font-size:14px;padding-left:50px;}
鎴戜滑鍦╟ss涓璁劇疆浜嗚儗鏅鍥劇墖錛岀劧鍚庡張璁劇疆浜嗘枃瀛楃殑padding-left灞炴э紝榪欐牱錛屽浘鐗囧拰鏂囧瓧灝卞湪鍚屼竴琛屾樉紺轟簡錛岃繍琛岀粨鏋滃氨涓嶅垏鍥句簡錛屼綘鍙浠ヨ嚜宸辮瘯涓涓嬨
3銆佹妸鏂囧瓧鍜屽浘鐗囧垎鍒鏀懼叆涓嶅悓鐨刣iv涓
涓嬮潰璇翠笅鏈鍚庝竴縐嶆柟娉曪紝鍒嗗埆鎶婂浘鐗囧拰鏂囧瓧鏀懼叆涓嶅悓鐨刣iv涓錛岀劧鍚庣敤鈥渕argin鈥濆睘鎬ц繘琛屽畾浣嶏紝灝卞彲浠ヤ嬌浠栦滑鏄劇ず鍦ㄥ悓涓琛屼簡銆
html浠ｇ爜濡備笅錛
鎵懼洖瀵嗙爜
css浠ｇ爜濡備笅錛
#zhaohuimima{font-size:14px;margin-top:-16px;padding-left:50px;}
鍦ㄦ祻瑙堝櫒涓榪愯屼互鍚庯紝浣犱細鍙戠幇錛岃繖涓鏂規硶涔熷彲浠ヨ╁浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屾樉紺猴紝浣嗘槸鐪嬭搗鏉ュソ鍍忛夯鐑︿簡涓鐐癸紝鎵浠ヤ釜浜鴻繕鏄姣旇緝鎺ㄨ崘絎涓縐嶆柟娉曠殑銆
杞鑷錛歨ttp://www.mahaixiang.cn/css/1149.html
③ css怎麼設置圖片和文字在同一行
問題分析：默認其實是一行的，只是水平不對齊。
問題解答：你可以用彈性核銷模型，或者是vertical-align: middle,可設置像素值，具體根據同行文字大小而定
img{vertical-align: -2px;}
<div class="byl"><img src="byl.png"/>文字內容</div>
深入了解：首先了解web渲染模式，了解BFC和IFC的區別。默認其實是一行的，只不過是基線位置不同，水平是不對齊的。