网页设计里面怎么用css定位图片的不规则摆放?(如图)

我在用css写这张网页,比如图片上的3张照片和文字的摆放不规则,怎么用代码写好呢?求师傅,我愿意跟高手学习~~~还有,我希望鼠标经过图片时有特殊效果(比如加灰或者放大),是不是一定要用js或者jq???我不会js。。如果有师傅愿意耐心教我,我会努力努力学习的!!!

百度:css3 变形(低版本ie和少部分浏览器不支持)

低版本ie的实现:
先把图片在ps里面拉斜做影子后存为:png24+背景透明格式,然后网页里面用cssz-index控制层级上下关系,并用定位摆放到合适的位置。另外你还要修正一下ie6的png24背景不透明的问题。

然后,你给那三个猫咪图片每张一个id:
<img src="aaa.jpg" id="cat1" />
<img src="bbb.jpg" id="cat2" />
<img src="ccc.jpg" id="cat3" />

#cat1,#cat2,#cat3{position:absolute;}/*绝对定位*/

#cat1{
left:300px;top:80px;
z-index:10;
}

#cat2{
left:50px;top:320px;
z-index:9;
}

#cat3{
left:300px;top:80px;
z-index:8;
}追问

百度了,我想了解的是写这种不规则排版的代码思路,还有就是如果想单独对每张图片加特效是否一定用js或者结合flash。。。不过,谢谢你的回答,帮我打开了思路。

追答

你看到的不规则,其实都是规则的,网页里面任何东西都逃不过正方形的原始区域;
只是在视觉上你感觉它不规则了而已。

单独对每张图片加特效这个不好回答,因为你没给出定义哪种才算是特效,如果鼠标指上去换张图也是特效的话,很多都可以不用js或flash。

追问

谢谢你~~你说的有道理。比如我想做成一种效果——鼠标移到图片那里图片变色,或者更复杂一点,就是鼠标点击每张图片,然后粘着的胶布会撕开,图片就掉下来放大到眼前。我现在就是希望全部都用css实现布局和效果,所以只是不太明白有些效果应该怎么判断怎么处理。不过很谢谢你,我懂了很多。

追答

鼠标移动到图片上图片变化就用css定义a:link和a:hover状态时不同背景图就行了。
如果要胶带撕开就最好用flash(相对更简单,js应该也能做到,但具体到这个撕开效果要细腻的话js相当麻烦),css没有这个能力做到。

你想把这个图做成网页,除去你希望的那个动画不说,还面临很多细节问题要相关的知识,建议你新华书店买两本书,选老外写的,重点讲css2基础的和html基础的,html那本翻翻即可,css2的书从头到尾的先把书上说的东西都拉通,多做几次,再来碰你自己做这个网页。QQ就不加了,看了书上的基础你通过自己独立动手制作这个你设计的网页学到的东西将比你在知道上问100个问题都强。

追问

恩恩,也没关系,从你的话里我真的学到了很多。我会继续努力学习的,你看问题很通透啊,总是点到我不明白的关键。咔咔,谢谢你的耐心解答,你的方法我会努力尝试~~

温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-02-04
其实你是思维定势了,图片基本都是方正行的,基本不可能弄出这样,要是先做成这样,就吧不想要的部分弄成透明就好了,呵呵。追问

基本不可能做出来?。。方方正正的二列或者三列栏我就会做,但是不规则视觉效果好一点的,我就不太会了,很想做出如图这种效果!!非常想。。有办法么?

追答

明白图片都是方正型的,这点很好,就比如把,你看看平时做那些圆点的GIF的图片,他们其实是一个正方型,然后画一个圆,然后把其它多余的都变成透明的,然后就得到一个圆点了是把,你这个也一样呀,本来也是一个长方形的图片,弄好了自己的图片,就把多余的去掉,然后旁边就是透明的了,放上去是可以是这样的效果了,我觉得这样做是最简便的方法,当然还有其它的方法,建议你用这个把。

追问

恩恩,我懂你的意思了,看做方正的图片在定位。所以难处就是写css时对每个图片div的定位了吧。谢谢你~我会继续努力尝试一下~

第2个回答  2013-02-04
很简单!
直接一张图片!他原来也肯定是一张图片,要不就是flash
而且,做成这样,都是不可以后台更新的,不需要分开追问

直接一张图片的话那如果做成每张图片都有特效岂不麻烦?比如我想做成一种效果——鼠标点击每张图片,然后粘着的胶布会撕开,图片就掉下来放大到眼前——这些是不是用flash做好?还是js可以完成?

追答

js做的话,做不出撕开的效果,只能用flash

追问

如果写成flash的话的确好办,不过就是变成了一个flash纯站。。我现在就是希望全部都用css实现布局和效果,所以只是不太明白有些效果应该怎么判断怎么处理。不过很谢谢你,我懂了一点。

追答

只能div+css+flash了
像撕开这种效果,就算html5也做不出来的
图片斜的也是比较不实际

追问

恩恩~~谢谢你,我大概懂得往哪个方向想了~~谢谢哈,这是我设计的网页,一心想写成网页,希望可以成功。再次感谢啊!!

相似回答