求教大神，css应该怎么布局才能实现下图的布局和hover的特效 如何在div+css的布局结构下做图片轮播的特效，求高手指点...
\u8bf7\u6559css\u5927\u795e \u8fd9\u79cd\u5e03\u5c40\u600e\u4e48\u5b9e\u73b0\u5982\u679c\u60f3\u5934\u90e8\u548c\u5c3e\u90e8\u56fa\u5b9a\u5728\u7a97\u53e3\u7684\u4f4d\u7f6e\u4f7f\u7528position
css\u4ee3\u7801\u5982\u4e0b
header{position:fixed;top:0}footer{position:fixed;bottom:0;}
\u6211\u6b63\u597d\u4e5f\u505a\u4e86\u4e00\u4e2a\u548c\u4f60\u4e00\u6837\u7684\u6848\u4f8b\u3002\u5e0c\u671b\u4e00\u8d77\u4ea4\u6d41\uff01
\u9644\u4ef6\u91cc\u662f\u6848\u4f8b\uff0c\u5e0c\u671b\u91c7\u7eb3\uff01
给你介绍下css的伪类。
a:link {} /* 未访问的链接 */
a:visited {} /* 已访问的链接 */
a:hover {} /* 当有鼠标悬停在链接上 */
a:active {} /* 被选择的链接 */
但是你说的img实现的不如用css的background来实现更容易些，不过你还需要准备这六块鼠标放在上面变灰的图片。当鼠标悬停在某张图片时，背景自动换成灰的。
你好知友!
一种方法：用ps，将6张图做变灰处理，可以百度教程。当hover的时候，将图片的地址对应替换成灰色的图片，优点，各个浏览器兼容，缺点，繁琐，而且资源占用大。
第二种方法：用css，不用jquery插件。a:hover img{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}这个就火狐不支持，其他浏览器都支持。
第三种办法：用jquery，但是据说性能不稳定。
所以建议用法第二种，对于火狐下面的不能变灰，你可以让他变透明也行啊！
直接根据a写hover啊，a:hover{ background:#eee;},把你定义的a里面的大小宽度在hover里面也相应的写一下。
把你的六块通过图片的背景方式来实现。（考虑IE6的话，就是做原图和灰色的各一套，IE6对PNG的透明支持不好）直接根据a写hover
绛旓細.box{ border:2px solid transparent; background-color:#000;}.box:hover{ border:2px solid #fff; background-color:rgba(0,0,0,0.5); } 鍒濆鏃跺儚鎴戠殑渚嬪瓙閭ｆ牱璁剧疆杈规涓洪忔槑寰堥噸瑕侊紝涓嶇劧绉诲叆鏃跺姞杈规浼氫骇鐢熶綅绉汇傚彟澶栧鏋滀綘鐢ㄧ殑涓嶆槸鑳屾櫙鑹茶屾槸鑳屾櫙鍥剧殑璇濆氨鍍忎笅闈㈤偅鏍峰啓 ...
绛旓細#login {right:50px; position:absolute; }鐧婚檰瀵艰埅鏉＄洰娉ㄥ唽/*濡傛灉浣犺繕鏄瑕鐢╯pan鐧婚檰瀵艰埅鏉＄洰娉ㄥ唽*/鑰屼笖span鏄鍏冪礌锛屼綘闈炶鐢╠isplay鍘绘妸浠栭噸鏂板畾涔変负鍧楀厓绱狅紝涓嶆槸鑴变簡瑁ゅ瓙鎵撳眮鍚楋紝鐩存帴鐢ㄥ潡鍏冪礌灏卞彲浠ユ悶瀹氱殑锛屽緢绠鍗曪紝鎴栬呯敤span涓嶈鐢╠isplay鍘婚噸鏂板畾涔夊畠锛泂pan鐨勫師鎰忓氨鏄...
绛旓細 .mbox {display:flex; flex-wrap:wrap; width:720px; margin:0 auto; border:1px solid #888} .box1 {flex:1 0 200px; height:200px; margin:30px 0 0 30px; background-color:#f88} .box2 {flex:2 0 400px; height:200px; margin:30px 30px 0 30px; background-color:#...
绛旓細<!doctype html>绀轰緥*{ padding:0;margin:0; }li{ list-style:none; }.ul{ margin:40px; }.ul li{ line-height:30px;text-align:center;background:#cccccc; }.ul li.active{ background:#ff0000; }.ul li a{ color:#ffffff;text-decoration:none; }.ul li.active a{ color:#000...
绛旓細杩欎綅缃戝弸浣犲ソ锛屼綘鍙互璁剧疆height:auto;min-height:浣犳兂瑕佺殑鍊;杩欐牱鏉ヨ缃傜粰涓涓渶灏忛珮搴﹀氨鍙互浜嗭紝瓒呰繃浜嗚繖涓珮搴︿細鑷傚簲銆
绛旓細棣栧厛锛屾渶绠鍗曠殑鍔炴硶鏄妸瀹藉拰楂樿涓虹浉鍚岀殑鍥哄畾鍊笺備絾鏄鏋滄槸閲囩敤鑷傚簲甯冨眬鐨勶紝姣斿姝ｆ柟褰㈢殑瀹芥槸灞忓箷瀹藉害鐨50%锛屽垯瑕杩欐牱锛氬敮涓瑕佹敞鎰忕殑灏辨槸鍙兘瀛樺湪娴忚鍣ㄥ吋瀹归棶棰橈紝涓嶈繃鎴戝湪鎵嬫満寰俊鍐呯疆娴忚鍣ㄤ互鍙婄數鑴戠殑Chrome涓婃祴璇曢兘娌￠棶棰
绛旓細background:url(images/a.gif) no-repeat x y; x,y鐢ㄥ间唬鏇匡紙姣斿10px 10px锛;x鐨勫硷細鏄窛绂诲浘鐗囧乏杈圭殑璺濈锛泍鐨勫硷細鏄窛绂诲浘鐗囧彸杈圭殑璺濈銆傜妤间富宸ヤ綔椤哄埄锛
绛旓細鍗崇綉椤靛垵濮嬪ぇ灏忓崰灞忓箷闈㈢Н鐨100%銆傚嵆璁﹙iewport鐨勫搴︾瓑浜庣墿鐞嗚澶囦笂鐨勭湡瀹炲垎杈ㄧ巼锛屼笉鍏佽鐢ㄦ埛缂╂斁銆傚叾娆★細缃戦〉瀹藉害css涓瀹氳浣跨敤鐧惧垎姣攚idth: xx%;锛屼笉鑳界敤缁濆鍍忕礌銆傚綋鐒跺彲浠ョ敤width:auto;绗笁锛屾祦鍔甯冨眬.left{float: left;width: ***%;}绗洓锛岄夋嫨鍔犺浇css杩欐槸鑷傚簲鐨勫叧閿儴鍒.abc{ height:300px;...
绛旓細涓婁綘缃戠珯涓婃壘鍒伴棶棰樹簡 鎶婁綘杩欎釜CSS bktitle { width: 400px;} 瀹藉害寮勫皬鐐瑰氨琛屼簡 鏀规垚300PX 灏变笉璺戝亸锛屾敼鎴200PX灏卞拰涓嬮潰瀵归綈浜 鍦╲site.css 鐨 1276琛
绛旓細table鏄浐瀹甯冨眬锛tr蹇呴』鏄唬琛ㄤ竴琛岋紝鎵浠ヤ綘鍒兂鐫鏀瑰彉table锛涗綘鍙互鑰冭檻div+css甯冨眬锛屽彲浠ヨ缁濆鐨勫ぇ閮ㄥ垎鏁堟灉閮借兘杈惧埌锛屽鏋滀綘鍙細鐢╰able鐨勮瘽锛屼綘涓嶅Θ鍦╰d鍐呭啀濂椾竴灞倀able鏉ヨ揪鍒颁綘鎵璋撶殑姘村钩鎺掑垪鏁堟灉濂戒簡
