你说的是那种韩国人做的，界面很炫，效果很流畅的那种吗？是用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的区别。默认其实是一行的，只不过是基线位置不同，水平是不对齐的。