网页设计怎么单独的设计多种a:hover？ 网页设计中的.top ul li:hover a表示什么意思...
\u7f51\u9875\u8bbe\u8ba1\u4e2d\u7684\u52a8\u6001\u8138\u63a5\u4e2da:link a:visited a:hover a:active\u56db\u79cd\u72b6\u6001\u7684\u542b\u4e49\u662f\u4ec0\u4e48?a:link\uff1a\u8d85\u94fe\u63a5\u6b63\u5e38\u7684\u65f6\u5019\u7684\u72b6\u6001
a:visited\uff1a\u8d85\u94fe\u63a5\u88ab\u70b9\u51fb\u4ee5\u540e\u7684\u72b6\u6001
a:hover\uff1a\u8d85\u94fe\u63a5\u9f20\u6807\u7ecf\u8fc7\u72b6\u6001
a:active\uff1a\u8d85\u94fe\u63a5\u6fc0\u6d3b\u72b6\u6001
\u4f8b\u5982\uff1aa:link{text-decoration\uff1anone;}\u770b\u5230\u522b\u4eba\u603b\u7ed3\u7684\u4e24\u70b9\u53c2\u8003\u4e0b\u8bb0\u5fc6\uff1a\u5728CSS\u4e2d\uff0c\u5982\u679c\u5bf9\u4e8e\u76f8\u540c\u5143\u7d20\u6709\u9488\u5bf9\u4e0d\u540c\u6761\u4ef6\u7684\u5b9a\u4e49\uff0c\u5b9c\u5c06\u6700\u4e00\u822c\u7684\u6761\u4ef6\u653e\u5728\u6700\u4e0a\u9762\uff0c\u5e76\u4f9d\u6b21\u5411\u4e0b\uff0c\u4fdd\u8bc1\u6700\u4e0b\u9762\u7684\u662f\u6700\u7279\u6b8a\u7684\u6761\u4ef6\u3002
\u201c\u7231\u6068\u539f\u5219\u201d\uff08LoVe/HAte\uff09\uff0c\u5373\u56db\u79cd\u4f2a\u7c7b\u7684\u9996\u5b57\u6bcd\uff1aLVHA\u3002\u518d\u91cd\u590d\u4e00\u904d\u6b63\u786e\u7684\u987a\u5e8f\uff1aa:link\u3001a:visited\u3001a:hover\u3001a:active
\u6269\u5c55\u8d44\u6599\uff1a
link()\u4ee5\u53c2\u6570newpath\u6307\u5b9a\u7684\u540d\u79f0\u6765\u5efa\u7acb\u4e00\u4e2a\u65b0\u7684\u8fde\u63a5(\u786c\u8fde\u63a5)\u5230\u53c2\u6570oldpath\u6240\u6307\u5b9a\u7684\u5df2\u5b58\u5728\u6587\u4ef6\u3002\u5982\u679c\u53c2\u6570newpath\u6307\u5b9a\u7684\u540d\u79f0\u4e3a\u4e00\u5df2\u5b58\u5728\u7684\u6587\u4ef6\u5219\u4e0d\u4f1a\u5efa\u7acb\u8fde\u63a5\u3002\u51fd\u6570\u5728\u6267\u884c\u6210\u529f\u65f6\u5219\u8fd4\u56de0\uff0c\u5931\u8d25\u65f6\u5219\u8fd4\u56de-1\uff0c\u9519\u8bef\u539f\u56e0\u5b58\u4e8eerrno\u3002 link()\u6240\u5efa\u7acb\u7684\u786c\u8fde\u63a5\u65e0\u6cd5\u8de8\u8d8a\u4e0d\u540c\u6587\u4ef6\u7cfb\u7edf\uff0c\u5982\u679c\u9700\u8981\u8bf7\u6539\u7528symlink()\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1-link
\u8868\u793a\u5b9a\u4e49\u4e00\u4e2a\u6309\u7167\u5143\u7d20\u5c42\u7ea7\u5173\u7cfb\u9650\u5b9a\u7684CSS\u6837\u5f0f\u3002
\u5373\uff1a\u8981\u6c42\u5143\u7d20\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u9996\u5148\u662f\u6700\u5916\u5c42\u5143\u7d20\u8981\u5305\u542b.top\u6837\u5f0f\uff0c\u5176\u6b21\u518d\u53bb\u5bfb\u627e\u4e0b\u9762ul\u5143\u7d20\uff0c\u518d\u627e\u5230ul\u4e0b\u9762\u7684li\uff0c\u518d\u627e\u5230li\u4e0b\u9762\u7684a\u6807\u7b7e\u5143\u7d20\u3002
\u4e0a\u9762\u8fd9\u4e2a\u6837\u5f0f\u7684\u610f\u601d\u662f\u5f53\u9f20\u6807\u79fb\u52a8\u5230li\u5143\u7d20\u4e0a\u65f6\uff0c\u5b83\u4e0b\u9762\u7684a\u6807\u7b7e\u5c06\u4f1a\u6309\u7167\u8fd9\u4e2a\u6837\u5f0f\u8fdb\u884c\u6e32\u67d3\u3002
\u94fe\u63a5 \u6837\u5f0f\u7684\u8fd9\u79cd\u5b9a\u4e49\u65b9\u5f0f\u53ea\u5bf9\u6ee1\u8db3\u4e0a\u8ff0\u7ed3\u6784\u7684\u5143\u7d20\u751f\u6548\uff0c\u50cf\u5982\u4e0b\u7ed3\u6784\u7684\u4ee3\u7801\uff0c\u5c06\u4e0d\u4f1a\u62e5\u6709\u4e0a\u8ff0\u5b9a\u4e49\u7684\u6837\u5f0f\uff1a
\u94fe\u63a5
因为css无法选择父元素，但是能选择兄弟元素，所以我们没必要那么死板，可以让方框和字体作为兄弟节点，让字体悬浮在方框上就行了。想要单独给某个a设置hover，可以直接利用该a的id，或者用父元素的后代选择器nth-child()，不过不推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>icon</title>
<style type="text/css">
a {
text-decoration: none;
}
#box {
width: 306px;
height:306px;
position: relative;
overflow: hidden;
}
#icon{
width: 300px;
height: 300px;
position: absolute;
border: 1px solid black;
}
#icon:hover{
border: 3px solid red;
}
#icon img{
width: 200px;
height: 200px;
border: 1px solid orange;
border-radius: 100px;
margin-left:50px;
margin-top: 20px;
}
#txt{
width: 300px;
display: block;
position: absolute;
bottom: 5px;
text-align: center;
cursor: pointer;
z-index: 100;
}
#txt:hover{
color: green;
}
#txt:hover + #icon{
border: 3px solid green;
}
</style>
</head>
<body>
<div id="box">
<a id="txt">请放进来</a>
<a id="icon"><img src=""/></a>
</div>
</body>
</html>
绛旓細鍥犱负css鏃犳硶閫夋嫨鐖跺厓绱狅紝浣嗘槸鑳介夋嫨鍏勫紵鍏冪礌锛屾墍浠ユ垜浠病蹇呰閭ｄ箞姝绘澘锛屽彲浠ヨ鏂规鍜屽瓧浣撲綔涓哄厔寮熻妭鐐癸紝璁╁瓧浣撴偓娴湪鏂规涓婂氨琛屼簡銆傛兂瑕鍗曠嫭缁欐煇涓猘璁剧疆hover锛屽彲浠ョ洿鎺ュ埄鐢ㄨa鐨刬d锛屾垨鑰呯敤鐖跺厓绱犵殑鍚庝唬閫夋嫨鍣╪th-child()锛屼笉杩囦笉鎺ㄨ崘 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
绛旓細1.甯冨眬鐗瑰緛 鏃犺娴忚鍣ㄧ殑纭垏澶у皬濡備綍锛椤甸潰鐨甯冨眬濮嬬粓涓庣涓娆＄紪鍐欎唬鐮佹椂鐩稿悓銆傚父瑙勭殑PC绔欑偣鏄潤鎬佸竷灞鐨勶紝鍏锋湁鏈灏忓搴︼紝鍥犳锛屽鏋滃搴﹀皬浜庢鍊硷紝鍒欐樉绀烘粴鍔ㄦ潯锛屽鏋滃搴﹀ぇ浜庢鍊硷紝鍒欐樉绀哄唴瀹瑰眳涓拰鑳屾櫙銆傝繖绉璁捐鍦≒C涓婂緢甯歌銆2.璁捐鏂规硶 PC:涓績甯冨眬锛屾墍鏈夋牱寮忎娇鐢ㄧ粷瀵瑰搴/楂樺害(px)锛岃璁′竴涓竷...
绛旓細a:visited锛氳秴閾炬帴琚偣鍑讳互鍚庣殑鐘舵 a:hover锛氳秴閾炬帴榧犳爣缁忚繃鐘舵 a:active锛氳秴閾炬帴婵娲荤姸鎬 渚嬪锛歛:link{text-decoration锛歯one;}鐪嬪埌鍒汉鎬荤粨鐨勪袱鐐瑰弬鑰冧笅璁板繂锛氬湪CSS涓紝濡傛灉瀵逛簬鐩稿悓鍏冪礌鏈夐拡瀵逛笉鍚屾潯浠剁殑瀹氫箟锛屽疁灏嗘渶涓鑸殑鏉′欢鏀惧湪鏈涓婇潰锛屽苟渚濇鍚戜笅锛屼繚璇佹渶涓嬮潰鐨勬槸鏈鐗规畩鐨勬潯浠躲傗滅埍鎭ㄥ師鍒欌濓紙...
绛旓細杩戝勾鏉ワ紝闅忕潃涓绘祦娴忚鍣ㄥCSS鐨勬敮鎸佸寮猴紝缃戦〉璁捐棰嗗煙鍑虹幇浜嗕竴绉嶆柊鐨勮秼鍔匡紝鍗"缃戦〉閲嶆瀯"銆傝繖绉嶉潻鍛芥鐨勮璁妯″紡寮鸿皟灏嗙綉椤电殑椋庢牸鍜屽唴瀹瑰垎绂汇侶TML鍜孹ML绛夋爣璁拌瑷涓昏鐢ㄤ簬瀹氫箟缃戦〉鐨勫唴瀹癸紝纭繚淇℃伅鐨勫噯纭拰缁撴瀯娓呮櫚锛岃岀綉绔欑殑澶栬鍜屾牱寮忓垯鐢鍗曠嫭鐨CSS鏂囦欢璐熻矗绠＄悊銆傝繖绉嶅垎绂诲紡璁捐涓嶄粎绠鍖栦簡浠ｇ爜锛屾彁楂樹簡缃戦〉...
绛旓細鎵浠,灏辨垜涓汉瑙傜偣鏉ヨ,棣栧厛鑺辩偣閽卞幓娉ㄥ唽涓涓煙鍚,鐙珛鐨鍩熷悕灏辨槸涓汉缃戠珯鐨勭涓绗旇储瀵,瑕佹妸鍩熷悕璧峰緱褰㈣薄銆佺畝鍗曘佹槗璁般 瑕侀涓:鎺屾彙寤虹綉宸ュ叿 缃戠粶鎶鏈殑鍙戝睍甯﹀姩浜嗚蒋浠朵笟鐨勫彂灞,鎵浠ョ敤浜庡埗浣淲eb椤甸潰鐨勫伐鍏疯蒋浠朵篃瓒婃潵瓒婁赴瀵屻備粠鏈鍩烘湰鐨凥TML缂栬緫鍣ㄥ埌鐜板湪闈炲父娴佽鐨凢lash浜掑姩缃戦〉鍒朵綔宸ュ叿,鍚勭鍚勬牱鐨刉eb椤甸潰鍒朵綔宸ュ叿...
绛旓細鍦缃戦〉璁捐涓,杩欑闄愬埗鍙互浠庢蹇靛埌鎶鏈,骞朵笖鏈夋棤灏界殑瀛愬瓙瀛欏瓩銆鍒朵綔缃戦〉鏃,涓嶄粎瑕佸敖閲忓湪鐞嗘兂灏哄涓嬭繍琛,杩樿鑰冭檻鏈鍧忕殑灏哄,鍥犱负濡傛灉鐢ㄦ埛鐨勬墜鏈哄睆骞曞昂瀵哥湡鐨勫緢灏忔庝箞鍔? 14.澶氱湅鐪嬩綘鐨勮璁,鐩村埌浣犲帉鍊︿负姝 鐩镐俊濡傛灉浣犱竴鐩村璁捐寰堟湁鐑儏鐨勮瘽,涓瀹氱粡鍘嗚繃鈥滅湅鐫鑷繁鐨勪綔鍝佺湅鍒版兂鍚愨濊繖浠朵簨銆傚綋鎴戝垰杩涘叆璁捐琛屼笟鏃...
绛旓細涓昏鐢ㄤ簬鏄剧ず鏂囩珷鐨勬爣棰,鍐呭鍖烘斁缃枃绔犵殑鍐呭,杩欑被甯冨眬鍦ㄤ竴浜涜鏂囥佸鏈綉绔鐨勮璁涓瘮杈冨父鐢ㄣ 缃戠珯璁捐閮戒笉浼鍗曠嫭浣跨敤浠ヤ笂鍒楀嚭鐨勬煇涓绉嶅竷灞缁撴瀯,鑰屾槸閫氳繃娣峰悎浣跨敤澶氱甯冨眬缁撴瀯鏉ュ疄鐜拌嚜宸辨兂瑕佺殑鏁堟灉,杩欑被甯冨眬閫氬父绉颁负鈥滅患鍚堟у竷灞鈥濄 鍥涖佺綉绔椤甸潰璁捐 缃戠珯椤甸潰鏄綉绔欑殑鏈缁堣〃鐜板舰寮忋傜綉绔欓〉闈㈢敱椤甸潰鍐呭鐨勮川閲忓害鍜...
绛旓細鍝嶅簲寮忚璁℃槸鐢辫憲鍚缃戦〉璁捐甯圗than Marcotte鍦2010骞5鏈堟彁鍑鐨勮璁姒傚康锛岄殢鍚庡腑鍗峰墠绔拰璁捐棰嗗煙锛屾垚涓轰簡濡備粖缃戦〉璁捐鐨勫ぇ瓒嬪娍銆傛濡傚悓Ethan鎵璇达細鈥滃搷搴斿紡缃戠珯璁捐鎻愪緵浜嗕竴绉嶅叏鏂扮殑閫夋嫨锛岃繖绉嶅熀浜庢爡鏍煎竷灞鍜孋SS3鐨勬祦鍔ㄦх綉椤佃璁★紝鍙互璁╃綉椤甸殢鐫灞忓箷鍙樺寲鑰屽搷搴斻傝繖鏄竴绉嶆洿涓虹粺涓锛屾洿鍔犲叏闈㈢殑璁捐鎶宸э紝涓...
绛旓細鏈変袱绉嶆柟娉曞彲鍦 HTML 涓祵濂楁鏋堕泦:鍐呴儴妗嗘灦闆嗗彲浠ヤ笌澶栭儴妗嗘灦闆嗗湪鍚屼竴鏂囦欢涓畾涔夛紝涔熷彲浠ュ湪涓嶅悓鏂囦欢涓鍗曠嫭瀹氫箟銆侱reamweaver 涓瘡涓瀹氫箟鐨勬鏋堕泦鍧囧湪鍚屼竴鏂囦欢涓畾涔夊叾鎵鏈夋鏋堕泦銆傝繖涓ょ绫诲瀷鐨勫祵濂楀潎浜х敓鐩稿悓鐨勮瑙夋晥鏋;濡傛灉娌℃湁鐪嬪埌浠ｇ爜锛屽緢闅惧垽鏂娇鐢ㄧ殑鏄摢绉嶇被鍨嬬殑宓屽銆傚湪 Dreamweaver 涓娇鐢ㄥ閮ㄦ鏋...
绛旓細E銆佸鑸鑸槸缃戦〉璁捐涓殑閲嶈閮ㄥ垎,涔熸槸鏁翠釜WEB绔欑偣璁捐涓殑涓涓鐙珛閮ㄥ垎銆備竴鑸潵璇,涓涓綉绔欏勾鐨勫鑸綅缃湪姣忎釜椤甸潰涓嚭鐜扮殑浣嶇疆鏄浐瀹氱殑銆傚琛岀殑浣嶇疆瀵逛簬绔欑偣鐨勭粨鏋勪笌鏁翠綋甯冨眬鏈夌潃涓捐冻杞婚噸鐨勪綔鐢ㄣ傚鑸殑浣嶇疆涓鑸湁鍥涚鏍囧噯鐨勬樉绀轰綅缃:宸︿晶銆佸彸渚с侀《閮ㄥ拰搴曢儴銆傛湁鐨勭珯鐐硅繍鐢ㄤ簡澶氱瀵艰埅,鏄负浜嗗鍔犻〉闈㈢殑鍙闂с
