论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS布局实例:仅一张图片实现圆角!

文章类别:div+css布局 | 发表日期:2008-9-26 11:28:05

  这个代码是UDSKY推荐给我的一段用图片版的圆角代码,于是分析代码写个教程,这段代码最大的优点是:只使用了一张图片,代码简单,很轻易上手.不足之处在于做这种圆角BOX所在的背景区为单一色!还是直入正题吧!

  预备一张图片(我们要使用的那张背景图,四个角都是这张背景图四个部位显示出来的).最初学习圆角时,我承想过用一张四分之一的圆,然后背景图旋转/翻转不就可以用以用在四个角上了吧,但是CSS中没有这种功能,只好放弃这种不实际的想法!


圆角部分放大图:


HTML代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<DIV class=cssbox>
<DIV class=cssbox_head>
<H2>标题</H2>
</DIV>
<DIV class=cssbox_body>
<P>内容</P>
</DIV>
</DIV>

  思路:盒子cssbox内放入两个box,上部分box做成两个角(cssbox_head右角,H2左角),下部分box也做一个角的背景图(左角).cssbox_body内一个右下角.


第一步:
  这一步是最简单的,在一个盒子中定义一个右下角的背景图片.
  CSS代码

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
*{
padding:0;
margin:0;
}/*与本教程无关的代码*/
.cssbox{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;/*与本教程无关的代码*/
}

  浏览器中看到的效果见下图:


  执行代码:
div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

第二步
  我们定义右上角的样式,这一步也不难做到,因为定义背景图定义在右上,背景图圆角外部分又不是透明,而是白色,所以白色区盖住cssbox_body的绿色部分.
  CSS代码

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
{
padding:0;
margin:0;
}
.cssbox,.cssbox_head{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
}

  浏览器中看到的效果见下图:


div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd\">
<HTML
xmlns=\"http://www.w3.org/1999/xhtml\">
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content=\"text/html; charset=utf-8\">
<STYLE type=text/css>
{
padding:0;
margin:0;
}
.cssbox,.cssbox_head{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
}

</STYLE>
<META content=\"MSHTML 6.00.2900.2995\" name=GENERATOR>
</HEAD>
<BODY>
<DIV class=cssbox>
<DIV class=cssbox_head>
<H2>标题</H2>
</DIV>
<DIV class=cssbox_body>
<P>内容</P>
</DIV>
</DIV>
</BODY>
</HTML>

第三步
  经过以上的两步我们已经做了出两个角了,在接着做第三个角,定义在H2中也就是左上角.为了美观一些,我们在H2中加入补白10PX,
  CSS代码

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
{
padding:0;
margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
}
.cssbox_head h2{
background-position:top left;
margin:0;
padding:10px;
}

  执行代码:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]



  疑点:希罕了,为什么实际上并不是我们想要的效果?我们在看一下问题出在哪,应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角,解决的方法有两种:
  第一种:H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了;
  第二种:反向思维,cssbox_head中加入一个右补白,这样H2中的背景图也不会盖住cssbox_head中的角;
  这里我们选用第二种方法.

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}

  执行代码:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]


第四步
  这一步和第三步很相似,这里就不会在犯错误了,根据实际情况只能选用第一种方法.
  css代码

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
*{
padding:0;
margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}
.cssbox_body{
background-position:bottom left;
margin-right:10px; /* interior-padding right */
padding:0px 0 10px 10px;
}

  完整的代码:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

最终效果图



  终于完成我们的"大作"了!从上面我们可以看出,定义这种效果的样式是先从父元素到子元素定义的,也就是从外层向内层定义,这是因为,越是内层的的图/背景,它在显示时确是在外层的.
  在内容区假如P或其它元素有边界的情况下会出现边界叠加现象,在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生,关于边界叠加见网站中<边界叠加>这篇文章.
  本文作者:purecss
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058