怎么用HTML把图片制作成一排?
首先创建一个大的div包含起来,然后设置宽和高,之后使用img标签将图片引入,然后设置图片的宽和高,也可以设置图片的float属性(浮动属性)
绛旓細棣栧厛鍒涘缓涓涓ぇ鐨刣iv鍖呭惈璧锋潵锛岀劧鍚庤缃鍜岄珮锛屼箣鍚庝娇鐢╥mg鏍囩灏嗗浘鐗囧紩鍏ワ紝鐒跺悗璁剧疆鍥剧墖鐨勫鍜岄珮锛屼篃鍙互璁剧疆鍥剧墖鐨刦loat灞炴э紙娴姩灞炴э級
绛旓細灏嗗寮犲浘鐗囧仛鎴愬苟鎺掔殑鏍峰紡锛鍙互浣跨敤娴姩锛屼篃鍙互浣跨敤瀹氫綅锛屾牴鎹笉鍚岀殑鐜浣跨敤涓嶅悓鐨勪唬鐮侊紝浠婂ぉ鎴戜滑浣跨敤甯哥敤鐨勬诞鍔ㄦ潵鍋氳繖绉嶅苟鎺掔殑鏁堟灉銆傚鍥撅紱寤虹珛鍑犲紶鍥剧墖锛岀劧鍚庢瘡寮犲浘鐗囬兘鐢ㄤ竴涓猟iv灏忕洅瀛愬寘鍚紝鍦4涓洅瀛愬闈㈡槸鏈澶х殑涓涓洅瀛愶紱杩欐牱boss鐩掑瓙灏卞彲浠ユ帶鍒堕噷闈㈢殑灏忕洅瀛愪簡 濡傛灉杩欐牱甯﹀叆鍥剧墖锛屾樉绀虹殑鏁堟灉鏄繖...
绛旓細浣犲彲浠ュ皢绀轰緥浠g爜淇濆瓨涓轰竴涓狧TML鏂囦欢锛灏<img>鏍囩涓殑src灞炴ф浛鎹负浣犺嚜宸辩殑鍥剧墖璺緞锛屽苟鍦ㄦ渶鍚庣殑<p>鏍囩涓坊鍔犺嚜宸辩殑鏂囧瓧鍐呭銆傜劧鍚庡湪娴忚鍣ㄤ腑鎵撳紑璇TML鏂囦欢锛屽嵆鍙湅鍒颁笁寮犲浘鐗囨斁鍦ㄤ竴琛屻
绛旓細<div class="imgbox"> <img src=""><img src=""></div>浠g爜濡備笂鎵绀猴紝鍥剧墖榛樿鏄珫鐩存帓鍒楋紝浣犳兂瑕佺殑搴旇鏄按骞虫í鎺掑垪锛屽彧闇瑕佸湪css涓坊鍔犲涓嬫牱寮 .imgbox{overflow:hidden;}.imgbox img{float:left};鍏朵腑绗竴涓牱寮忔槸涓轰簡娓呴櫎鍥剧墖娴姩瀵瑰叾浠栧厓绱犵殑褰卞搷 绾墜鎵擄紝鏈涢噰绾筹紝璋㈣阿锛侊紒锛
绛旓細缁檛d娣诲姞style 鍚堝苟琛 rowspan = "2" 杩欎釜鏍煎崰2琛 鍚堝苟鍒 colspan = "2" 杩欎釜鏍煎崰2鍒
绛旓細1銆佸彲浠ョ敤涓涓渶澶х殑div灞 鍖呰9浣忥紝宸﹁竟涓涓猟iv 宸︽诞鍔紝鍙宠竟涓涓猟iv鍙虫诞鍔紝宸﹁竟鐨勫氨鏄竴涓猯ogo鍥锛屼富瑕佸鐞嗗湪鍙宠竟銆2銆佸彸杈圭殑div瀹氫箟濂戒箣鍚庯紝鍦ㄧ粏鍒嗕负涓婁腑涓嬶紝涓変釜澶iv锛屾渶涓婇潰鐨刣iv 鍙互宸﹀彸娴姩锛屽乏杈逛竴涓猻pan鏍囩鏀惧畾浣嶏紝鍙宠竟鍙互鐢 ul li鏍囩 鏉ヨ繘琛屽垎閰嶃3銆佷腑闂寸殑div鍚岀悊銆傚乏鍙砫iv...
绛旓細1銆備綘缁檌mg璁剧疆浜哾isplay:bolck;2.浣犵殑鏂囧瓧鏄敤P鏍囩鍖呰捣鏉ョ殑锛孭鏍囩鏄潡鐘跺厓绱狅紝浼氱嫭鍗犱竴琛岋紙鍦ㄦ帓闄ゆ诞鍔ㄥ拰瀹氫綅鐨勬儏鍐典笅锛3.浣犵殑鍥剧墖澶ぇ浜嗘妸鏂囧瓧鎸や笅鍘讳簡 娌℃湁浠g爜涓嶇煡閬撲綘鐨勫叿浣撴儏鍐碉紝涓嶈繃鎴戣寰楃浜岀鏈鏈夊彲鑳戒簡銆傚鏋滆繕涓嶆槸鐨勮瘽锛岃鎶婁唬鐮佸鍒剁粰鎴戠湅鐪嬶紝灏辨槸浣犵殑甯冨眬鍜宑ss ...
绛旓細1銆侀鍏堣鎺掑垪鐨勫洓寮鐓х墖鏀剧疆鍒板悓涓涓枃浠跺す涓紝骞舵墦寮鐢佃剳涓繍琛html鐨杞欢銆2銆佸叾娆$偣鍑荤晫闈腑鐨勬枃浠剁紪杈戞爮锛岄夋嫨鎺掑垪锛岀偣鍑绘诞鐐规帓鍒椼3銆佹渶鍚庡湪寮瑰嚭鐨勯〉闈腑锛岀偣鍑诲洓寮鍥剧墖锛屽苟灏嗘帓鍒楄鏁拌瀹氫负涓よ鍗冲彲銆
绛旓細浣犲彲浠ヨ缃笂涓嬩袱涓崟鍏冩牸锛屽皢鍗曞厓鏍煎涓庨珮璁剧疆鎴愬浘鐗澶у皬鍍忕礌鍚庯紝灏嗕袱涓浘鐗囧垎鍒涓哄崟鍏冩牸鑳屾櫙锛岀劧鍚庡湪鍗曞厓鏍煎唴杈撳叆鏂囧瓧鍗冲彲
绛旓細濡傛灉涓嶆兂浣跨敤PS鏉ョ紪杈戝浘鐗囷紝鍙互鍦ㄧ綉椤典腑鐩存帴鐢ㄥ涓狣IV+CSS瀹炵幇锛屽厛璁剧疆濂藉悇涓狣IV鐨勪綅缃拰澶у皬锛岀劧鍚庣敤CSS鎸囧畾璇鍥剧墖涓鑳屾櫙鍥剧墖锛屽彧瑕佹妸background-position鐨勫艰绠楀ソ锛屽氨鍙互浣緿IV鏄剧ず鍥剧墖鐨勪笉鍚岄儴浣嶏紝瀹炵幇鎷煎浘鏁堟灉銆