当前位置: 网站建设 > 网页设计 > 建站经验 >

可变高宽的圆角框

时间:2013-03-02 03:57来源:未知 作者:admin 点击:

标签:可变高宽的圆角框 把持(2)通过(23)可变(1)图片(50)5个(16)这种(11)高宽(1)圆角(28)宰割(2)
这种通过将圆角框宰割成5个图片来把持高宽的办法,固然到达了可变高宽的目标,然而毛病很显明,就是图片1需要切的比拟大。有不更好的方法呢?网上我看到了一种不须要背景图片来实现可变高宽圆角框的方法。 01 div id=m_category class=round2 02 h3治理核心/h3 03 div class=con 04 pa href=Categorymanager.aspx种别管理/a/p 05 pa href=Newsmanager消息管理/a/p 06 pa href=Addnews增加新闻/
可变高宽的圆角框》文章地址: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轴平铺下来,那么全部圆角框的构造就构成了。


(责任编辑:网站建设)
可变高宽的圆角框相关文章
上一篇:只收录首页之SEO解决方案 下一篇:各种主流浏览器对HTML5的兼容性分析
回到顶部