CSS教程之用CSS的padding和border属性为图片设置双边框效果
当然空口无凭，下面我们就让大家看一下Div+css在页面中达到的效果。[*]
[*]
实在这个例子很复杂，只是padding和border的在图片上的一个使用实例，但愿能经由过程此例子，更好地懂得padding和border的用法，到达触类旁通的目标。有关padding和border的更具体用法先容，请参看css在线手册中的《http://www.ckuyun.com/css2/padding_padding595.shtml》和《http://www.ckuyun.com/css2/border_border618.shtml》。
<styletype="text/css">
body{text-align:center;font-family:Verdana;}
.img1{padding:5px;border:5pxsolid#333;}
.img2{padding:5px;border:1pxsolid#333;}
.img3{padding:5px;border:5pxsolid#333;background:#c33;}
</style>
<p><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>用CSS的padding和border属性为图片设置双边框效果</title><styletype="text/css">body{text-align:center;font-family:Verdana;}.img1{padding:5px;border:5pxsolid#333;}.img2{padding:5px;border:1pxsolid#333;}.img3{padding:5px;border:5pxsolid#333;background:#c33;}</style></head><body><h2>用CSS的padding和border属性为图片设置双边框效果</h2><p></p><p><imgsrc="uploadfile/sample1.jpg"class="img3"/></p><h3>尺度之路——<ahref=http://www.ckuyun.com/>www.ckuyun.com</a> 转载请说明出处</h3></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
当然从外界的各种渠道中，特别是互联网上，我们了解到现在市面上的公司并不关心网页是如何生成的，他们需要的是快速、高效的工作和花哨的页面。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
页:
[1]