html如何将文本显示在图片下方 html css怎么样才能把文字放在图片的正下方
\u901a\u8fc7CSS+DIV\u600e\u4e48\u5c06\u6587\u5b57\u5199\u5728\u56fe\u7247\u4e0a\u65b9HTML\u56fe\u7247\u548c\u6587\u5b57\u662f\u5e76\u5217\u663e\u793a\u7684\u3002\u5982\u4e0b\uff1a
1. \u5c06\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u6211\u4eec\u52a0\u4e2adiv\u628a\u56fe\u7247\u548c\u6587\u5b57\u5305\u5728\u4e00\u8d77\uff0c\u5e76\u4e14\u52a0\u4e0aimg-group\u548cimg-tip\u8fd9\u4e24\u4e2aclass\uff0c\u4fbf\u4e8e\u540e\u9762\u7684\u5904\u7406\u3002
\u6211\u4eec\u8981\u8ba9\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u9762\uff0c\u9700\u8981\u52a0\u4e0a\u5b9a\u4f4d\u3002\u770b\u6587\u5b57\u6d6e\u5728\u4e86\u56fe\u7247\u7684\u5e95\u90e8\u3002
display: inline-block;\u4e0e\u5b9a\u4f4d\u65e0\u5173\uff0c\u53ea\u662f\u4f7f\u6574\u4e2a.img-group\u957f\u5bbd\u4e0e\u56fe\u7247\u9002\u5e94\u3002
2. \u6587\u5b57\u4e0e\u80cc\u666f\u5904\u7406\u6587\u5b57\u5de6\u5bf9\u9f50\uff0c\u6211\u4eec\u628a\u6587\u5b57\u5c45\u4e2d\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
\u6587\u5b57\u4e0d\u6e05\u695a\uff0c\u6211\u4eec\u52a0\u4e0a\u80cc\u666f\u548c\u5b57\u4f53\u989c\u8272\uff0c\u5e76\u9002\u5f53\u7684\u8bbe\u7f6e\u4e00\u4e0b\u900f\u660e\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
3. \u9f20\u6807\u60ac\u6d6e\u7279\u6548\u73b0\u5728\u9759\u6001\u6548\u679c\u5df2\u7ecf\u5b8c\u6210\u4e86\uff0c\u63a5\u4e0b\u6765\uff0c\u52a0\u4e00\u4e0b\u9f20\u6807\u60ac\u6d6e\u51fa\u73b0\u6587\u672c\u7684\u6548\u679c\uff0c\u73b0\u5728.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff0c\u8ba9\u6587\u672c\u9ed8\u8ba4\u9690\u85cf\uff1a
\u518d\u52a0\u4e0a\u9f20\u6807\u60ac\u505c\u5728\u56fe\u7247\u4e0a\uff0c\u663e\u793a\u6587\u672c\u7684\u4ee3\u7801\uff1a
\u4ee3\u7801\u603b\u6c47HTML
\u6211\u662f\u96ea\u8c79
CSS
.img-group { position: relative; display: inline-block;} .img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;} .img-group:hover .img-tip { display: block; width: 100%; text-align: center;}
Document
.d1{
width: 400px;
height: 250px;
background-color: red;
text-align: center;
}
\u4f60\u5565\u65f6\u5019\u5ac1\u7ed9\u6211,hahahahaahahahahahaah
\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014
\u8fd9\u6837\u5c31\u4f1a\u80fd\u591f\u5c06\u6587\u5b57\u653e\u5728\u56fe\u7247\u7684\u6b63\u4e0b\u65b9\uff0c\u5f97\u5230\u4ee5\u4e0b\u56fe\u7247\uff1a
\u6587\u5b57\u4f4d\u4e8e\u6b63\u53f3\u8fb9\u7684\u65b9\u6cd5\uff1a
Document
.d1{
width: 400px;
height: 250px;
background-color: red;
}
.d2{
vertical-align: middle;
}
\u4f60\u5565\u65f6\u5019\u5ac1\u7ed9\u6211
给文字加上p标签
<a href="kuzi.html"><img src="裤子.jpg"></a>
<p><a href="kuzi.html">裤子</a><p>
绛旓細灏鍥剧墖浣滀负鑳屾櫙鎻掑叆,鐒跺悗鍦html涓灏卞彲浠ョ洿鎺ユ坊鍔犱唬鐮佹潵瀹炵幇浜 duryqingxu | 鍙戝竷浜2013-07-19 涓炬姤| 璇勮 2 1 鍐欎竴涓猟iv,css,id鏍峰紡涓啓#div {background:url("img.jpg") no-repeat;}鍙敤background-position鏉ユ帶鍒惰儗鏅浘鐗囩殑浣嶇疆,form涔熺敤div妗嗚捣鏉,鐢ㄦ牱寮忔帶鍒,濡俶argin鍜宲adding(閮芥湁涓婁笅宸﹀彸)鎴栨槸绌...
绛旓細涓銆佹濊矾锛氬湪椤甸潰涓婃彃鍏ヤ竴涓浘鐗囷紝鏍规嵁鍥剧墖澶у皬璁剧疆瀹藉害锛鏂囨湰濮嬬粓閮鏄剧ず鍦ㄥ浘鐗鐨勪笅鏂逛綅缃紝鑰屼笖杈撳叆鏂囧瓧璺熺潃鏂囨湰瀛楁暟鍙婅鏁拌嚜鍔ㄨ皟鏁撮珮搴︺備簩銆佹牴鎹濊矾鍐html+div+css锛屾湰浜洪噰鐢ㄧ綉缁滅ず渚嬪浘鏉ュ仛鏄剧ず锛屼互灏嗗叾涓嬫彃鍏ody鍖哄煙鍐呭氨琛岋細<div style="width:287px; position:relative"> <div style="width:100%...
绛旓細鎵撳紑宸ュ叿鏍忎笂鐨勨滃浘鐗団濋夐」鍗°傚崟鍑诲浘鐗囧苟鎷栧姩浠ヤ慨鏀瑰浘鐗囦笂鐨勬枃瀛椼傚鏋滄兂璁鍥剧墖涓婄殑鍥剧墖鍜屾枃瀛楅兘鍙楀埌鍚屾牱鐨勭紪杈戠害鏉燂紝璇锋墦寮鈥滄牸寮忊濋夐」鍗′笂鐨勨滃浘鐗囧拰鏂囨湰鈥濈粍锛岀劧鍚庨夋嫨鈥滃浘鐗囧拰鏂囨湰鏍煎紡鈥濅笅鎷夎彍鍗曘傚湪鏍煎紡涓嬫媺鑿滃崟涓夋嫨鈥鍦ㄥ浘鐗涓鏄剧ず鏂囧瓧鈥濋夐」锛岃繖灏嗗惎鐢ㄥ浘鐗囦笂鐨勬枃鏈互鏇挎崲鍥剧墖鐨勫姛鑳姐倃ord涓婄殑鍥...
绛旓細3銆佸湪鏂囨湰妗嗕腑褰曞叆鏂囧瓧銆4銆佸厜鏍囩疆浜庢枃鏈涓紝鐐瑰嚮銆愭彃鍏ャ戔斻愬浘鐗囥戙5銆佸氨鍙互鎶婂浘鐗鎻掑叆鍒版枃鏈妗嗕腑銆6銆佷笉杩囷紝鎻掑叆鐨勫浘鐗囦粎鑳戒互瀛楃鐨勬柟寮忓瓨鍦紝涓嶈兘涓庢枃鏈鍐呯殑鏂囧瓧杩涜缁曟帓锛屽洜涓洪変腑璇ュ浘鐗囧悗锛屻愮幆缁曟枃瀛椼戦」涓嶅彲璁剧疆銆7銆侀氳繃绉诲姩鍥剧墖鍦ㄦ枃鏈妗嗕腑鐨勪綅缃紝鍙婅缃浘鐗囩殑澶у皬锛屼篃鍙互寰楀埌杈冨ソ...
绛旓細Img鏄竴涓唴鑱斿厓绱犮傝璁剧疆瀹冪殑margin灞炴т娇鍏朵繚鎸佸湪搴曢儴锛屽氨闇瑕佸皢鍏惰浆鎹㈡垚鍧楀厓绱鏄剧ず:block锛涚劧鍚庝娇鐢╩argin:0鑷姩锛涘簳閮ㄤ繚鎸佺敾闈㈡按骞筹紱(鏈夌殑璁捐甯鍦ㄥ浘鐗涓婂姞浜嗕竴涓猟iv鏍囩锛岀劧鍚庨氳繃div鏍囩鐨刴argin瀹炵幇锛璁瀹冧繚鎸佸湪搴曢儴銆備竾缁寸綉鐨勬牳蹇冭瑷锛屾爣鍑嗛氱敤鏍囪璇█涓嬭秴鏂囨湰鏍囪璇█(HTML)鐨勭浜旀閲嶅ぇ淇(...
绛旓細鏃朵笉娓呮浣犳墽琛屼簡浠涔堛愬姩浣溿戯紝鎵浠ユ殏鏃跺氨鎶鐒︾偣鍥炲埌浜嗗浘鐗囷紝浣犲彲鑳介渶瑕佸啀娆℃墽琛岃繖涓姩浣滐紙姣斿璇撮夋嫨浜嗘煇涓崟鍏冩牸锛夛紱瑕佹槸鍦鏂囨湰妗嗕腑鐨勮緭鍏ヨ繃绋嬫槸鍙鏈熺殑锛堟瘮濡3涓瓧绗﹂暱搴︼級锛岄偅鍙互璁剧疆鏂囨湰妗嗙殑Change锛屽湪鏂囨湰妗嗙殑杈撳叆婊¤冻鏉′欢鍚庝富鍔璁╁浘鐗囨樉绀骞跺皢鐒︾偣璁惧畾鍒颁笅涓涓綅缃紙鎸夐挳鎴栧崟鍏冩牸绛夌瓑锛...
绛旓細鍦ㄤ笂闈㈠仛涓鎺掓寜閽 瀵瑰簲 浣犳兂瑕佺殑鍚勭寮瑰嚭灞 鏃犻潪灏辨槸鐢↗S 鎺у埗鏄剧ず闅愯棌 锛
绛旓細鍦ㄧ綉椤典腑鎻掑叆鍥剧墖html鍥剧墖浠ｇ爜鏂规硶锛氭楠わ細涓銆乭tml鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦╤tml婧愪唬鐮佷腑鍒嗗埆鎻掑叆涓夊紶鍥剧墖锛屼竴寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害...
绛旓細鍦ㄤ竴涓<a>鏍囩涓姞涓婁竴涓<img>鏍囩鍐呭锛屽嵆鍙璁璇<img>鎷ユ湁涓涓秴閾炬帴銆傜劧鍚庡彲浠ュ湪鍚庨潰缁х画鍐鏂囧瓧锛屾鏂囧瓧灏变細鏄剧ず鎴愯秴閾炬帴锛岀偣鍑昏鏂囧瓧鍗冲彲杩涘叆瓒呴摼鎺ャ涓嬮潰瀹炰緥锛<a href="www.baidu.com"> <img border="0" src="/i/eg_buttonnext.gif" /></a> ...
绛旓細鍐欎竴涓猟iv锛宑ss锛宨d鏍峰紡涓啓#div {background:url("img.jpg") no-repeat;}鍙敤background-position鏉ユ帶鍒惰儗鏅鍥剧墖鐨勪綅缃紝form涔熺敤div妗嗚捣鏉ワ紝鐢ㄦ牱寮忔帶鍒讹紝濡俶argin鍜宲adding锛堥兘鏈変笂涓嬪乏鍙筹級鎴栨槸绌烘牸 锛涳紙html涓浠ｈ〃绌烘牸锛夈傛妗嗙殑棰滆壊灞炴у氨闅句簡銆傛垜浠ヨ嚜宸辩煡璇嗚繕瑙ｅ喅涓嶄簡锛岄珮鎵嬩笂鍚с
