div+css打造可变高宽的圆角框

日期:2021-03-12 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

倘若把1张圆角框照片立即做为情况来解决,那末高宽就都被定死了,没法随內容而更改尺寸。今日,我学会了1种方式来设计方案可变高宽的圆角框。先看来看实际效果图:

  以便做到可变高宽的实际效果,最先应将照片切分成5块。以下图:


为何这么切分?为何照片1必须切成这么大呢?这样就可以完成可变高宽了?这些难题不急于回应,大家何不先来阅读文章下源代码。

拷贝编码
编码以下:

<div id="m_category" class="round2">
<h3>管理方法管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">种别管理方法</a></p>
<p><a href="Newsmanager">新闻管理方法</a></p>
<p><a href="Addnews">加上新闻</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>

css

拷贝编码
编码以下:

*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}

从上述编码中能够看到,round2将照片1做为了情况,h3标识将照片2做为了情况,con将照片3做为了情况,foote中的p标识将照片4做为了情况,footer将标识5做为了情况。大家先从最底下的那层刚开始讲起。当round2中的內容不够以铺满第1个照片时,那末只显示信息照片1的一部分。此时,将照片5叠加到照片1上。这样就做到了操纵高宽比的目地。操纵宽度实际上也是同1个基本原理。大家根据h3标识和p标识将照片2和照片4叠加到照片1和照片5上,这样就完成了可变宽度。剩余的要是让con中的照片3沿y轴平铺下来,那末全部圆角框的构造就产生了。

  这类根据将圆角框切分成5个照片来操纵高宽的方式,尽管做到了可变高宽的目地,可是缺陷很显著,便是照片1必须切的较为大。有木有更好的方式呢?在网上我看到了1种不必须情况照片来完成可变高宽圆角框的方式。

上一篇:互联网营销推广企业 返回下一篇:没有了