图片css样式,css图片布局

CSS中如何给图片标签设置不同的样式

可以有多种方法实现的。比如可以给每个img设置不同的ID：

img id=p1 src="1.jpg"/img id=p2 src="2.jpg"/img id=p3 src="3.jpg"/

style

#p1 {border:1px solid #f00}

#p2 {border:1px solid #0f0}

#p3 {border:1px solid #00f}

/style

或者是不同的class：

img class=p1 src="1.jpg"/img class=p2 src="2.jpg"/img class=p3 src="3.jpg"/

style

.p1 {border:1px solid #f00}

.p2 {border:1px solid #0f0}

.p3 {border:1px solid #00f}

/style

还有一种更灵活的方式，但需要浏览器支持css3：

img src="1.jpg"/img src="2.jpg"/img src="3.jpg"/

style

img:nth-of-type(1) {border:1px solid #f00}

img:nth-of-type(2) {border:1px solid #0f0}

img:nth-of-type(3) {border:1px solid #00f}

/style

这种方法还有多种灵活的处理方式，比如：

img:nth-of-type(odd) 会选择所有单数的图片（第1张、第3张、第5张……）

img:nth-of-type(even) 会选择所有双数的图片（第2张、第4张、第6张……）

img:nth-of-type(2n) 也是选择双数

img:nth-of-type(2n+1) 也是选择单数

img:nth-of-type(3n+1) 从第1张算起每3张取出1张图片（第1张、第4张、第7张……）

img:nth-of-type(5n+3) 从第3张算起每5张取出1张图片（第3张、第8张、第13张……）

除了这个，css还有几十种不同的选择器，你百度搜一下 css选择器 就知道了。

相关问答

Q1: CSS li的图片样式

1、css li的图片样式：liimg src="" class="img"/li

2、样式： .img{width:100px; height:100px; background:#f00;}

Q2: 图片显示 css样式问题

这种情况用table比较合适，例如

table width="200" border="0" cellspacing="0" cellpadding="0" height="200"

tr

td align="center" valign="middle" bgcolor="#CCCCCC"img src="" width="100" height="70" //td

/tr

/table

Q3: 图片居中怎么设置 css

写个简单的例子给你吧

htlm如下：

h4图片水平居中/h4

div class="demo1"

img src="你的图片" alt=""

/div

h4图片垂直居中/h4

div class="demo2"

div class="imgbox"

img src="你的图片" alt=""

/div

/div

h4图片水平垂直居中/h4

div class="demo3"

div class="imgbox"

img src="你的图片" alt=""

/div

/div

css如下：

style type="text/css"

.demo1{width: 200px;height: 200px;border: 1px solid #ccc;display: inline-block;text-align: center;}

.demo1 img{width: 100px;height: auto;}

.demo2{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}

.demo2 .imgbox{display: table-cell;vertical-align: middle;}

.demo2 .imgbox img{width: 100px;height: auto;}

.demo3{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}

.demo3 .imgbox{display: table-cell;vertical-align: middle;text-align: center;}

.demo3 .imgbox img{width: 100px;height: auto;}

/style

Q4: dw如何为图片设置css样式

dw里怎样设置图片的css样式

1、首先在文件内插入一张图片，点击插入\图像，选择一张图片即可。

2、选中图像，点击css样式窗口的+号，新建一个CSS（相关课程推荐：css视频教程） 样式，打开对话框。选择标签元素，下面就自动变为img，就是说为图像编辑规则。

3、比如要为图片编辑边框，就在弹出的对话框中选择边框，有三个属性可以更改，一个是类型，大小和颜色。可以根据需要选择。

4、在右侧的css面板上就多了个边框属性，代码中多了个图像的css样式代码。图像就自动按照样式进行更改了。

5、如果要对该图像再进行修改，可以点击css样式窗口下的铅笔，在弹出的对话框中修改即可。

Q5: 如何使用js来控制图片的css样式？

这个可以用CSS实现就好了。不必要使用JS

图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。

.img2{

/*这里写你的所有图片都会用到的样式*/

}

.img2:first-child, .img2:last-child{

/*这里写第一个图片和最后一个图片会用到的样式*/

}

.img1:hover .showBigImg{

display:block;

}

对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。

希望能帮助到你