做移动版html图片怎样布局

html-css012

做移动版html图片怎样布局,第1张

看你怎么来做这个移动站了，我给你举几个例子吧：

1、如果你做的是width:320px；那么你的banner图也是320px，其余的小图自己固定控制即可；

2、如果你是做最小宽度min-width与最大宽度max-width的话，控制区域最大宽度不要超过多少px，然后图片可以设置width:100%；即可自动适应；

3、页面布局100%，这样的很多时候可能会导致图片在pc电脑上失真，但是咱们做的是移动端的，所以不用顾虑那么多，设置width为100%即可；

现在的移动端整体布局都不会超出这个范围，看你自己合适做什么，选其一种即可；

最好可以想办法用JS算好你要铺背景的装载款的高宽，然后类似以下的css

div

{

background:url(/i/bg_flower.gif)

background-size: 100% 100%

-moz-background-size:35% 100%/* 老版本的 Firefox */

background-repeat:no-repeat

}

关键是：background-size: 100% 100%这句。IE下大部分会不支持的background-size的

DIV + CSS 实现超链接左边图片右边文字样式，首先我们需要设置好3个div，然后用一个a标签包裹着其他2个div，在里面设置好宽度和高度，在通过css的float属性来实现对2个div左右对齐操作，具体看代码：

<html>

<head>

<style>

#div2{

widht:220px

height:300px

font-size:13px

}

#div3{

width:100px

height:80px

flaot:left

margin-left:20px

}

#div4{

width:100px

height:80px

flaot:left

}

</style>

</head>

<body>

<div id='div2'>

<div id='div3'>

<img src='图片地址'>

</div>

<div id='div4'>

<p>我是测试文字</p>

</div>

</div>

</body>

</html>