`
hope598
  • 浏览: 67052 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

css中的圆角样式布局一

    博客分类:
  • css
阅读更多

在网页设计中,大多网页为了美观,都把区域的四角设计成给人一种圆滑的感觉,下面简单介绍两种圆角设计方法:

 

<div id="lt">
  <div class="ss">
   <div class="tt"><div class="ttl"></div><div class="ttr"></div>  </div>
   <div class="bb">
   <div class="t1">标题</div>
   <div class="c" id="cc">
        <!--内容-->
   </div>            
  </div>
   <div class="ss">
      <div class="tl"><div class="tll"></div><div class="tlr"></div></div>
        </div>
       </div>
</div>

 下面是对应的css样式:

 

#lt{
    float:left;width:200px;
}
.ss{
    width:100%;position:relative;
}
.ttl,.ttr,.tll,.tlr{
    background-image:url(/img/l.gif);background-repeat:no-repeat;overflow:hidden;position:absolute;font-size:1px;
}
#lt .ttl{
    background-position:0 0;top:0;left:0;height:5px;width:5px;
}
#lt .ttr{
    background-position:-11px 0;top:0;right:0;height:5px;width:5px;
}
.bb{
    background:#c00;border:1px solid #000;border-bottom:0;
}
#lt .tll{
    background-position:0 -3px;bottom:0!important;bottom:-1px;left:0;height:5px;width:5px;
}
#lt .tlr{
    background-position:-7px -3px;bottom:0!important;bottom:-1px;right:0;height:5px;width:5px;
}
.tl{
    height:7px;background:url(/img/r.gif) repeat-x;overflow:hidden;width:100%;
}
.t1{
    padding-left:10px;height:20px;line-height:20px;font-size:12px;font-weight:bold;
}
.c{
    background:#FFF;margin:-3px 5px;padding:3px 3px 5px 3px;zoom:100%;
}
 

效果图如下所示:


  • 大小: 3.5 KB
  • 大小: 141 Bytes
  • 大小: 51 Bytes
2
0
分享到:
评论
2 楼 hope598 2009-10-22  
zhengyutong 写道
background-image:url(/img/l.gif);
图片呢?

图片已上传!
1 楼 zhengyutong 2009-10-22  
background-image:url(/img/l.gif);
图片呢?

相关推荐

    css 圆角样式

    10. **性能考虑**:虽然CSS圆角样式在现代浏览器中性能良好,但在大量或复杂布局中,过度使用可能会对页面加载速度产生一定影响。因此,明智地应用圆角可以兼顾美观和性能。 总之,CSS圆角样式是现代网页设计中不可...

    纯css半圆角tab标签切换代码

    本项目名为“纯css半圆角tab标签切换代码”,它包含了六个HTML文件,每个文件代表一种不同的Tab状态或布局,用于实现平滑的切换效果。 首先,我们要理解CSS(Cascading Style Sheets)的作用。CSS是一种样式表语言...

    div+css呈现圆角层示例

    在网页设计领域,`div+css`是一种常见的布局方式,它通过HTML的`&lt;div&gt;`元素结合CSS(层叠样式表)来控制页面结构和样式。在这个特定的案例"div+css呈现圆角层示例"中,我们将探讨如何利用CSS技术创建具有圆角边框的`...

    《精通CSS+DIV网页样式与布局》书中实例

    DIV元素是HTML中的一个块级元素,常用于组织网页内容,通过CSS样式控制,可以实现复杂的网页布局。DIV可以通过class或id属性进行选择和操作,这为创建模块化的网页结构提供了可能。 在《精通CSS+DIV网页样式与布局...

    DIV+CSS漂亮的样式

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS(层叠样式表)类来控制HTML中的`&lt;div&gt;`元素,从而实现页面的精美设计和结构化布局。本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS...

    html5+css3圆角图文展示卡片层叠滑动切换特效.zip

    在“html5+css3圆角图文展示卡片层叠滑动切换特效.zip”这个压缩包中,我们可以看到一个利用这两种技术实现的动态展示卡片的特效。这种特效通常用于产品展示、信息分类或者新闻滚动等场景,可以吸引用户注意力,提高...

    css 圆角边框 样式表

    其中,圆角边框是CSS样式表中一个非常重要的特性,它使得网页元素的边界不再局限于直角,而是可以呈现出更加柔和、自然的视觉效果。本文将深入探讨CSS圆角边框的原理以及如何在实际网页设计中应用。 一、CSS圆角...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    1. **CSS圆角边框**:CSS3的`border-radius`属性用于设置元素边框的圆角半径,允许我们创建不同大小的圆角效果。例如,`border-radius: 10px;`将为元素添加一个10像素的圆角。同时,还可以分别设置四个角的圆角大小...

    css图片圆角处理代码

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义网页元素外观和布局的样式表语言。在现代网页设计中,实现图片圆角效果是一个常见的需求,这可以使页面看起来更加精致和专业。本文将深入探讨如何使用CSS...

    CSS下拉圆角导航菜单

    3. **圆角样式**:为了实现圆角效果,我们可以使用CSS的`border-radius`属性。例如,将所有菜单项的四个角都设置为4px圆角。 ```css .nav-menu li a { border-radius: 4px; } ``` 4. **下拉菜单显示**:当鼠标...

    CSS3+DIV网页样式与布局从入门到精通(未来科技) 源代码

    CSS3+DIV网页样式与布局从入门到精通不仅是一门技术课程,更是现代前端开发不可或缺的一部分。通过系统地学习CSS3的各种新特性以及如何使用DIV进行布局,开发者可以构建出既美观又实用的网页。无论是对于初学者还是...

    jquery mobile css3手机表单页面布局按钮样式

    总结来说,jQuery Mobile 和 CSS3 在手机表单页面布局和按钮样式设计中起到了关键作用。jQuery Mobile 提供了易于使用的组件和交互设计,而CSS3 则为样式和动画提供了无限可能。结合两者,开发者可以构建出美观且...

    CSS 下拉 圆角 导航 菜单

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的重要技术。本资源“CSS下拉圆角导航菜单”聚焦于利用CSS实现具有圆角效果的交互式下拉导航...

    精通CSS+DIV样式和布局源码

    1. **CSS基础知识**:CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许开发者通过分离内容和表现,使网页设计更加灵活和易于维护。基础的CSS知识包括选择器、属性和值...

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。  二、使用布局技术  使用CSS3 圆角技术实现。  使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置...

    div+css实现圆角导航菜单的效果

    `div+css`技术是实现这一目标的常用方法,它允许我们通过HTML结构和CSS样式来构建网页布局和元素样式。本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以...

    div css圆角代码各种圆角表格_圆角边框css圆角

    在网页设计中,`div` 和 `CSS` 是不可或缺的部分,尤其当涉及到界面美观和用户体验时,圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和,还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...

    精通DIV+CSS3网页布局与样式源代码

    《精通DIV+CSS3网页布局与样式源代码》是一份深度学习和实践Web前端开发的宝贵资源,它涵盖了DIV和CSS3在构建高效、响应式网页布局中的核心技术和实践方法。这一压缩包文件包含了实现各种网页布局和样式的源代码示例...

    CSS制作圆角效果

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档中元素外观、布局和结构的重要样式语言。本篇文章将深入探讨如何利用CSS来创建圆角效果,这在现代网页设计中是非常...

    css+div圆角窗口

    在HTML中,`&lt;div&gt;`是一个非常常用的布局容器,可以容纳其他HTML元素,并通过CSS进行样式定义。在这里,我们可以创建一个`&lt;div&gt;`元素作为窗口的基础框架,然后应用`border-radius`来形成圆角。 4. **其他CSS3样式**...

Global site tag (gtag.js) - Google Analytics