《
可变高宽的圆角框》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339422013.htm
这种通过将圆角框宰割成5个图片来把持高宽的办法，固然到达了可变高宽的目标，然而毛病很显明，就是图片1需要切的比拟大。有不更好的方法呢？网上我看到了一种不须要背景图片来实现可变高宽圆角框的方法。
01 <div id="m_category" class="round2"> 02 <h3>治理核心</h3> 03 <div class="con"> 04 <p><a href="Categorymanager.aspx">种别管理</a></p> 05 <p><a href="Newsmanager">消息管理</a></p> 06 <p><a href="Addnews">增加新闻</a></p> 07 ,
只收录首页之SEO解决方案;</div> 08 <div class="footer"> 09 ,
发现css中出现的bug以及修复方法教程; <p> </p> 10 </div> 11 </div> 01 * 02 { 03 padding:0; 04 margin:0; 05 } 06 body 07 { 08 font-size:14px; 09 } 10 a:link, a:visited 11 { 12 color: #000; 13 text-decoration: none; 14 } 15 a:hover 16 { 17 color: #00f; 18 text-decoration: underline,
发布站制作途径分析; 19 } 20 #m_category 21 { 22 width:200px; 23 } 24 #m_category .con p 25 { 26 ,
友链交换注意事项; padding:10px; 27 } 28 .round2 29 { 30 background-image:url("../images/round2_left_top.gif"); 31 background-position:top left; 32 background-repeat:no-repeat; 33 } 34 .round2 h3 35 { 36 background:url("../images/round2_right_top.gif") no-repeat top right,
友情链接对网站的有多重要; 37 padding-left:35px; 38 padding-top:12px; 39 padding-bottom:12px; 40 font-size:16px; 41 font-weight:bold; 42 } 43 .round2 .con 44 { 45 height:200px; 46 padding:0 20px; 47 background:url("../images/round2_right_middle.gif") repeat-y top right; 48 } 49 .round2 .footer 50 { 51 background:url("../images/round2_left_bottom.gif") no-repeat bottom left; 52 } 53 .round2 .footer p 54 { 55 background:url("../images/round2_right_bottom.gif") no-repeat bottom right; 56 }
为什么这么分割？为什么图片1需要切成这么大呢？这样就能实现可变高宽了？这些问题不急于答复，我们不妨先来浏览下源码。
为了达到可变高宽的效果，首先应将图片分割成五块。如下图：
矩形框在网页中较为常见，不外个人感到仍是圆角框更为雅观。那么圆角框是如何用DIV+CSS来实现的呢？如果把一张圆角框图片直接作为背景来处置，那么高宽就都被定逝世了，无奈随内容而转变大小。今天，我学会了一种方式来设计可变高宽的圆角框。先来看看后果图：
--> [
网站建设之]可变高宽的圆角框
Tag：圆角 圆角
从上述代码中能够看到，round2将图片1作为了背景，h3标签将图片2作为了背景，con将图片3作为了背景，foote中的p标签将图片4作为了背景，footer将标签5作为了背景。咱们先从最底下的那层开端讲起。当round2中的内容不足以填满第1个图片时，那么只显示图片1的局部。此时，将图片5叠加到图片1上。这样就达到了节制高度的目的。掌握宽度实在也是统一个原理。我们通过h3标签和p标签将图片2跟图片4叠加到图片1和图片5上，这样就实现了可变宽度。剩下的只有让con中的图片3沿y轴平铺下来，那么全部圆角框的构造就构成了。
(责任编辑：网站建设)
可变高宽的圆角框相关文章