您的位置：首页 > 编程语言

网页中的：代码编写可变长宽的框框背景图片制作可变适应性的自动改变长和宽的

2013-05-11 20:44 253 查看

第一步：要用的圆角矩形的图片一张

第二步：用photoshop进行截图，方法：“5截图”，立刻是固定长宽的框框，自由可变长宽。（注意：div>截图的宽度时候无法适应）

此图片的width:403px; height:227px;不可以超过图片的原来宽度高度。当然你可以小于但绝不可以大于。因此我们最好一开始选图片的是就选一个大一点的，这里我们只能比原图按比例的小，但不可以比原图还要大，这是值得我们注意的。

利用photoshop中的切片工具将其切成5部分图片，图片如下：

1.

第三步：将这五个图片分别套在不同的元素中，嵌套在网页中，并让其成完整的圆角矩形。

HTML：代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>制作可延展的圆角矩形</title>

<link href="css.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="mm" class="round2">

<h3>这里是标题</h3>

<div class="con">

<p>这里是内容</p>

<p>这里是内容</p>

<p>这里是内容</p>

<p>这里是内容</p>

<p>这里是内容</p>

</div>

<div class="footer">

<p> </p>

</div>

</div>

</body>

</html>

css:代码

@charset "utf-8";

/* CSS Document */

*{

margin:0px;

padding:0px;}

body{

font-size:14px;

font-family:"微软雅黑";}

#mm{

width:403px;

margin:auto;

margin-top:200px;}

#mm h3{

padding:10px 30px;}

.#mm .footer p{

padding-left:5px;}

/*可变宽度的框框样式*/

/*先什么都不要管，想办法将五个图片嵌套在其中*/

.round2{

background-image:url(%E5%9B%BE%E7%89%87/images/top_left.gif);

background-position:top left; /*采用了定位。记得哦*/

background-repeat:no-repeat;}

.round2 h3{

background:url(%E5%9B%BE%E7%89%87/images/top_right.gif) no-repeat top right;

font-size:16px;

font-weight:bold;}

.round2 .con{

background:url(%E5%9B%BE%E7%89%87/images/main_right.gif) repeat-y

top right;

/*margin-top:-2em;/*解决IE中空隙的问题*/

padding-left:50px;}

.round2 .footer{

background:url(%E5%9B%BE%E7%89%87/images/bottom_left.gif) no-repeat bottom left;}

.round2 .footer p{

background:url(%E5%9B%BE%E7%89%87/images/bottom_right.gif) no-repeat bottom right;}

第四步：最终效果图

再接再厉。加油

对了记得采用的是photoshop 切片工具切图的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

网页中的：代码编写可变长宽的 框框 背景图片 制作 可变适应性的自动改变长和宽的

网页中的：代码编写可变长宽的框框背景图片制作可变适应性的自动改变长和宽的